Merge pull request #99 from bob-collective/tom/metamask-demo-docs

metamask documentation

docs/docs/build/examples/metamask-ordinals/_category_.yml

@@ -0,0 +1,3 @@
+position: 3
+collapsible: true
+collapsed: false

docs/docs/build/examples/metamask-ordinals/index.md

@@ -0,0 +1,82 @@
+# Use MetaMask to Inscribe and Transfer Ordinals, and Transfer BTC
+
+This example demonstrates how users can use a single web wallet to manage assets on both Bitcoin and BOB. The BOB MetaMask Snap can be used to inscribe and transfer ordinals, and transfer BTC, using only MetaMask as well as access any other EVM functions on BOB.
+
+:::info Example Code
+
+Find the code for this example on [our GitHub repository](https://github.com/bob-collective/demo-brc20-metamask).
+
+:::
+
+## Demo
+
+We have created a testnet demo of the application at [https://ordinals.gobob.xyz](https://ordinals.gobob.xyz), allowing anyone to inscribe, view and transfer ordinals, and transfer BTC.
+
+:::info MetaMask Flask
+
+This demo uses [MetaMask Snaps](https://metamask.io/snaps/) and can only be used with [MetaMask Flask](https://metamask.io/flask/). MetaMask Snaps are not currently supported on mobile wallets, so this demo will only run in the desktop version of Chrome or Firefox.
+
+:::
+
+### Creating a test profile
+
+To use this demo, you will need to create a new browser profile to use with the MetaMask Flask extension, as having MetaMask and MetaMask Flask installed in the same browser profile can cause issues.
+
+We recommend creating two test profiles so that you can test transferring Ordinals and BTC between two accounts.
+
+### Installing the MetaMask Snap
+
+Once you have installed MetaMask Flask, click the 'Connect Wallet' button on [https://ordinals.gobob.xyz](https://ordinals.gobob.xyz). MetaMask will prompt you to install the Snap, and give it permissions.
+
+Take note that your BTC wallet in the Snap derives its private keys from the MetaMask's seed phrase.
+
+### Funding your account
+
+One you have connected your wallet, you will see your derived BTC address in place of the 'Connect Wallet' button. Click on the address to copy it to the clipboard and then fund it using a BTC faucet:
+
+- [https://coinfaucet.eu/en/btc-testnet/](https://coinfaucet.eu/en/btc-testnet/)
+- [https://bitcoinfaucet.uo1.net/](https://bitcoinfaucet.uo1.net/)
+
+You can check your BTC balance by clicking on the 'Transfer BTC' button.
+
+:::note
+
+BTC may show in your balance before it is confirmed. If you try to use the application before the funds are confirmed, your balance will be too low and you may see errors.
+
+:::
+
+### Inscribing a text ordinal
+
+- Click on the 'Inscribe Ordinal' button, and then the 'Text' tab.
+- Enter the inscription text, and submit the form.
+- The ordinal will be shown in the Ordinals Portfolio table (this may take a few seconds)
+
+![inscribe-text](inscribe-text.png)
+
+### Inscribing an image ordinal
+
+:::info Supported file types
+
+Only `png` and `jpg` files are currently supported.
+
+:::
+
+- Click on the 'Inscribe Ordinal' button, and then the 'Image' tab.
+- Click on Select File (only png and jpg files are supported), select your image, and submit the form.
+- The ordinal will be shown in the Ordinals Portfolio table (this may take a few seconds)
+
+![inscribe-image](inscribe-image.png)
+
+### Transferring an ordinal
+
+- Click on the 'Transfer Ordinal' button next to the ordinal you would like to transfer.
+- Enter a testnet BTC address, and submit the form.
+
+![transfer-ordinal](transfer-ordinal.png)
+
+### Transferring BTC
+
+- Click on the 'Transfer BTC' button at the top of the page.
+- Enter a testnet BTC address, and submit the form.
+
+![transfer-btc](transfer-btc.png)

docs/docs/build/examples/unified-assets-tracker/_category_.yml

@@ -0,0 +1,3 @@
+position: 4
+collapsible: true
+collapsed: true

docs/docs/build/examples/unified-assets-tracker/index.md

@@ -21,7 +21,7 @@ The source code for this demo can be found in [this repository](https://github.c
 2. Move to API directory `$ cd api/`
 3. Compile and run the service with `cargo run`
 4. The API server should be now running at `localhost:8000`
-5. The API documentation can be found in `api/README.md` directory.  
+5. The API documentation can be found in `api/README.md` directory.
 
 ## Installing the UI project
 
@@ -38,8 +38,8 @@ The source code for this demo can be found in [this repository](https://github.c
 
 1. Run `pnpm dev` in `ui` directory.
 2. The UI is now running locally on port 5173.
-3. Go to `localhost:5173` and click on `Connect wallet`, your wallet will get connected and the Bitcoin snap extension will be installed. After this, you have to approve all the permissions in Metamask to access the Bitcoin addresses.
-4. Now you have Bitcoin address derived from your Metamask account, you can send testnet BTC or brc20s to see them in the app and move them around.
+3. Go to `localhost:5173` and click on `Connect wallet`, your wallet will get connected and the Bitcoin snap extension will be installed. After this, you have to approve all the permissions in MetaMask to access the Bitcoin addresses.
+4. Now you have Bitcoin address derived from your MetaMask account, you can send testnet BTC or brc20s to see them in the app and move them around.
 
 ## Notes
 

docs/docs/build/examples/zkvm-taproot/_category_.yml

@@ -0,0 +1,3 @@
+position: 5
+collapsible: true
+collapsed: true

docs/docs/build/getting-started/index.md

@@ -27,7 +27,8 @@ This is alpha-stage software. We love to work closely with you to make BOB usefu
 ## Examples
 
 - [P2P Swap BTC and ERC20](/docs/build/examples/btc-swap/): Learn how to build a P2P Bitcoin marketplace on BOB using a BTC light client to eliminate trusted thrid parties.
-- [Inscribing Ordinals](/docs/build/examples/brc20-octopus/): Learn how to inscribe Ordinals (text, BRC20s, ...) with the UniSat wallet.
+- [Inscribing Ordinals With Unisat Wallet](/docs/build/examples/brc20-octopus/): Learn how to inscribe Ordinals (text, BRC20s, ...) with the UniSat wallet.
+- [Use MetaMask to Inscribe and Transfer Ordinals](/docs/build/examples/metamask-ordinals/): Learn how to inscribe Ordinals (text, BRC20s, ...) with the UniSat wallet.
 - [Unify BTC and EVM Assets](/docs/build/examples/unified-assets-tracker/): Learn how to unify BTC and EVM assets with a single wallet by using MetaMask snaps.
 - [zkVM Taproot Address Verification](/docs/build/examples/zkvm-taproot/): Learn how to prove ownership of a Bitcoin taproot address using zkVM and Bonsai.