diff --git a/web/docs/docs/components-overview.md b/web/docs/docs/components-overview.md index 2fc85a035..b19f09199 100644 --- a/web/docs/docs/components-overview.md +++ b/web/docs/docs/components-overview.md @@ -1,7 +1,17 @@ --- id: components-overview title: Cashtab Components sidebar_label: Overview --- `cashtab-components` is an npm library for adding cash payments to your website. + +## Getting started + +Install [cashtab-components](https://www.npmjs.com/package/cashtab-components) into your react-app + +`npm install cashtab-components` + +## Storybook library + +Browse the [storybook library](https://laughing-villani-8cfcaf.netlify.app/?path=/story/cashtabbadge--standard) to see how the components look and behave in a webpage or react app. diff --git a/web/docs/docs/extension-overview.md b/web/docs/docs/extension-overview.md index 1f3668d85..b3a7a9af5 100644 --- a/web/docs/docs/extension-overview.md +++ b/web/docs/docs/extension-overview.md @@ -1,9 +1,13 @@ --- id: extension-overview title: Cashtab Extension sidebar_label: Overview --- -Cashtab is also available as a browser extension for Google Chrome and Brave. +Cashtab is available as a browser extension for Google Chrome and Brave. Get it [here](https://chrome.google.com/webstore/detail/cashtab/obldfcmebhllhjlhjbnghaipekcppeag). -https://chrome.google.com/webstore/detail/cashtab/obldfcmebhllhjlhjbnghaipekcppeag +## General + +Basic functionality is identical to [the Cashtab webapp.](overview.mdx) + +Web pages that integrate with Cashtab can open your Cashtab extension and ask for your confirmation to complete a transaction. diff --git a/web/docs/docs/overview.md b/web/docs/docs/overview.md deleted file mode 100644 index 8449b7023..000000000 --- a/web/docs/docs/overview.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -id: cashtab-overview -title: Cashtab -sidebar_label: Overview -slug: / ---- - -Cashtab is a BCHA web wallet available at https://cashtabapp.com/ diff --git a/web/docs/docs/overview.mdx b/web/docs/docs/overview.mdx new file mode 100644 index 000000000..ee002fa34 --- /dev/null +++ b/web/docs/docs/overview.mdx @@ -0,0 +1,171 @@ +--- +id: cashtab-overview +title: Cashtab +sidebar_label: Overview +slug: / +--- + +import useBaseUrl from '@docusaurus/useBaseUrl'; + +Cashtab is a BCHA web wallet available at https://cashtabapp.com/ + +# Getting Started + +## Use Cashtab as a mobile app + +1. Navigate to https://cashtabapp.com/ in your web browser on your mobile device + +:::note +If you are using an iPhone, Cashtab works best in the Safari browser. +::: + +2. Click the "Add Cashtab to Homescreen" prompt at the bottom of your screen. + +Add Cashtab to Homescreen + +3. Cashtab will appear as a mobile app icon on your phone's desktop. + +## Create your first wallet + +1. Navigate to https://cashtabapp.com/ on your desktop or mobile device. + +2. Click or tap the "New Wallet" button. + +Create your first wallet + +3. Click or tap the "Okay, make me a wallet!" button to create your first wallet. + +Confirm wallet creation + +4. Your wallet is ready to use! + +New wallet no balance + +## Back up your wallet + +1. Click or tap the "Settings" icon at the bottom right of your screen to navigate to the "Settings" screen. + +Settings + +2. Click or tap the "Click to reveal seed phrase" button to display your 12-word seed phrase. + +3. Write down your seed phrase using pen and paper and store in a safe place. If you lose your device, you can recover your wallet with this seed phrase. + +:::caution +Treat this seed phrase like cash. If you have $100 in your Cashtab wallet, this seed phrase is effectively a $100 bill. +::: + +## Receive Cash + +1. Copy your BCHA address by clicking or tapping the QR code on your home screen. + +Copied cash address + +2. Send yourself some BCHA using another wallet, or have a friend send you some BCHA. + +3. When your Cashtab wallet receives BCHA, your balance will update and a notification will appear at the top of your screen. + +Received cash + +## Send Cash + +1. Click or tap the "Send" button at the bottom center of your screen to navigate to the "Send" screen. + +Send screen with balance + +2. Enter the address where you would like to send BCHA into the top input field labeled "BCHA Address." You may do this by copy pasting an address into the field, or by scanning a QR code. To scan a QR code, click or tap the "QR Code Scan" icon at the right of the "BCHA Address" field to use your phone camera or webcam to scan the QR code of a receiving address. + +:::info +On Apple mobile devices, only the Safari browser supports scanning QR codes. +::: + +3. Enter the USD or BCHA amount you would like to send in the "Amount" field. To send the full contents of your wallet, click the "max" button at the far right of the "Amount" field. + +:::info +Due to transaction fees, the full amount you are able to send is slightly less than your total balance. +::: + +4. Click "Send" to send cash. + + +## Receive Tokens + +1. Copy your token address by clicking or tapping the green SLPA button on your home screen, then clicking or tapping the QR code. + +Copied token address + +2. Send yourself a token using another wallet, or have a friend send you some tokens. + +3. When your Cashtab wallet receives an SLPA token, it will appear on your Wallet screen below your address QR code. + +Token balance + +## Send Tokens + +:::info +In order to send tokens, your wallet must have a BCHA balance. +::: + +1. Click or tap the token you would like to send. Your tokens are listed in tiles below your address on the "Wallet" screen. + +Token balance + +Send token screen + +2. Enter the token address where you would like to send your token into the top input field labeled "SLPA Address." You may do this by copy pasting an address into the field, or by scanning a QR code. To scan a QR code, click or tap the "QR Code Scan" icon at the right of the "SLPA Address" field to use your phone camera or webcam to scan the QR code of a receiving address. + +:::info +On Apple mobile devices, only the Safari browser supports scanning QR codes. +::: + +3. Enter the token quantity you would like to send in the "Amount" field. To send the full contents of your wallet, click the "max" button at the far right of the "Amount" field. + +4. Click the orange "Send ``" button to send your token. + +## Add a new wallet + +1. Click or tap the "Settings" icon at the bottom right of your screen to navigate to the "Settings" screen. + +Settings screen collapsed + +2. Click the orange "New Wallet" button. + +3. Your new wallet will be added to the end of your "Saved wallets." Click the "Saved wallets" button, then click "Activate" next to the wallet to begin using your new wallet. + +## Import wallet + +If you have already created a Cashtab wallet on one device, you can use your seed phrase to import this wallet to any other device. + +1. Click or tap the "Settings" icon at the bottom right of your screen to navigate to the "Settings" screen. + +Settings screen collapsed + +2. Click the grey "Import Wallet" button. A text field labeled "mnemonic (seed phrase) is revealed. + +3. Type or copy paste your 12-word seed phrase into the text field and click the "Import" button. + +:::note +Cashtab currently only supports importing Cashtab wallets with 12-word seeds. +::: + +:::caution +If you import a wallet that was not created with Cashtab, Cashtab may not properly load the balance or transaction history for this wallet. +::: + +4. Your wallet will be added to the end of your Saved Wallets list. To activate the imported wallet, click the "Activate" button next to your imported wallet. + +## Manage your wallets + +1. Click the "Saved wallets" button to reveal your list of wallets. + +Saved wallets list expanded + +2. You can rename, delete, or activate your wallets by clicking the appropriate button next to your wallet in the "Saved wallets" list. + +:::note +Only one wallet at a time is active in Cashtab. To view the seed phrase of a saved wallet, activate the wallet and then click "Reveal seed phrase" on the "Settings" screen. +::: + +:::danger +Make sure to back up your wallet before deleting it. If you delete a wallet and do not have its seed phrase, there is no way to recover the wallet. +::: \ No newline at end of file diff --git a/web/docs/docusaurus.config.js b/web/docs/docusaurus.config.js index 91d588827..905f3146d 100644 --- a/web/docs/docusaurus.config.js +++ b/web/docs/docusaurus.config.js @@ -1,84 +1,85 @@ module.exports = { title: 'Build on BCHA', tagline: 'Add cash payments to your website', url: 'https://bitcoinabc.org/bcha', baseUrl: '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.ico', organizationName: 'bitcoin-abc', projectName: 'cashtab', themeConfig: { navbar: { title: 'Cashtab', logo: { alt: 'Cashtab Logo', src: 'img/logo.svg', }, items: [ { to: 'docs/', activeBasePath: 'docs', label: 'Docs', position: 'left', }, { - href: 'https://github.com/bitcoin-abc/bitcoin-abc', + href: 'https://github.com/bitcoin-abc/bitcoin-abc/', label: 'GitHub', position: 'right', }, ], }, footer: { style: 'dark', links: [ { title: 'Docs', items: [ { label: 'Overview', to: 'docs/', }, { label: 'cashtab-components', to: 'docs/components-overview/', }, ], }, { title: 'Community', items: [ { label: 'Twitter', href: 'https://twitter.com/Bitcoin_ABC', }, ], }, { title: 'More', items: [ { label: 'BCHA', - href: 'https://bitcoinabc.org/BCHA', + href: 'https://bitcoinabc.org/bcha/', }, ], }, ], copyright: `Copyright © ${new Date().getFullYear()} Bitcoin ABC.`, }, }, presets: [ [ '@docusaurus/preset-classic', { docs: { sidebarPath: require.resolve('./sidebars.js'), - editUrl: 'https://github.com/bitcoin-abc/bitcoin-abc/', + editUrl: + 'https://github.com/Bitcoin-ABC/bitcoin-abc/tree/master/web/docs/', }, theme: { customCss: require.resolve('./src/css/custom.css'), }, }, ], ], }; diff --git a/web/docs/src/common/Ticker.js b/web/docs/src/common/Ticker.js new file mode 100644 index 000000000..7e4fbc955 --- /dev/null +++ b/web/docs/src/common/Ticker.js @@ -0,0 +1,6 @@ +export const currency = { + name: 'Bitcoin ABC', + ticker: 'BCHA', + tokenName: 'Bitcoin ABC SLP', + tokenTicker: 'SLPA', +}; diff --git a/web/docs/src/pages/index.js b/web/docs/src/pages/index.js index 09626a10b..b2f492a84 100644 --- a/web/docs/src/pages/index.js +++ b/web/docs/src/pages/index.js @@ -1,100 +1,100 @@ import React from 'react'; import clsx from 'clsx'; import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; import styles from './styles.module.css'; const features = [ { title: 'Simple 😎', imageUrl: '', description: ( <> Cashtab's REST API and React components library do the heavy lifting, so you can focus on your app. ), }, { title: 'Portable 🛩', imageUrl: '', description: ( <> Cashtab is a mobile friendly web wallet that works on any device with a web browser. ), }, { title: 'Powerful 🚂', imageUrl: '', description: ( <>Instantly add in-browser cash payments to your website. ), }, ]; function Feature({ imageUrl, title, description }) { const imgUrl = useBaseUrl(imageUrl); return (
{imgUrl && (
{title}
)}

