Ethereum & NEAR, sitting in a tree, B. U. I. DL. I. N. G.

class: small

# Ethereum & NEAR, sitting in a tree,

# **B. U. I. DL. I. N. G.**

How to use the slides:

* <kbd>P</kbd> toggle presenter notes
* <kbd>?</kbd> help menu
* <kbd>→</kbd> next slide

Also, [here's the source](https://github.com/chadoh/rainbow-bridge-talk)

---

# Ethereum & NEAR, sitting in a tree,

# **B. U. I. DL. I. N. G.**

Hey app developers! Help us put some finishing touches on our Rainbow Bridge client library.

<small>
  *@chadoh* • *chadoh.near* • *near.org*  
  These slides: [chadoh.com/rainbow-bridge-talk](https://near.ai/chad-talk)  
</small>

---

# Ethereum & NEAR, sitting in a tree,

# **B. U. I. DL. I. N. G.**

1. Demo
2. What would you do with it?
3. Key concepts
4. Four easy steps!
5. What's missing?

???

While this slide is up, demo https://near.github.io/rainbow-bridge-frontend

For instructions on how to use this app, see Appendix A at the end of this slide deck

---

# If this were easy, what would you do with it?

* You could *use ERC20 tokens in NEAR*, where block times are fast and transaction fees are cheap.
--

* You could let users make NFTs in NEAR, then *send them to Ethereum* to list them in larger marketplaces.
--

* You could let users *balance liquidity* and *arbitrage* across markets on both chains.
--

* More!

---

# Four easy steps!

Let's do it!

---

# But first...

Some key concepts

---

# Clients

!["Light clients implemented within each blockchain as a smart contract, to track the other chain"](img/clients.png)

---

# Provers

!["Separate smart contracts can confirm or refute a given proof by checking against data in the relevant client"](img/provers.png)

---

# Connectors

Like a *Fungible Token* connector

---

# Connectors

Like a Fungible Token connector to go from *ERC20* to *NEP21*

---

# Connectors

Like a Fungible Token connector to go from ERC20 to NEP21 *and back again*

---

# Connectors

!["Using a TokenLocker and MintableFungibleToken connector pair to send DAI from Ethereum to NEAR"](img/connectors.png)

---

# 2 chains, 4 directions

Ethereum as origin

1. FT on Ethereum to bridged FT on NEAR
--

2. Bridged FT on NEAR back to natural FT on Ethereum

NEAR as origin

1. FT on NEAR to bridged FT on Ethereum
2. Bridged FT on Ethereum back to natural FT on NEAR

---

# 2 chains, 4 directions

Ethereum as origin

1. *natural ERC20* to NEP21
2. *bridged NEP21* to ERC20

NEAR as origin

3. *natural NEP21* to ERC20
4. *bridged ERC20* to NEP21

Do we like this notation? [near.ai/slido](https://near.ai/slido)

---

# 2 chains, 4 directions

Ethereum as origin

1. natural ERC20 to NEP21: *DAI to DAIⁿ*
2. bridged NEP21 to ERC20: *DAIⁿ to DAI*

NEAR as origin

3. natural NEP21 to ERC20: *BNNA to BNNAᵉ*
4. bridged ERC20 to NEP21: *BNNAᵉ to BNNA*

Do we like this notation? [near.ai/slido](https://near.ai/slido)

???

Mine banana tokens at [berryclub.io](https://berryclub.io/)

---

# Four easy steps!

Let's do it!

---

# Step 1: Dependencies

```js
"dependencies": {
  "rainbow-bridge-client": "*",
  "rainbow-bridge-erc20-and-nep21": "*",
  "rainbow-bridge-erc20-and-nep141": "*",
  "rainbow-bridge-erc721-and-nep4": "*",
  "rainbow-bridge-erc20-with-rebase-and-nep21": "*",
}
```

???

* Main client library designed to handle core logic around storing and progressing transfers
* Connector-specific libraries can be created by anyone and interop with the core client library permissionlessly
* Might have standard-specific libraries as shown here or more general "fungible token" libraries

Or maybe we use an alternative naming scheme, to make it easy to tell which libraries are maintained by the core Rainbow Bridge team. This would look like...

---

# Step 1: Dependencies

```js
"dependencies": {
  "@rainbow-bridge/client": "*",
  "@rainbow-bridge/erc20-and-nep21": "*",
  "@rainbow-bridge/erc20-and-nep141": "*",
  "@rainbow-bridge/erc721-and-nep4": "*",
  "rainbow-bridge-erc20-with-rebase-and-nep21": "*",
}
```

GitHub org *`rainbow-bridge`* not available :(

---

# Step 1: Dependencies

```js
"dependencies": {
  "@eth+near/client": "*",
  "@eth+near/erc20+nep21": "*",
  "@eth+near/erc20+nep141": "*",
  "@eth+near/erc721+nep4": "*",
  "rainbow-bridge-erc20-with-rebase-and-nep21": "*",
}
```

Can't have *`+`* in package name :(

What should we call the org? [near.ai/slido](https://near.ai/slido)

???

Options:

* rainbow-bridge – No matching GitHub org? No problem.
* eth~near – The tilde looks like a whimsical bridge!
* eth-near – No it doesn't. Stop being cute.
* eth-to-near – Does "to" imply the bridge is one-way?
* eth-and-near
* eth-with-near

---

# Step 1: Dependencies

```bash
yarn add @eth-near/client @eth-near/erc20-nep21
```

???

Do cool kids still use yarn?

---

# Step 2: Initiate

```html
<form>
  <input id="erc20Address" />
  <input id="amount" />
  <input id="sender" />
  <input id="recipient" />
</form>
```

---

# Step 2: Initiate

```js
import { naturalErc20ToNep21 } from '@eth-near/erc20-nep21'

document.querySelector('form').onsubmit = e => {
  e.preventDefault()

const {
    erc20Address, amount, sender, recipient
  } = e.target.elements

naturalErc20ToNep21({
    erc20Address: erc20Address.value,
    amount: amount.value,
    sender: sender.value,
    recipient: recipient.value,
  })
}
```

---

## `@eth-near/erc20-nep21`

Four main exports:

--
1. `naturalErc20ToNep21`
--

2. `bridgedNep21ToErc20`
--

3. `naturalNep21ToErc20`
4. `bridgedErc20ToNep21`

---

## `@eth-near/erc20-nep21`

!["Each of these directions contains all its own logic about how to complete this kind of transfer, and can have different numbers of steps and logic around how to finalize"](img/direction-logics.png)

---

# Step 3: List

```html
<ol id="transfers-go-here"></ol>
```

---

# Step 3: List

```js
import { get } from '@eth-near/client'

function renderTransfers () {
  const transfers = get({ filter: { status: 'in-progress' } })

document.querySelector('#transfers-go-here').innerHTML =
    transfers.map(renderTransfer).join('')
}

renderTransfers()
```

---

# Step 3: List

```js
import { decorate } from '@eth-near/client'

function renderTransfer (transfer) {
  transfer = decorate(transfer, { locale: 'en_US' })

return `
    <li class="transfer" id="${transfer.id}">
      ${transfer.amount}
      ${transfer.sourceTokenName} from
      ${transfer.sender} to
      ${transfer.recipient}
      ${!transfer.callToAction ? '' : `
        <button class="act-on-transfer">
          ${transfer.callToAction}
        </button>
      `}
    </li>
  `
})
```

---

# Step 3: List

```js
import { act } from '@eth-near/client'

document.querySelector('body').addEventListener('click', e => {
  const callToAction = e.target.closest('.act-on-transfer')

if (callToAction) {
    const transferId = callToAction.closest('.transfer').id
    act(transferId)
  }
})
```

---

# Step 4: Check in

```js
import { checkStatusAll } from '@eth-near/client'

checkStatusAll({ loop: 15000 })
```

---

# Step 4: Check in

```js
import { onChange } from '@eth-near/client'

onChange(renderTransfers)
```

---

# All together

```js
import {
  act, checkStatusAll, decorate, get, onChange
} from '@eth-near/client'
import { naturalErc20ToNep21 } from '@eth-near/erc20-nep21'

// initiate
form.onsubmit = e => naturalErc20ToNep21({ ... })

// render
function renderTransfers () { get(); ... }
function renderTransfer (transfer) { decorate(transfer); ... }
button.onclick = e => act(...)
renderTransfers()

// check in
checkStatusAll({ loop: 15000 })
onChange(renderTransfers)
```

---

# What's missing?

* NEAR & Ethereum authentication
--

* bridgedNep21ToErc20 [browser support](https://github.com/near/near-api-js/pull/467)
--

* [NEP141](https://github.com/near/NEPs/issues/141) & [metadata](https://github.com/near/NEPs/pull/129) extension
--

* actually publish libraries!
--

* NodeJS support
--

* test, sand, polish

*ETA:* March?

---

# Ethereum & NEAR, sitting in a tree,

# **B. U. I. DL. I. N. G.**

1. Demo
2. What would you do with it?
3. Key concepts
4. Four easy steps!
5. What's missing?

---

# **MOAR**

These slides: [chadoh.com/rainbow-bridge-talk](https://near.ai/chad-talk)  
Get notified: [Subscribe](https://near.ai/newsletter-ethD)  
Read: [Introductory Blog Post](https://near.ai/bridge-blog)  
Try: [Rainbow Bridge UI](https://near.ai/bridge-UI)  
Walk through: [Step by Step](https://near.ai/bridge-step-by-step)  
Contribute: [Primordial `@eth-near/client`](https://near.ai/bridge-transfer)
Learn: [near.org/learn](https://near.ai/learn)  
Get grants: [$1 million](https://twitter.com/neardevs/status/1357767605822586881?s=21)

???

Make sure to check out all the cool things NEAR’s up to at ETHDenver all week!

* *Booth:* Visit our booth in the Sports Castle to claim a FREE custom-named NEAR account. NEAR Wallets are like protocol-native ENS domains, so claim a good one!
* *SputnikDAO:* then visit the ZEN Room and look for SputnikDAO. There’s $5,000 in $NEAR tokens locked in Sputnik for ANYONE who makes a proposal to the Space Council.
* *Bounties:* we’re giving away $6,000+ in prizes for hackers at ethdenver.com/bounties  or github.com/near/bounties/40.
* *NEAR Grants Program:* just launched on Friday, $1 million in grants will be distributed in the next 6 months. Apply at near.ai/grants.
* *Chat:* join our Discord at near.chat and the `#near` channel in the ETH Denver Discord

---

class: small

*Appendix A:* Using the Ropsten↔Testnet Bridge UI

# Using the [Testnet Bridge](https://near.github.io/rainbow-bridge-frontend/)

1. Install [MetaMask](https://metamask.io) or enable [Brave](https://brave.com/)'s Crypto Wallets
2. In your crypto wallet, select the [Ropsten](https://docs.ethhub.io/using-ethereum/test-networks/) test network
3. Get some Ropsten ETH from [a faucet](https://medium.com/2key/what-is-ropsten-eth-and-how-can-i-get-some-df7de95c7fa9)
4. [Mint yourself TST tokens with `showMeTheMoney`](https://ropsten.etherscan.io/token/0x722dd3f80bac40c951b51bdd28dd19d435762180#writeContract)
5. [Try it!](https://near.github.io/rainbow-bridge-frontend)

This info will all be discoverable via the UI soon.

<small><i>Note: If you start transfers, come back days or weeks later, then encounter strange errors – [delete your localStorage](https://www.howtogeek.com/664912/how-to-clear-storage-and-site-data-for-a-single-site-on-google-chrome/). While this is all test data and the tokens don't matter, this app will not guarantee backwards-compatible updates.</i></small>