feat: write blog post for v1.8.0 release (#22)

* refactor: blog screen images add padding on mobile screens

* feat: add version 1.8.0 blog post with arc200 asset screens

* chore: squash

* chore: squsah

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

@@ -0,0 +1,86 @@
+---
+title: Version 1.8.0 Release
+description: Version 1.8.0 brings ARC-200 support, Standard Asset opt-in, as well as many quality of life fixes.
+slug: version-1-8-0-release
+authors: [kieran]
+tags: [algorand, blockchain, voi, release]
+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 addArc200AssetDarkImage from './add_arc200_asset-dark.png';
+import addArc200AssetLightImage from './add_arc200_asset-light.png';
+import arc200SupportDarkImage from './arc200_support-dark.png';
+import arc200SupportLightImage from './arc200_support-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.8.0!
+
+<!-- re-write this paragraph for all new versions -->
+First and foremost, a Merry Christmas 🎄 from the team here at <a href={AGORA_LABS_LINK} target="_blank">Agora Labs</a>! The new version of Kibisis, version 1.8.0, is all about supporting ARC-200 tokens, the sexy new type of AVM assets. But that's not all, we have also brought in Standard Asset opt-ins as well as various fixes that squash some annoying bugs.
+
+Below you will find more details about what is new in this release.
+
+<!-- go into detail about the new versions, or omit if no new features with in the release -->
+## Features
+
+### ARC-200 Support
+
+The new ARC-200 token standard represents a major upgrade for assets on the AVM (Algorand Virtual Machine). They allow assets to utilize the power of smart contracts, by actually _being_ a smart contract!
+
+ARC-200 tokens have been inspired by the equivalent [ERC-20](https://ethereum.org/en/developers/docs/standards/tokens/erc-20/) on EVM chains. ERC-20 tokens underpin almost all tokens on EVM and so it is only fitting that AVM also has an asset of similar standard.
+
+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"
+  maxWidth="400px"
+  imageSources={{
+    dark: addArc200AssetDarkImage,
+    light: addArc200AssetLightImage,
+  }}
+/>
+
+The beauty of ARC-200 is that it is _free_ to opt-in, yes that is right, ARC-200 does not require a fee to opt-in!
+
+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"
+  maxWidth="400px"
+  imageSources={{
+    dark: arc200SupportDarkImage,
+    light: arc200SupportLightImage,
+  }}
+/>
+
+To learn more about ARC-200, make sure you check out the specification [here](https://arc.algorand.foundation/ARCs/arc-0200).
+
+### Standard Asset Opt-in
+
+Although there is a lot of talk about ARC-200, let us not forget one of the most powerful features of the AVM: Standard Assets. These assets are baked into the very heart of the AVM protocol and are a feature that makes AVM chains the best in class.
+
+The new version of Kibisis allows you to opt-in to standard assets, using an opt-in transaction, which, at the time of writing will cost you 0.01; the standard fee amount.
+
+<!-- just give a bulleted list of fixes, or omit if no fixes with in the release -->
+## Fixes
+
+* The amount field on the sending asset screen now correctly handles decimals.
+* The send asset screen no longer shows a blank screen when coming from the settings page.
+* Minor fixes.
+
+## 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} 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} target="_blank">here</a>.

src/components/BlogScreenshotImage/BlogScreenshotImage.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { FC } from 'react';
 
 // components
@@ -21,16 +22,20 @@ const BlogScreenshotImage: FC<IProps> = ({
   imageSources,
 }: IProps) => {
   return (
-    <div className={styles.container}>
-      <ThemedImage
-        alt={label}
-        aria-label={label}
-        className={styles.image}
-        sources={imageSources}
+    <div className={clsx(styles.container, styles.container__outer)}>
+      <div
+        className={styles.container}
         style={{
           maxWidth,
         }}
-      />
+      >
+        <ThemedImage
+          alt={label}
+          aria-label={label}
+          className={styles.image}
+          sources={imageSources}
+        />
+      </div>
     </div>
   );
 };

src/components/BlogScreenshotImage/styles.module.scss

@@ -2,11 +2,14 @@
 
 .container {
   display: flex;
-  justify-content: center;
-  padding: 1rem 0;
-  width: 100%;
+
+  &__outer {
+    padding: 2rem 1rem;
+    justify-content: center;
+  }
 }
 
 .image {
   box-shadow: $screen-box-shadow;
+  width: 100%;
 }

src/constants/Links.ts

@@ -1,2 +1,11 @@
+export const AGORA_LABS_LINK: string = 'https://agoralabs.sh';
 export const CHROME_STORE_LINK: string =
   'https://chromewebstore.google.com/detail/kibisis/hcgejekffjilpgbommjoklpneekbkajb';
+export const GITHUB_LINK: string =
+  'https://github.com/agoralabs-sh/kibisis-web-extension';
+export const KIBISIS_LINK: string = 'https://kibis.is';
+export const REPORT_A_BUG_LINK: string =
+  'https://github.com/agoralabs-sh/kibisis-web-extension/issues/new?assignees=kieranroneill&labels=%F0%9F%90%9B+bug&projects=&template=bug_report_template.yml&title=%5BBug%5D%3A+';
+export const SUGGEST_A_FEATURE_LINK: string =
+  'https://github.com/agoralabs-sh/kibisis-web-extension/issues/new?assignees=&labels=%E2%9C%A8+feature&projects=&template=feature_request_template.yml&title=%5BFeature%5D%3A+';
+export const X_LINK: string = 'https://x.com/kibisis_wallet';