feat: add apk release (#65)

* feat: add beta banner and download link to apk direct download

* feat: add new getting started entries for android

* perf: optimize android getting started images

* feat: optimize download sectiob screens and add instructions caption

* chore: squash

* refactor: replace social card

* ci: use latest pr title when validating in pr checks workflow

.github/workflows/pull_request_checks.yml

@@ -30,8 +30,20 @@ jobs:
         uses: actions/checkout@v4
       - name: "🔧 Setup"
         uses: ./.github/actions/use-dependencies
+      - name: "📥 Get PR Title"
+        id: get_pr_title
+        uses: actions/github-script@v7
+        with:
+          result-encoding: string
+          script: |
+            const { data } = await github.rest.pulls.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.payload.pull_request.number
+            });
+            return data.title;
       - name: "✅ Validate"
-        run: echo "${{ github.event.pull_request.title }}" | yarn commitlint
+        run: echo "${{ steps.get_pr_title.outputs.result }}" | yarn commitlint
 
   lint:
     name: "Lint"

docs/android/getting-started/index.mdx

@@ -0,0 +1,145 @@
+# Getting Started
+
+import TOCInline from '@theme/TOCInline';
+
+<!-- components -->
+import CenteredImage from '@site/src/components/CenteredImage';
+
+<!-- images -->
+import allowFromSourceImage from './images/allow_from_source.png';
+import allowUnknownSourcesImage from './images/allow_unknown_sources-legacy.png';
+import installFromSourceImage from './images/install_from_source.png';
+import installKibisisImage from './images/install_kibisis.png';
+
+<TOCInline
+  maxHeadingLevel={4}
+  toc={toc}
+/>
+
+## Overview
+
+Android is an open source operating system created by Google and, much like Apple's iOS, revolutionized how we interact with devices. However, unlike iOS, with Android being open source, this allowed developers to create their own "flavors" of Android.
+
+Android is a natural choice for Kibisis, as Android, much like Kibisis, is committed to FOSS (Free and Open Source Software).
+
+:::caution
+
+Please be aware that Kibisis Android is currently in beta and so there will most likely be bugs and missing features before we launch a full release. Furthermore, we will often be releasing which will mean there will be breaking changes, this could include irrecoverable accounts/private keys so if you add/create an account please ensure that you back up your seed phrase.
+
+:::
+
+## Play Store
+
+The majority of Android apps are installed via Google's Play Store.
+
+### Installation
+
+1. You will need to join the open testing program:
+   1. If you're on an Android device, go to: [https://play.google.com/store/apps/details?id=is.kibis.kibisis](https://play.google.com/store/apps/details?id=is.kibis.kibisis)
+   2. If you're in your browser, go to: [https://play.google.com/apps/testing/is.kibis.kibisis](https://play.google.com/apps/testing/is.kibis.kibisis)
+
+2. Follow the on-screen instructions and install Kibisis on your device.
+
+## F-Droid
+
+F-Droid is an open source alternative app store that allows users to download apps that are more aligned to features that focus on privacy and FOSS.
+
+:::note
+
+We currently do not have an app in the F-Droid store, but we are working hard to make it available.
+
+:::
+
+## APK Direct Download
+
+For those that do not use an app store to download apps, and opt to install apps manually, Kibisis offers the option to download and install an APK directly.
+
+:::caution
+
+Direct downloads of the APK is **NOT RECOMMENDED** for most Android users. Please ensure that you verify the APK is signed by the below [signature](#verify-the-apk-optional). Also note that the key used to sign the Google Play Store app is different to the key used to sign the direct download APK.
+
+The Google Play Store signing key is maintained by Google.
+
+:::
+
+By default, Android does not allow you to install an APK from outside the Play Store, and there are a few fairly simple steps involved to get your device set up, depending on your version of Android.
+
+### Installation (Android 8+)
+
+1. From you Android device's browser, download the latest APK from [here](https://github.com/kibis-is/mobile-app/releases/latest/download/kibisis_release.apk).
+
+2. When installing an app from another app (such as a Chrome browser), you will be asked to allow unknown apps to be installed:
+
+<CenteredImage
+  label="A screenshot on an Android device showing a warning message to allow apps to be installed from source"
+  maxWidth="400px"
+  src={installFromSourceImage}
+/>
+
+3. Pressing the "Settings" button will take you to the app's settings where you can choose to "Allow from this source":
+
+<CenteredImage
+  label="A screenshot on an Android device showing the option to allow apps to be installed from the source (Chrome)"
+  maxWidth="400px"
+  src={allowFromSourceImage}
+/>
+
+4. Toggling the "Allow from this source" will then open a modal that will allow you to install Kibisis:
+
+<CenteredImage
+  label="A screenshot on an Android device showing the option to install Kibisis"
+  maxWidth="400px"
+  src={installKibisisImage}
+/>
+
+:::note
+
+You may be asked to scan the app using Google's Play Protect.
+
+:::
+
+### Installation (Before Android 8+)
+
+1. First, you will need to navigate to **Settings** > **Security** and ensure the "Unknown Sources" option is enabled:
+
+<CenteredImage
+  label="A screenshot on an Android device showing the unknown sources option enabled"
+  maxWidth="400px"
+  src={allowUnknownSourcesImage}
+/>
+
+2. From your Android device's browser, download and install the latest APK from [here](https://github.com/kibis-is/mobile-app/releases/latest/download/kibisis_release.apk).
+
+### Verify The APK (optional)
+
+The direct download APK is signed by our own signing key, and you can verify that the APK was signed with the correct key by using [`apksigner`](https://developer.android.com/tools/apksigner)'s [`verify`](https://developer.android.com/tools/apksigner#options-verify) command.
+
+From your terminal, run this command:
+```shell
+apksigner verify --print-certs kibisis_release.apk
+```
+
+This should output:
+```shell
+Signer #1 certificate DN: CN=Unknown, OU=Unknown, O=Kibisis, L=Unknown, ST=Unknown, C=Unknown
+Signer #1 certificate SHA-256 digest: <hex encoded hash>
+Signer #1 certificate SHA-1 digest: <hex encoded hash>
+Signer #1 certificate MD5 digest: <hex encoded hash>
+```
+
+Make sure the above hashes match the following:
+
+| Type    | Value                                                                                             |
+|:--------|:--------------------------------------------------------------------------------------------------|
+| SHA-1   | `6C:95:E9:ED:0D:C9:9B:02:B4:0E:86:B0:DD:DA:1C:47:0D:7D:EF:73`                                     |
+| SHA-256 | `BB:96:6B:02:D9:45:9A:D5:4D:95:A1:19:F7:DE:C8:D2:94:37:BB:12:7E:E4:58:4F:ED:86:42:45:80:4D:46:EC` |
+
+### Updating The APK
+
+A major drawback for not using an app store is updates will need to be maintained manually.
+
+To update Kibisis, you will simply need to download the latest APK.
+
+### Releases
+
+We maintain a list of releases through our GitHub page. If you would like to install a previous release, or you would like to get your hands on the pre-release versions, check out our [releases](https://github.com/kibis-is/mobile-app/releases) page.

docs/android/index.mdx

@@ -0,0 +1,19 @@
+# Android
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline
+  maxHeadingLevel={4}
+  toc={toc}
+/>
+
+## Overview
+
+We are pleased to announce that Kibisis is available on Android!
+
+This is a major milestone for Kibisis and ensures Kibisis can reach many more people. We understand that the need to branch out from an extension is essential for the growth of Kibisis.
+
+
+## Getting Started
+
+For more information on how to get started, please refer to the [getting started](./getting-started) guide on how to install Kibisis on your Android device.

docs/ios/index.md

@@ -0,0 +1,3 @@
+# iOS
+
+Coming Soon...

docs/overview.mdx

@@ -2,10 +2,10 @@
 sidebar_position: 1
 ---
 
-import TOCInline from '@theme/TOCInline';
-
 # Overview
 
+import TOCInline from '@theme/TOCInline';
+
 <TOCInline
   maxHeadingLevel={4}
   toc={toc}

docs/web-extension/getting-started/index.md

@@ -0,0 +1,3 @@
+# Getting Started
+
+* [Manual Installation](./manual-installation)

docs/getting-started/manual-installation.mdx → docs/web-extension/getting-started/manual-installation.mdx

@@ -3,7 +3,7 @@
 import TOCInline from '@theme/TOCInline';
 
 <!-- components -->
-import CenteredImage from '@site/src/components/CenteredImage'
+import CenteredImage from '@site/src/components/CenteredImage';
 
 <!-- images -->
 import chromeManualInstallation001 from './images/chrome_manual_installation_001.png';
@@ -22,7 +22,7 @@ import manualInstallation001 from './images/manual_installation_001.png';
 
 If you want to avoid the browser store, or you want to get the latest release, you can install Kibisis via a zip file.
 
-## For Chrome/Chromium
+## Chrome/Chromium
 
 1. Go to https://github.com/kibis-is/web-extension/releases/latest and download the latest release and select the zip file for Chrome: `kibisis-chrome-x.x.x.zip`.
 
@@ -72,7 +72,7 @@ If you would like to try a pre-release version, the cutting edge version, go to
 
 6. After loading the Kibisis extension, you should be good to go. Click on the extension icon to get started!
 
-## For Firefox
+## Firefox
 
 1. Go to https://github.com/kibis-is/web-extension/releases/latest and download the latest release and select the zip file for Chrome: `kibisis-firefox-x.x.x.zip`.
 

docs/web-extension/index.md

@@ -0,0 +1 @@
+# Web Extension

i18n/en/code.json

@@ -315,12 +315,18 @@
     "message": "Kibisis is more than just a wallet. It is your gateway to a secure and self-custodial lifestyle.",
     "description": "The caption that appears in the hero section."
   },
+  "caption.here": {
+    "message": "here"
+  },
   "caption.imageBy": {
     "message": "Image by"
   },
   "caption.storysetAttribution": {
     "message": "{type} illustrations by Storyset"
   },
+  "caption.troubleInstalling": {
+    "message": "Trouble installing? See {link} for instructions on how to get started."
+  },
 
   "feature.assets.description1": {
     "message": "Kibisis supports a wide range of asset types and we believe accessing your assets should not be difficult. That is why Kibisis endeavors to make this process a rich and rewarding experience.",

src/components/CenteredImage/CenteredImage.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import clsx from 'clsx';
+import { type FC } from 'react';
 
 // styles
 import styles from './styles.module.scss';
-import clsx from 'clsx';
 
 // types
 import type { IProps } from './types';

src/components/DownloadSection/DownloadSection.tsx

@@ -2,7 +2,9 @@ import {
   Heading,
   HStack,
   Image,
+  Link,
   Stack,
+  Text,
   VStack,
   Wrap,
   WrapItem,
@@ -22,14 +24,19 @@ import StoreBadge from '@site/src/components/StoreBadge';
 import WebDownloadItem from '@site/src/components/WebDownloadItem';
 
 // constants
-import { CHROME_STORE_LINK, DEFAULT_GAP } from '@site/src/constants';
+import {
+  APK_DIRECT_DOWNLOAD_LINK,
+  CHROME_STORE_LINK,
+  DEFAULT_GAP,
+} from '@site/src/constants';
 
 // enums
 import { PlatformEnum } from '@site/src/enums';
 
 // hooks
 import useDefaultTextColor from '@site/src/hooks/useDefaultTextColor';
 import useDesktopAndUp from '@site/src/hooks/useDesktopAndUp';
+import usePrimaryColor from '@site/src/hooks/usePrimaryColor';
 
 // types
 import type { IDefaultSectionProps } from '@site/src/types';
@@ -42,6 +49,7 @@ const DownloadSection: FC<IDefaultSectionProps> = ({ variant }) => {
   // hooks
   const defaultTextColor = useDefaultTextColor();
   const desktopAndUp = useDesktopAndUp();
+  const primaryColor = usePrimaryColor();
   // states
   const [index, setIndex] = useState<number>(0);
 
@@ -73,6 +81,7 @@ const DownloadSection: FC<IDefaultSectionProps> = ({ variant }) => {
       <PillTabs
         defaultIndex={index}
         tabs={[
+          // web
           {
             content: (
               <HStack justify="space-evenly" spacing={DEFAULT_GAP * 2} w="full">
@@ -131,6 +140,7 @@ const DownloadSection: FC<IDefaultSectionProps> = ({ variant }) => {
             ),
             title: 'Web',
           },
+          // android
           {
             content: (
               <HStack justify="space-evenly" spacing={DEFAULT_GAP} w="full">
@@ -179,16 +189,36 @@ const DownloadSection: FC<IDefaultSectionProps> = ({ variant }) => {
                     <WrapItem>
                       <StoreBadge
                         airaLabel="Direct download badge"
-                        href=""
+                        href={APK_DIRECT_DOWNLOAD_LINK}
                         src="/images/store_badges/apk_badge.png"
+                        type="beta"
                       />
                     </WrapItem>
                   </Wrap>
+
+                  <Text color={defaultTextColor} textAlign="center" w="full">
+                    {translate(
+                      {
+                        id: 'caption.troubleInstalling',
+                      },
+                      {
+                        link: (
+                          <Link
+                            color={primaryColor}
+                            href="/android/getting-started"
+                          >
+                            {translate({ id: 'caption.here' })}
+                          </Link>
+                        ),
+                      }
+                    )}
+                  </Text>
                 </VStack>
               </HStack>
             ),
             title: 'Android',
           },
+          // ios
           {
             content: (
               <HStack justify="space-evenly" spacing={DEFAULT_GAP - 2} w="full">