diff --git a/README.md b/README.md index 5868edeb..7164202d 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ You can think of the [Rainbow Bridge] as having three main pieces: An app such as this one can then make calls to these various contracts to move assets between Ethereum and NEAR. -Right now, this app only moves a specific [ERC20] fungible token from Ethereum to NEAR by making calls to a `TokenLocker` / `MintableFungibleToken` Connector contract pair. Here's how it looks (click the GIF for a YouTube video with closed captions that describe what's happening): +Right now, this app only moves a specific [ERC20] fungible token from Ethereum to NEAR by making calls to a `TokenLocker` / `MintableFungibleToken` Connector contract pair. Here's how it looks: -[![UI showing sending 10 RAIN tokens from Ethereum to NEAR. Two confirmations from MetaMask pop up at the beginning of the transaction, then a notification area shows waiting for 25 blocks to sync, then the tokens are deposited on the NEAR side and the NEAR balance increases by 10](demo.gif)](https://youtu.be/GCHAib4CUrI) +![UI showing sending 10 RAIN tokens from Ethereum to NEAR. Two confirmations from MetaMask pop up at the beginning of the transaction, then a notification area shows waiting for 25 blocks to sync, then the tokens are deposited on the NEAR side and the NEAR balance increases by 10](demo.gif) Above, we see someone sending tokens from their Ethereum wallet to their NEAR account. Here are the steps the app goes through: @@ -71,13 +71,6 @@ Exploring the code * `initDOMHandlers` is a function that needs to be called once after page load, to add behavior like dropdown toggling & form submission. Check out [domHelpers.js](./src/js/domHelpers.js) to see the simple setup here. * `render` is a function which doesn't truly _render_, if you're used to thinking about rendering from a framework like React. Instead, this function procedurally updates the DOM based on current app state. Open [render.js](./src/js/render.js) to see everything it does. This function gets called again in both [authEthereum](./src/js/authEthereum.js) and [authNear](./src/js/authNear.js) after login. -4. [transfers.js](./src/js/transfers.js): the main Rainbow Bridge logic! - - * This file will be extracted to a library for frontends that want to use the Rainbow Bridge. For now, if you throw away the rest of this app, keep this part! And as this repository gets updated (it uses semantic versioning), you can copy-paste the latest version of this file into your own app. - * The public interface of this file is small. Look for the functions that are exported at the top. You can initiate a transfer, get all transfers, check & update statuses of transfers, and retry or clear transfers. - * In-progress transers are saved to localStorage. After initializing a transfer, you can refresh or close the app. When you come back, it will start re-checking your transfers and moving them along. In the future, this logic might be moved to a Service Worker so that transfers continue to be checked & progressed as long as the browser is open. - - Run everything locally @@ -120,7 +113,7 @@ To get started: Gotcha: commit messages ----------------------- -`create-near-app` uses semantic versioning and auto-generates nice release notes & a changelog all based off of the commits. We do this by enforcing [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/). In general the pattern looks like: +`rainbow-bridge-frontend` uses semantic versioning and auto-generates nice release notes & a changelog all based off of the commits. We do this by enforcing [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/). In general the pattern looks like: type(scope?): subject #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",") diff --git a/demo.gif b/demo.gif index 460304cf..17eb9e26 100644 Binary files a/demo.gif and b/demo.gif differ