diff --git a/.github/workflows/pull_request_checks.yml b/.github/workflows/pull_request_checks.yml index 67f8b49..d66db82 100644 --- a/.github/workflows/pull_request_checks.yml +++ b/.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" diff --git a/docs/android/getting-started/images/allow_from_source.png b/docs/android/getting-started/images/allow_from_source.png new file mode 100644 index 0000000..056c2bd Binary files /dev/null and b/docs/android/getting-started/images/allow_from_source.png differ diff --git a/docs/android/getting-started/images/allow_unknown_sources-legacy.png b/docs/android/getting-started/images/allow_unknown_sources-legacy.png new file mode 100644 index 0000000..868b377 Binary files /dev/null and b/docs/android/getting-started/images/allow_unknown_sources-legacy.png differ diff --git a/docs/android/getting-started/images/install_from_source.png b/docs/android/getting-started/images/install_from_source.png new file mode 100644 index 0000000..106d607 Binary files /dev/null and b/docs/android/getting-started/images/install_from_source.png differ diff --git a/docs/android/getting-started/images/install_kibisis.png b/docs/android/getting-started/images/install_kibisis.png new file mode 100644 index 0000000..53a7f96 Binary files /dev/null and b/docs/android/getting-started/images/install_kibisis.png differ diff --git a/docs/android/getting-started/index.mdx b/docs/android/getting-started/index.mdx new file mode 100644 index 0000000..8a0eb46 --- /dev/null +++ b/docs/android/getting-started/index.mdx @@ -0,0 +1,145 @@ +# Getting Started + +import TOCInline from '@theme/TOCInline'; + + +import CenteredImage from '@site/src/components/CenteredImage'; + + +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'; + + + +## 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: + + + +3. Pressing the "Settings" button will take you to the app's settings where you can choose to "Allow from this source": + + + +4. Toggling the "Allow from this source" will then open a modal that will allow you to install Kibisis: + + + +:::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: + + + +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: +Signer #1 certificate SHA-1 digest: +Signer #1 certificate MD5 digest: +``` + +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. diff --git a/docs/android/index.mdx b/docs/android/index.mdx new file mode 100644 index 0000000..caa1930 --- /dev/null +++ b/docs/android/index.mdx @@ -0,0 +1,19 @@ +# Android + +import TOCInline from '@theme/TOCInline'; + + + +## 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. diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md deleted file mode 100644 index aa6fd49..0000000 --- a/docs/getting-started/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Getting Started - -* [Manual Installation](getting-started/manual-installation) diff --git a/docs/ios/index.md b/docs/ios/index.md new file mode 100644 index 0000000..46d7fb4 --- /dev/null +++ b/docs/ios/index.md @@ -0,0 +1,3 @@ +# iOS + +Coming Soon... diff --git a/docs/overview.mdx b/docs/overview.mdx index 75c1c24..d7abd34 100644 --- a/docs/overview.mdx +++ b/docs/overview.mdx @@ -2,10 +2,10 @@ sidebar_position: 1 --- -import TOCInline from '@theme/TOCInline'; - # Overview +import TOCInline from '@theme/TOCInline'; + -import CenteredImage from '@site/src/components/CenteredImage' +import CenteredImage from '@site/src/components/CenteredImage'; 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`. diff --git a/docs/web-extension/index.md b/docs/web-extension/index.md new file mode 100644 index 0000000..2a2bebe --- /dev/null +++ b/docs/web-extension/index.md @@ -0,0 +1 @@ +# Web Extension diff --git a/i18n/en/code.json b/i18n/en/code.json index 87eb0a0..2bfe946 100644 --- a/i18n/en/code.json +++ b/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.", diff --git a/src/components/CenteredImage/CenteredImage.tsx b/src/components/CenteredImage/CenteredImage.tsx index a8299ac..96c9883 100644 --- a/src/components/CenteredImage/CenteredImage.tsx +++ b/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'; diff --git a/src/components/DownloadSection/DownloadSection.tsx b/src/components/DownloadSection/DownloadSection.tsx index 907531c..0b441d8 100644 --- a/src/components/DownloadSection/DownloadSection.tsx +++ b/src/components/DownloadSection/DownloadSection.tsx @@ -2,7 +2,9 @@ import { Heading, HStack, Image, + Link, Stack, + Text, VStack, Wrap, WrapItem, @@ -22,7 +24,11 @@ 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'; @@ -30,6 +36,7 @@ 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 = ({ variant }) => { // hooks const defaultTextColor = useDefaultTextColor(); const desktopAndUp = useDesktopAndUp(); + const primaryColor = usePrimaryColor(); // states const [index, setIndex] = useState(0); @@ -73,6 +81,7 @@ const DownloadSection: FC = ({ variant }) => { @@ -131,6 +140,7 @@ const DownloadSection: FC = ({ variant }) => { ), title: 'Web', }, + // android { content: ( @@ -179,16 +189,36 @@ const DownloadSection: FC = ({ variant }) => { + + + {translate( + { + id: 'caption.troubleInstalling', + }, + { + link: ( + + {translate({ id: 'caption.here' })} + + ), + } + )} + ), title: 'Android', }, + // ios { content: ( diff --git a/src/components/StoreBadge/StoreBadge.tsx b/src/components/StoreBadge/StoreBadge.tsx index 2ce4494..561d0dd 100644 --- a/src/components/StoreBadge/StoreBadge.tsx +++ b/src/components/StoreBadge/StoreBadge.tsx @@ -1,4 +1,5 @@ import { Box, Image, Link, Tooltip } from '@chakra-ui/react'; +import clsx from 'clsx'; import type { FC } from 'react'; // styles @@ -7,7 +8,7 @@ import styles from './styles.module.scss'; // types import type { IProps } from './types'; -const StoreBadge: FC = ({ airaLabel, href, src }) => { +const StoreBadge: FC = ({ airaLabel, href, src, type }) => { // misc const image = ( {airaLabel} @@ -19,8 +20,9 @@ const StoreBadge: FC = ({ airaLabel, href, src }) => { {image} -
- {`coming soon`.toUpperCase()} + {/*ribbon*/} +
+ {`coming soon`.toUpperCase()}
@@ -28,8 +30,21 @@ const StoreBadge: FC = ({ airaLabel, href, src }) => { } return ( - + {image} + + {type === 'beta' && ( +
+ + {`beta`.toUpperCase()} + +
+ )} ); }; diff --git a/src/components/StoreBadge/styles.module.scss b/src/components/StoreBadge/styles.module.scss index 87750ca..6e24c0a 100644 --- a/src/components/StoreBadge/styles.module.scss +++ b/src/components/StoreBadge/styles.module.scss @@ -1,53 +1,72 @@ +$red-000: #F70505; +$red-100: #8F0808; +$blue-100: #43b0f1; +$blue-000: #057dcd; + .ribbon { + -webkit-transform: rotate(45deg); + background: #79A70A; + background: linear-gradient($red-000 0%, $red-100 100%); + box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); + color: #FFF; + display: block; + font-size: 10px; + font-weight: bold; + line-height: 20px; position: absolute; - height: 75px; - overflow: hidden; - right: -5px; - text-align: right; - top: -5px; - width: 75px; - z-index: 1; + right: -21px; + text-align: center; + text-transform: uppercase; + top: 19px; + transform: rotate(45deg); + width: 100px; - span { - -webkit-transform: rotate(45deg); - background: #79A70A; - background: linear-gradient(#F70505 0%, #8F0808 100%); - box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); - color: #FFF; - display: block; - font-size: 10px; - font-weight: bold; - line-height: 20px; + &::before { + border-left: 3px solid $red-100; + border-right: 3px solid transparent; + border-bottom: 3px solid transparent; + border-top: 3px solid $red-100; + content: ""; position: absolute; - right: -21px; - text-align: center; - text-transform: uppercase; - top: 19px; - transform: rotate(45deg); - width: 100px; + left: 0; + top: 100%; + z-index: -1; + } + + &::after { + border-left: 3px solid transparent; + border-right: 3px solid $red-100; + border-bottom: 3px solid transparent; + border-top: 3px solid $red-100; + content: ""; + position: absolute; + right: 0; + top: 100%; + z-index: -1; + } + + &__container { + position: absolute; + height: 75px; + overflow: hidden; + right: -5px; + text-align: right; + top: -5px; + width: 75px; + z-index: 1; + } + + &--blue { + background: linear-gradient($blue-000 0%, $blue-100 100%); &::before { - border-left: 3px solid #8F0808; - border-right: 3px solid transparent; - border-bottom: 3px solid transparent; - border-top: 3px solid #8F0808; - content: ""; - position: absolute; - left: 0; - top: 100%; - z-index: -1; + border-left: 3px solid $blue-100; + border-top: 3px solid $blue-100; } &::after { - border-left: 3px solid transparent; - border-right: 3px solid #8F0808; - border-bottom: 3px solid transparent; - border-top: 3px solid #8F0808; - content: ""; - position: absolute; - right: 0; - top: 100%; - z-index: -1; + border-right: 3px solid $blue-100; + border-top: 3px solid $blue-100; } } } diff --git a/src/components/StoreBadge/types/IProps.ts b/src/components/StoreBadge/types/IProps.ts index bd404c3..7461628 100644 --- a/src/components/StoreBadge/types/IProps.ts +++ b/src/components/StoreBadge/types/IProps.ts @@ -2,6 +2,7 @@ interface IProps { airaLabel: string; href?: string; src: string; + type?: 'beta'; } export default IProps; diff --git a/src/constants/Links.ts b/src/constants/Links.ts index 9e314af..a771168 100644 --- a/src/constants/Links.ts +++ b/src/constants/Links.ts @@ -1,14 +1,15 @@ -export const AGORA_LABS_LINK: string = 'https://agoralabs.sh'; -export const CHROME_STORE_LINK: string = +export const AGORA_LABS_LINK = 'https://agoralabs.sh'; +export const APK_DIRECT_DOWNLOAD_LINK = + 'https://github.com/kibis-is/mobile-app/releases/latest/download/kibisis_release.apk'; +export const CHROME_STORE_LINK = 'https://chromewebstore.google.com/detail/kibisis/hcgejekffjilpgbommjoklpneekbkajb'; -export const EDGE_STORE_LINK: string = +export const EDGE_STORE_LINK = 'https://microsoftedge.microsoft.com/addons/detail/kibisis/bajncpocmkioafbijldokfbjajelkbmc'; -export const FIREFOX_ADD_ON_LINK: string = - 'https://addons.mozilla.org/addon/kibisis/'; -export const GITHUB_LINK: string = 'https://github.com/kibis-is/web-extension'; -export const KIBISIS_LINK: string = 'https://kibis.is'; -export const REPORT_A_BUG_LINK: string = +export const FIREFOX_ADD_ON_LINK = 'https://addons.mozilla.org/addon/kibisis/'; +export const GITHUB_LINK = 'https://github.com/kibis-is/web-extension'; +export const KIBISIS_LINK = 'https://kibis.is'; +export const REPORT_A_BUG_LINK = 'https://github.com/kibis-is/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 = +export const SUGGEST_A_FEATURE_LINK = 'https://github.com/kibis-is/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'; +export const X_LINK = 'https://x.com/kibisis_wallet'; diff --git a/static/images/screens/android_screen-dark.png b/static/images/screens/android_screen-dark.png index 416763c..0249655 100644 Binary files a/static/images/screens/android_screen-dark.png and b/static/images/screens/android_screen-dark.png differ diff --git a/static/images/screens/android_screen-light.png b/static/images/screens/android_screen-light.png index 025e4fa..3afa23e 100644 Binary files a/static/images/screens/android_screen-light.png and b/static/images/screens/android_screen-light.png differ diff --git a/static/images/screens/ios_screen-dark.png b/static/images/screens/ios_screen-dark.png index 7df004a..52c195c 100644 Binary files a/static/images/screens/ios_screen-dark.png and b/static/images/screens/ios_screen-dark.png differ diff --git a/static/images/screens/ios_screen-light.png b/static/images/screens/ios_screen-light.png index b4d19ce..b079759 100644 Binary files a/static/images/screens/ios_screen-light.png and b/static/images/screens/ios_screen-light.png differ diff --git a/static/images/screens/web_screen-dark.png b/static/images/screens/web_screen-dark.png index 66da51a..beff077 100644 Binary files a/static/images/screens/web_screen-dark.png and b/static/images/screens/web_screen-dark.png differ diff --git a/static/images/screens/web_screen-light.png b/static/images/screens/web_screen-light.png index 8af983a..bffea2f 100644 Binary files a/static/images/screens/web_screen-light.png and b/static/images/screens/web_screen-light.png differ diff --git a/static/images/social_card.png b/static/images/social_card.png index 2f068bc..2716ac1 100644 Binary files a/static/images/social_card.png and b/static/images/social_card.png differ