Merge pull request #296 from bob-collective/derrek/docs-bob-pay

Add BOB Pay page and assets
bob-collective · Jul 24, 2024 · 60358e9 · 60358e9
2 parents dfad85a + 3a07bd5
commit 60358e9
Show file tree

Hide file tree

Showing 18 changed files with 120 additions and 11 deletions.
diff --git a/docs/docs/learn/guides/bob-pay/1-log-in.png b/docs/docs/learn/guides/bob-pay/1-log-in.png
diff --git a/docs/docs/learn/guides/bob-pay/10-Receiver-verification-prompt.png b/docs/docs/learn/guides/bob-pay/10-Receiver-verification-prompt.png
diff --git a/docs/docs/learn/guides/bob-pay/12-Receiver-after-sign-in.png b/docs/docs/learn/guides/bob-pay/12-Receiver-after-sign-in.png
diff --git a/docs/docs/learn/guides/bob-pay/13-How-to-Receive.png b/docs/docs/learn/guides/bob-pay/13-How-to-Receive.png
diff --git a/docs/docs/learn/guides/bob-pay/14-Receiver-sends-back.png b/docs/docs/learn/guides/bob-pay/14-Receiver-sends-back.png
diff --git a/docs/docs/learn/guides/bob-pay/15-sign-in-browser.png b/docs/docs/learn/guides/bob-pay/15-sign-in-browser.png
diff --git a/docs/docs/learn/guides/bob-pay/16-success-without-gas.png b/docs/docs/learn/guides/bob-pay/16-success-without-gas.png
diff --git a/docs/docs/learn/guides/bob-pay/3-sign-in.png b/docs/docs/learn/guides/bob-pay/3-sign-in.png
diff --git a/docs/docs/learn/guides/bob-pay/6-after-sign-in.png b/docs/docs/learn/guides/bob-pay/6-after-sign-in.png
diff --git a/docs/docs/learn/guides/bob-pay/7a-Send-empty.png b/docs/docs/learn/guides/bob-pay/7a-Send-empty.png
diff --git a/docs/docs/learn/guides/bob-pay/7b-Send-filled-out.png b/docs/docs/learn/guides/bob-pay/7b-Send-filled-out.png
diff --git a/docs/docs/learn/guides/bob-pay/8-Send-success-toast.png b/docs/docs/learn/guides/bob-pay/8-Send-success-toast.png
diff --git a/docs/docs/learn/guides/bob-pay/9-Receiver-log-in.png b/docs/docs/learn/guides/bob-pay/9-Receiver-log-in.png
diff --git a/docs/docs/learn/guides/bob-pay/_category_.yml b/docs/docs/learn/guides/bob-pay/_category_.yml
@@ -0,0 +1,3 @@
+position: 5
+collapsible: true
+collapsed: true
diff --git a/docs/docs/learn/guides/bob-pay/bob-pay.md b/docs/docs/learn/guides/bob-pay/bob-pay.md
@@ -0,0 +1,106 @@
+# BOB Pay
+
+## What is BOB Pay?
+
+[BOB Pay](https://bob-pay.gobob.xyz/) aims to showcase how easy crypto UX can be by focusing on a simple use case popular within the Bitcoin ecosystem: payments.
+
+With BOB Pay, you can send Bitcoin and stablecoins to someone's email address. No wallet, no app, no seed phrase - just simple, cheap, non-custodial, and lightning-fast payments. BOB Pay showcases the power of wallet abstraction with [Dynamic](https://www.dynamic.xyz/), smart accounts from [ZeroDev](https://zerodev.app/), and paymasters from [Pimlico](https://www.pimlico.io/).
+
+We’re offering projects on BOB free access to Dynamic and Pimlico if you’d like to do the same.
+
+## Video Tutorial
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/X7jqXHkOWUM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## High-Level Technical Summary
+
+1. Alice logs into [BOB Pay](https://pay.gobob.xyz) and sends WBTC to John's email address.
+2. [Dynamic generates](https://docs.dynamic.xyz/wallets/embedded-wallets/create-wallets/overview#during-signup-automatic) a deterministic [ZeroDev smart account wallet](https://docs.dynamic.xyz/account-abstraction/aa-providers/zerodev) for John on BOB.
+3. John claims their WBTC by [sending their first transaction](https://docs.dynamic.xyz/wallets/embedded-wallets/pregenerated-wallets#after-signup) to Charlie. The transaction fees are paid to a [Paymaster](https://docs.pimlico.io/infra/paymaster/erc20-paymaster) in WBTC so John can transact without holding any ETH.
+4. A [guarantor from Pimlico sponsors John's first transaction fees](https://docs.pimlico.io/infra/paymaster/erc20-paymaster/architecture#eoa-guarantor-signature), then claims back the funds after John's first transaction. This solves the problem of John needing ETH to approve the Paymaster's access to their WBTC.
+
+## Step-by-Step Guides
+
+### Sending Bitcoin from a wallet to an Email Address
+
+1. Open the [BOB Pay website](https://pay.gobob.xyz).
+
+2. Sign in with your wallet.
+
+![Log in screen](./1-log-in.png)
+
+3. Sign to prove you own your wallet. You can toggle this security step off if you like.
+
+![Sign in](./3-sign-in.png)
+
+4. Click Send.
+
+![Click send](./6-after-sign-in.png)
+
+5. Enter the email address and amount of Bitcoin to transfer, then click Send.
+
+![Enter information](./7b-Send-filled-out.png)
+
+6. After signing the transaction, the transfer is complete.
+
+![Success message](./8-Send-success-toast.png)
+
+### Sending Bitcoin from an Email Address to a Wallet
+
+1. Open the [BOB Pay website](https://pay.gobob.xyz).
+
+2. Enter your email address.
+
+![Log in with email](./9-Receiver-log-in.png)
+
+3. Enter the six-digit verification code sent to your email.
+
+![Verification code](./10-Receiver-verification-prompt.png)
+
+4. Click Send.
+
+![Click send](./12-Receiver-after-sign-in.png)
+
+5. Enter the recipient's wallet address and the amount of Bitcoin you would like to transfer, then click Send.
+
+![Enter information](./14-Receiver-sends-back.png)
+
+6. Click Sign.
+
+![Sign transaction](./15-sign-in-browser.png)
+
+7. The transfer is complete.
+
+![Success message](./16-success-without-gas.png)
+
+### Receiving Bitcoin or Stablecoins from Someone Else
+
+1. Open the [BOB Pay website](https://pay.gobob.xyz).
+
+2. Enter your email address and click Continue. You can also sign in with your wallet.
+
+![Log in with email](./9-Receiver-log-in.png)
+
+3. Enter the six-digit verification code sent to your email.
+
+![Verification code](./10-Receiver-verification-prompt.png)
+
+4. Click Receive.
+
+![Click receive](./12-Receiver-after-sign-in.png)
+
+5. Scan this QR code from the device that will send you tokens. This will open the BOB Pay website with your address already filled in for the sender. Alternatively, click Copy Address then send your address to the sender in a messaging app or email.
+
+![QR code](./13-How-to-Receive.png)
+
+6. The sender can follow the rest of the steps in [the guide above](#sending-bitcoin-from-a-wallet-to-an-email-address) to finish sending you tokens.
+
+## Conclusion
+
+BOB offers a complete package for builders looking to bring world-class UX to Bitcoin. We’re offering projects on BOB free access to Dynamic and Pimlico if you’d like to do the same.
+
+[Reach out to us](../../../learn/introduction/contribution.md) with questions, feedback, or ideas. We look forward to seeing what you Build on Bitcoin!
+
+## Code References
+
+- [BOB Pay](https://github.com/bob-collective/ui/pull/57/files) front-end and back-end code.
diff --git a/docs/docs/learn/guides/ethereum-bridge.md → ...ocs/learn/guides/ethereum-bridge/index.md b/docs/docs/learn/guides/ethereum-bridge.md → ...ocs/learn/guides/ethereum-bridge/index.md
@@ -13,42 +13,42 @@ The [BOB Bridge](https://app.gobob.xyz/bridge) allows you to move ETH between Et
 
 2. Click `Connect Wallet` in the top-right corner.
 
-![Click Connect Wallet](./ethereum-bridge/eth-bridge-01.png)
+![Click Connect Wallet](./eth-bridge-01.png)
 
 3. Click `Connect your EVM Wallet (Mandatory)`.
 
-![Click Connect your EVM Wallet](./ethereum-bridge/eth-bridge-02.png)
+![Click Connect your EVM Wallet](./eth-bridge-02.png)
 
 4. Choose your EVM wallet. In this example we’ll use MetaMask.
 
-![Select EVM Wallet](./ethereum-bridge/eth-bridge-03.png)
+![Select EVM Wallet](./eth-bridge-03.png)
 
 5. You will receive a few pop-up messages to connect your wallet, including this message to “Sign-In.” Your wallet may look different. The URI displayed for you will be `https://app.gobob.xyz`.
 
-![Sign in message](./ethereum-bridge/eth-bridge-04.png)
+![Sign in message](./eth-bridge-04.png)
 
 6. Make sure you are on the “Deposit” tab and have “Ethereum” selected.
 
 :::tip
 You may choose to use a “3rd Party” bridge. Each of these buttons will direct you to that bridge’s website. For the rest of this guide we’ll use the “BOB Bridge.”
 :::
 
-![List of 3rd party bridges](./ethereum-bridge/eth-bridge-05.png)
+![List of 3rd party bridges](./eth-bridge-05.png)
 
 7. You may choose between bridging ETH (“Ether”) or a variety of ERC-20 tokens such as WBTC, DAI, wstETH, and others.
 
-![List of tokens that can be bridged from Ethereum](./ethereum-bridge/eth-bridge-06.png)
+![List of tokens that can be bridged from Ethereum](./eth-bridge-06.png)
 
 8. Type the amount of that token that you would like to bridge from Ethereum to BOB.
 
-![Amount field with 0.0002 Ether typed in](./ethereum-bridge/eth-bridge-07.png)
+![Amount field with 0.0002 Ether typed in](./eth-bridge-07.png)
 
 9. Click “Bridge Asset,” then Confirm the transaction in your wallet. Make sure you have enough ETH to pay the gas fee for the transaction. 🥲
 
-![Wallet confirmation pop-up](./ethereum-bridge/eth-bridge-08.png)
+![Wallet confirmation pop-up](./eth-bridge-08.png)
 
 10. That’s it! After ~3 minutes your tokens will be bridged to BOB. You can verify the bridging is complete with the Activity section on the right or by clicking “Withdraw” and seeing that your token balance on BOB has increased.
 
-![Bridge in process](./ethereum-bridge/eth-bridge-09.png)
+![Bridge in process](./eth-bridge-09.png)
 
 If you have any questions, please reach out to us on [Discord](https://discord.gg/gobob) or [Telegram](https://t.me/+CyIcLW2nfaFlNDc1). Welcome to BOB!
diff --git a/docs/docs/learn/guides/faq/index.md b/docs/docs/learn/guides/faq/index.md
@@ -1,5 +1,5 @@
 ---
-position: 6
+position: 7
 label: "FAQs"
 ---
 

diff --git a/docs/docs/learn/guides/use-bob.md b/docs/docs/learn/guides/use-bob.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 sidebar_label: "Testing BOB"
 ---