{title}

{description}

); } function Home() { const context = useDocusaurusContext(); const { siteConfig = {} } = context; return (

{siteConfig.title}

{siteConfig.tagline}

Get Started
{features && features.length > 0 && (
{features.map((props, idx) => ( ))}
)}
); } export default Home; diff --git a/web/docs/static/img/00_first_start_google-pixel5-sortasage-portrait.png b/web/docs/static/img/00_first_start_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..3e14fa79e Binary files /dev/null and b/web/docs/static/img/00_first_start_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/01_seed_alert_google-pixel5-sortasage-portrait.png b/web/docs/static/img/01_seed_alert_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..b2719cea1 Binary files /dev/null and b/web/docs/static/img/01_seed_alert_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/02_empty_wallet_google-pixel5-sortasage-portrait.png b/web/docs/static/img/02_empty_wallet_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..4383aaa23 Binary files /dev/null and b/web/docs/static/img/02_empty_wallet_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/03_01_balance_google-pixel5-sortasage-portrait.png b/web/docs/static/img/03_01_balance_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..773a958d4 Binary files /dev/null and b/web/docs/static/img/03_01_balance_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/04_send_screen_google-pixel5-sortasage-portrait.png b/web/docs/static/img/04_send_screen_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..bac8a4c7e Binary files /dev/null and b/web/docs/static/img/04_send_screen_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/05_pwa_dl_google-pixel5-sortasage-portrait.png b/web/docs/static/img/05_pwa_dl_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..5e74ed70f Binary files /dev/null and b/web/docs/static/img/05_pwa_dl_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/06_copy_cash_address_google-pixel5-sortasage-portrait.png b/web/docs/static/img/06_copy_cash_address_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..a318e495a Binary files /dev/null and b/web/docs/static/img/06_copy_cash_address_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/07_cash_received_google-pixel5-sortasage-portrait.png b/web/docs/static/img/07_cash_received_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..ec1e07c52 Binary files /dev/null and b/web/docs/static/img/07_cash_received_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/08_copy_token_address_google-pixel5-sortasage-portrait.png b/web/docs/static/img/08_copy_token_address_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..08bfb3adf Binary files /dev/null and b/web/docs/static/img/08_copy_token_address_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/09_token_received_google-pixel5-sortasage-portrait.png b/web/docs/static/img/09_token_received_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..ae9e10e73 Binary files /dev/null and b/web/docs/static/img/09_token_received_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/10_SendScreenWithBalance_google-pixel5-sortasage-portrait.png b/web/docs/static/img/10_SendScreenWithBalance_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..bac8a4c7e Binary files /dev/null and b/web/docs/static/img/10_SendScreenWithBalance_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/11_SettingsScreenCollapsed_google-pixel5-sortasage-portrait.png b/web/docs/static/img/11_SettingsScreenCollapsed_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..16504e5e1 Binary files /dev/null and b/web/docs/static/img/11_SettingsScreenCollapsed_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/12_SettingsScreen2Wallets_google-pixel5-sortasage-portrait.png b/web/docs/static/img/12_SettingsScreen2Wallets_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..cb87e8d32 Binary files /dev/null and b/web/docs/static/img/12_SettingsScreen2Wallets_google-pixel5-sortasage-portrait.png differ diff --git a/web/docs/static/img/13_SendTokenScreen_google-pixel5-sortasage-portrait.png b/web/docs/static/img/13_SendTokenScreen_google-pixel5-sortasage-portrait.png new file mode 100644 index 000000000..364f4c0d3 Binary files /dev/null and b/web/docs/static/img/13_SendTokenScreen_google-pixel5-sortasage-portrait.png differ