Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

metamask documentation #99

Merged
merged 12 commits into from
Dec 5, 2023
3 changes: 3 additions & 0 deletions docs/docs/build/examples/metamask-ordinals/_category_.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
position: 3
collapsible: true
collapsed: false
82 changes: 82 additions & 0 deletions docs/docs/build/examples/metamask-ordinals/index.md
Original file line number Diff line number Diff line change
@@ -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.
tomjeatt marked this conversation as resolved.
Show resolved Hide resolved
tomjeatt marked this conversation as resolved.
Show resolved Hide resolved

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
tomjeatt marked this conversation as resolved.
Show resolved Hide resolved

- 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
tomjeatt marked this conversation as resolved.
Show resolved Hide resolved

:::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
tomjeatt marked this conversation as resolved.
Show resolved Hide resolved

- 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)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
position: 4
collapsible: true
collapsed: true
6 changes: 3 additions & 3 deletions docs/docs/build/examples/unified-assets-tracker/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand Down
3 changes: 3 additions & 0 deletions docs/docs/build/examples/zkvm-taproot/_category_.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
position: 5
collapsible: true
collapsed: true
3 changes: 2 additions & 1 deletion docs/docs/build/getting-started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down