feat: write blog post for v1.15.0 release (#52)

* feat: add v1.15.0 blog post

* refactor: update images to use voi and add download button on hero

blog/2023-12-27-1-8-0-new-release/index.mdx

@@ -13,10 +13,10 @@ import BlogScreenshotImage from '@site/src/components/BlogScreenshotImage';
 import { AGORA_LABS_LINK, REPORT_A_BUG_LINK, SUGGEST_A_FEATURE_LINK } from '@site/src/constants';
 
 <!-- images -->
-import addArc200AssetDarkImage from '@site/static/images/add_arc200_asset_screen-dark.png';
-import addArc200AssetLightImage from '@site/static/images/add_arc200_asset_screen-light.png';
-import arc200SupportDarkImage from './arc200_support-dark.png';
-import arc200SupportLightImage from './arc200_support-light.png';
+import addARC0200AssetDarkImage from '@site/static/images/arc0200_support_screen-dark.png';
+import addARC0200AssetLightImage from '@site/static/images/arc0200_support_screen-light.png';
+import arc0200SupportDarkImage from './arc200_support-dark.png';
+import arc0200SupportLightImage from './arc200_support-light.png';
 
 ![Kibisis release 3D pixel icon in space](/images/new_release_logo_in_space.png)
 
@@ -42,11 +42,11 @@ ARC-200 tokens have been inspired by the equivalent [ERC-20](https://ethereum.or
 The team here at Agora Labs have been working hard over Christmas to get ARC-200 support ready. With version 1.8.0, you can not add an ARC-200 asset, if you know the application ID:
 
 <BlogScreenshotImage
-  label="Add ARC-200 asset"
+  label="Add ARC-0200 asset"
   maxWidth="400px"
   imageSources={{
-    dark: addArc200AssetDarkImage,
-    light: addArc200AssetLightImage,
+    dark: addARC0200AssetDarkImage,
+    light: addARC0200AssetLightImage,
   }}
 />
 
@@ -55,11 +55,11 @@ The beauty of ARC-200 is that it is _free_ to opt-in, yes that is right, ARC-200
 Once the ARC-200 asset has been added, it will appear in your asset holdings, and you will be able to check your balance, send and receive!
 
 <BlogScreenshotImage
-  label="ARC-200 support"
+  label="ARC-0200 support"
   maxWidth="400px"
   imageSources={{
-    dark: arc200SupportDarkImage,
-    light: arc200SupportLightImage,
+    dark: arc0200SupportDarkImage,
+    light: arc0200SupportLightImage,
   }}
 />
 

blog/2024-05-01-1-15-0-new-release/index.mdx

@@ -0,0 +1,72 @@
+---
+title: Version 1.15.0 Release
+description: The Voiage to mainnet
+slug: version-1-15-0-release
+authors: [kieran]
+tags: [avm-web-provider, release, voi]
+image: /static/images/new_release_logo_in_space.png
+---
+
+<!-- components -->
+import BlogScreenshotImage from '@site/src/components/BlogScreenshotImage';
+
+<!-- constants -->
+import { AGORA_LABS_LINK, REPORT_A_BUG_LINK, SUGGEST_A_FEATURE_LINK } from '@site/src/constants';
+
+<!-- images -->
+import allowActionTrackingDarkImage from './allow_action_tracking-dark.png';
+import allowActionTrackingLightImage from './allow_action_tracking-light.png';
+
+![Kibisis release 3D pixel icon in space](/images/new_release_logo_in_space.png)
+
+## Overview
+
+<!-- change just the version for new posts -->
+We are proud to present a new milestone in the development of Kibisis: v1.15.0!
+
+<!-- re-write this paragraph for all new versions -->
+The latest release of Kibisis lays the groundwork for the [Voiage To Mainnet](the-voiage-to-mainnet).
+
+Below you will find more details about what else is new in this release.
+
+<!-- go into detail about the new versions, or omit if no new features with in the release -->
+## Features
+
+### Earn Rewards With Voi
+
+As we move from Voi's testnet to mainnet, Kibisis will give users the option to earn rewards through quests performed while using Kibisis. These quests will relate to earning rewards that will be distributed once Voi has launched mainnet in the coming months.
+
+You will be shown a notification when you start up version 1.15.0 for the first time. You can choose to opt into quests, in the form of tracked actions, which is transmitted to a remote server.
+
+> ⚠️ **NOTE:** the data being transmitted will contain the account address, for certain actions, the asset ID. This data will be stored until the transition into Voi's mainnet and used exclusively for determining rewards.
+
+Opt-in to quest tracking is completely voluntary, and you can turn it off at any time by going switching off **Settings** > **Privacy** > **Allow certain actions to be tracked?**.
+
+<BlogScreenshotImage
+  label="Allow action tracking from privacy settings"
+  maxWidth="400px"
+  imageSources={{
+    dark: allowActionTrackingDarkImage,
+    light: allowActionTrackingLightImage,
+  }}
+/>
+
+For more information, see [this](the-voiage-to-mainnet) blog post.
+
+### AVM Web Provider Support
+
+<a href={AGORA_LABS_LINK} rel="noreferrer" target="_blank">Agora Labs</a> has released a new provider, the <a href="https://avm-web-provider.agoralabs.sh" rel="noreferrer" target="_blank">AVM Web Provider</a>. This new provider allows seamless communication between web-based providers (i.e. wallets) and clients (i.e. dApps).
+
+It strictly adheres to the ARC-0027 standard that lays out the schema structure for the transport layer, but, more importantly, it allows for communication between multiple wallets and multiple AVM chains.
+
+<!-- just give a bulleted list of fixes, or omit if no fixes with in the release -->
+## Fixes
+
+* Only one background app window opens when attempting to connect to a dApp that is open in multiple browser tabs (<a href="https://avm-web-provider.agoralabs.sh" rel="noreferrer" target="_blank">AVM Web Provider</a> and <a href="https://algorand-provider.agoralabs.sh" rel="noreferrer" target="_blank">Algorand provider</a> implementations only).
+
+## Closing Words
+
+<!-- leave this paragraph as standard sign off -->
+Thank you for your continued interest in Kibisis! We hope you are enjoying using it.
+
+Remember, if you see any bugs, please report the issue <a href={REPORT_A_BUG_LINK} rel="noreferrer" target="_blank">here</a>. If you would like to make any suggestions on new features, you can fill out a feature request <a href={SUGGEST_A_FEATURE_LINK} rel="noreferrer" target="_blank">here</a>.

docusaurus.config.js

@@ -68,7 +68,6 @@ const config = {
             require.resolve(path.resolve(STYLES_DIR, 'global.scss')),
             require.resolve(path.resolve(STYLES_DIR, 'functions.scss')),
             require.resolve(path.resolve(STYLES_DIR, 'mixins.scss')),
-            require.resolve(path.resolve(STYLES_DIR, 'navbar.scss')),
             require.resolve(path.resolve(STYLES_DIR, 'variables.scss')),
             // vendor
             require.resolve(
@@ -115,6 +114,10 @@ const config = {
           // right
           {
             items: [
+              {
+                label: 'Download',
+                href: '/#download',
+              },
               {
                 label: 'Concepts',
                 href: '/#concepts',
@@ -123,10 +126,6 @@ const config = {
                 label: 'Features',
                 href: '/#features',
               },
-              {
-                label: 'Download',
-                href: '/#download',
-              },
             ],
             label: 'Overview',
             position: 'right',
@@ -162,6 +161,10 @@ const config = {
           {
             title: TITLE,
             items: [
+              {
+                label: 'Download',
+                href: '/#download',
+              },
               {
                 label: 'Concepts',
                 href: '/#concepts',
@@ -170,10 +173,6 @@ const config = {
                 label: 'Features',
                 href: '/#features',
               },
-              {
-                label: 'Download',
-                href: '/#download',
-              },
             ],
           },
           {

src/components/FeaturesSection/FeaturesSection.tsx

@@ -38,32 +38,23 @@ const FeaturesSection: FC<IProps> = ({ variant }: IProps) => {
     {
       alt: 'Add ARC-200 screen',
       description:
-        'Kibisis not only supports AVM standard assets, it also supports ARC-200. From Kibisis, you can check your balance, transfer and add any ARC-200 asset.',
+        'Kibisis not only supports AVM standard assets, it also supports ARC-0200. From Kibisis, you can check your balance, transfer and add any ARC-0200 asset.',
       imageSources: {
-        dark: '/images/add_arc200_asset_screen-dark.png',
-        light: '/images/add_arc200_asset_screen-light.png',
+        dark: '/images/arc0200_support_screen-dark.png',
+        light: '/images/arc0200_support_screen-light.png',
       },
-      title: 'ARC-200 Support',
+      title: 'ARC-0200 Support',
     },
     {
       alt: 'Atomic transaction screen',
       description:
         'With AVM chains allowing up to 16 transactions to be grouped as an atomic transfer, Kibisis can sign all or multiple transactions within the atomic group.',
       imageSources: {
-        dark: '/images/atomic_transaction_screen-dark.png',
-        light: '/images/atomic_transaction_screen-light.png',
+        dark: '/images/atomic_transactions_screen-dark.png',
+        light: '/images/atomic_transactions_screen-light.png',
       },
       title: 'Atomic Transactions',
     },
-    {
-      alt: 'Sign JWT screen',
-      description: `Kibisis allows you to sign arbitrary data, using your account's private key, but Kibisis can also recognise standardized formats, such as JWTs, which is presented into a more intuitive interface.`,
-      imageSources: {
-        dark: '/images/jwt_support_screen-dark.png',
-        light: '/images/jwt_support_screen-light.png',
-      },
-      title: 'JWT (JSON Web Token) Support',
-    },
   ];
 
   return (

src/components/Header/Header.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, { FC } from 'react';
 
 // components
+import LinkButton from '@site/src/components/LinkButton';
 import ThemedImage from '@theme/ThemedImage';
 
 // styles
@@ -17,9 +18,17 @@ const Header: FC = () => {
             Your Ultimate AVM Utility Wallet
           </h1>
 
+          {/*subtitle*/}
           <p className={clsx(styles.text, styles['text--subtitle'])}>
             An AVM wallet in your browser that goes beyond just DeFi.
           </p>
+
+          {/*button*/}
+          <div className={styles['button-container']}>
+            <LinkButton fullWidth={true} href="/#download">
+              Download Now
+            </LinkButton>
+          </div>
         </div>
 
         {/*image*/}

src/components/Header/styles.module.scss

@@ -2,6 +2,12 @@
 @import "../../styles/mixins";
 @import "../../styles/variables";
 
+.button-container {
+  align-self: center;
+  padding: 1rem;
+  width: 50%;
+}
+
 .container {
   display: flex;
   flex: 1;

src/pages/index.tsx

@@ -19,11 +19,11 @@ const IndexPage: FC = () => {
       <Header />
 
       <Main>
+        <DownloadSection variant="primary" />
+
         <ConceptsSection variant="primary" />
 
         <FeaturesSection variant="accent" />
-
-        <DownloadSection variant="primary" />
       </Main>
     </Layout>
   );