diff --git a/.circleci/config.yml b/.circleci/config.yml index 53bd8dca..96b3a026 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -3,7 +3,7 @@ jobs: deploy_stage: docker: - image: cimg/node:14.17.3 - resource_class: medium+ + resource_class: large steps: - checkout - run: rm yarn.lock && yarn install --network-concurrency 1 @@ -15,7 +15,7 @@ jobs: deploy_prod: docker: - image: cimg/node:14.17.3 - resource_class: medium+ + resource_class: large steps: - checkout - run: yarn cache clean && yarn install --network-concurrency 1 diff --git a/README.md b/README.md index f82970c8..9ff9f817 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ For detailed documentation, head to [docs.blocknative.com](https://docs.blocknat
- +
View live demo [here](https://reactdemo.blocknative.com/)! diff --git a/assets/react-demo-updated.png b/assets/react-demo-updated.png new file mode 100644 index 00000000..18940835 Binary files /dev/null and b/assets/react-demo-updated.png differ diff --git a/assets/react-demo.png b/assets/react-demo.png deleted file mode 100644 index b7f627e7..00000000 Binary files a/assets/react-demo.png and /dev/null differ diff --git a/package.json b/package.json index aad8176d..e8cb00c7 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "onboard-notify-react", - "version": "0.13.3", + "version": "0.13.5", "dependencies": { - "bnc-notify": "^1.9.1", + "bnc-notify": "^1.9.2", "bnc-notify-staging": "https://github.com/blocknative/notify#develop", "bnc-onboard": "^1.35.4", "bnc-onboard-staging": "https://github.com/blocknative/onboard#develop", - "ethers": "^5.2.0", + "ethers": "^5.5.2", "react": "^16.9.0", "react-dom": "^16.9.0", "react-scripts": "3.1.1", diff --git a/src/App.css b/src/App.css index fda6876c..cf3039b3 100644 --- a/src/App.css +++ b/src/App.css @@ -1,8 +1,7 @@ body { - font-family: "Helvetica Neue"; - background-color: rgb(206, 175, 206); - background-image: url("bn-logo.png"); - background-repeat: repeat; + font-family: sans-serif;; + font-style: normal; + background-color: #1a1d26; max-width: 100vw; overflow: hidden; margin: 0; @@ -15,10 +14,6 @@ main { box-sizing: border-box; } -section { - display: flex; -} - @media screen and (max-width: 750px) { body { overflow: unset; @@ -39,19 +34,30 @@ section { } } +.main-content { + display: flex; + justify-content: center; + padding-top: 24px; +} + +.vertical-main-container { + display: grid; +} + .container { - background: rgba(255, 255, 255, 0.4); + background: #383c48; display: flex; justify-content: center; align-items: center; flex-flow: column nowrap; - padding: 1rem; - /* width: 20rem; */ - border: 1px solid #eeeeee; - border-radius: 4px; - margin: 0.25rem; + padding: 1.5rem; + border-radius: 8px; + margin: 0.75rem 1rem; + border: 1px solid #6c707d; + color: #fff; } + .container div { display: flex; justify-content: center; @@ -93,13 +99,13 @@ section { } .bn-demo-button { - background: #ffffff; + background: #ffffffee; font-size: 0.889rem; border: 1px solid #eeeeee; - border-radius: 40px; + border-radius: 8px; padding: 0.55rem 1.4rem; - color: #4a90e2; - margin: 0.25rem 0.5rem; + color: #6370e5; + margin: 0.4rem 0.75rem; transition: background 200ms ease-in-out, color 200ms ease-in-out; } @@ -110,3 +116,13 @@ section { .bn-demo-button:hover { cursor: pointer; } + +.selected-toggle-btn { + background: #6370e5; + color: white; +} + +.unselected-toggle-btn { + color: #6370e5; + background: #ffffffee; +} diff --git a/src/App.js b/src/App.js index 1f2df723..74cf23b2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react' import { ethers } from 'ethers' import VConsole from 'vconsole' -import getSigner from './signer' import { initOnboard, initNotify } from './services' import { version, dependencies } from '../package.json' import avatarPlaceholder from './avatar-placeholder.png' @@ -61,16 +60,12 @@ const App = () => { if (wallet.provider) { setWallet(wallet) - const ethersProvider = new ethers.providers.Web3Provider( - wallet.provider - ) - - provider = ethersProvider + provider = new ethers.providers.Web3Provider(wallet.provider, 'any') internalTransferContract = new ethers.Contract( '0xb8c12850827ded46b9ded8c1b6373da0c4d60370', internalTransferABI, - getSigner(ethersProvider) + provider.getUncheckedSigner() ) window.localStorage.setItem('selectedWallet', wallet.name) @@ -111,7 +106,7 @@ const App = () => { return } - const signer = getSigner(provider) + const signer = provider.getUncheckedSigner() const { hash } = await signer.sendTransaction({ to: toAddress, @@ -164,7 +159,7 @@ const App = () => { alert('An Ethereum address to send Eth to is required.') } - const signer = getSigner(provider) + const signer = provider.getUncheckedSigner() const txDetails = { to: toAddress, @@ -234,283 +229,291 @@ const App = () => { )} {network && ( - {networkEnum?.[Number(network)] || 'local'} network + {networkEnum?.[Number(network)] || 'local'} Network )}
-
-

Onboarding Users with Onboard

-
- {!wallet.provider && ( - - )} - - {wallet.provider && ( - - )} - - {wallet.provider && ( - - )} - - {wallet.provider && ( - - )} - {wallet.provider && wallet.dashboard && ( - - )} - {wallet.provider && wallet.type === 'hardware' && address && ( - - )} -
-
-
-

Transaction Notifications with Notify

-
-
- - setToAddress(e.target.value)} - /> -
-
- - with in-flight notifications +
+
+
+

Onboarding Users with Onboard

+
+ {!wallet.provider && ( + + )} + + {wallet.provider && ( + + )} + + {wallet.provider && ( + + )} + + {wallet.provider && ( + + )} + {wallet.provider && wallet.dashboard && ( + + )} + {wallet.provider && wallet.type === 'hardware' && address && ( + + )} +
-
- - with pre-flight and in-flight notifications -
-
- - via a internal transaction +
+ + setToAddress(e.target.value)} + /> +
+
+ + with in-flight notifications +
+
+ + with pre-flight and in-flight notifications +
+
+ + via a internal transaction +
+
+
+ + + +
-
+
+

UI Settings

+

Desktop Positioning

+ + + +

Mobile Positioning

+ +
-
-

UI Settings

- - -

Desktop Positioning

- - - - -

Mobile Positioning

- - -
{ flexDirection: 'column', position: 'fixed', bottom: '1rem', - left: '1rem' + left: '1rem', + color: '#716c6c' }} > diff --git a/src/signer.js b/src/signer.js deleted file mode 100644 index 621c8c98..00000000 --- a/src/signer.js +++ /dev/null @@ -1,35 +0,0 @@ -import { ethers } from 'ethers' - -class UncheckedJsonRpcSigner extends ethers.Signer { - constructor(signer) { - super() - ethers.utils.defineReadOnly(this, 'signer', signer) - ethers.utils.defineReadOnly(this, 'provider', signer.provider) - } - - getAddress() { - return this.signer.getAddress() - } - - sendTransaction(transaction) { - return this.signer.sendUncheckedTransaction(transaction).then(hash => ({ - hash, - nonce: null, - gasLimit: null, - gasPrice: null, - data: null, - value: null, - chainId: null, - confirmations: 0, - from: null, - wait: confirmations => - this.provider.waitForTransaction(hash, confirmations) - })) - } -} - -function getSigner(provider) { - return new UncheckedJsonRpcSigner(provider.getSigner()) -} - -export default getSigner diff --git a/yarn.lock b/yarn.lock index d738b89b..e7bbc352 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1784,6 +1784,13 @@ dependencies: "@ethersproject/logger" "^5.5.0" +"@ethersproject/networks@5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@ethersproject/networks/-/networks-5.5.1.tgz#b7f7b9fb88dec1ea48f739b7fb9621311aa8ce6c" + integrity sha512-tYRDM4zZtSUcKnD4UMuAlj7SeXH/k5WC4SP2u1Pn57++JdXHkRu2zwNkgNogZoxHzhm9Q6qqurDBVptHOsW49Q== + dependencies: + "@ethersproject/logger" "^5.5.0" + "@ethersproject/pbkdf2@5.4.0", "@ethersproject/pbkdf2@^5.4.0": version "5.4.0" resolved "https://registry.yarnpkg.com/@ethersproject/pbkdf2/-/pbkdf2-5.4.0.tgz#ed88782a67fda1594c22d60d0ca911a9d669641c" @@ -1896,6 +1903,31 @@ bech32 "1.1.4" ws "7.4.6" +"@ethersproject/providers@5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.5.1.tgz#ba87e3c93219bbd2e2edf8b369873aee774abf04" + integrity sha512-2zdD5sltACDWhjUE12Kucg2PcgM6V2q9JMyVvObtVGnzJu+QSmibbP+BHQyLWZUBfLApx2942+7DC5D+n4wBQQ== + dependencies: + "@ethersproject/abstract-provider" "^5.5.0" + "@ethersproject/abstract-signer" "^5.5.0" + "@ethersproject/address" "^5.5.0" + "@ethersproject/basex" "^5.5.0" + "@ethersproject/bignumber" "^5.5.0" + "@ethersproject/bytes" "^5.5.0" + "@ethersproject/constants" "^5.5.0" + "@ethersproject/hash" "^5.5.0" + "@ethersproject/logger" "^5.5.0" + "@ethersproject/networks" "^5.5.0" + "@ethersproject/properties" "^5.5.0" + "@ethersproject/random" "^5.5.0" + "@ethersproject/rlp" "^5.5.0" + "@ethersproject/sha2" "^5.5.0" + "@ethersproject/strings" "^5.5.0" + "@ethersproject/transactions" "^5.5.0" + "@ethersproject/web" "^5.5.0" + bech32 "1.1.4" + ws "7.4.6" + "@ethersproject/random@5.4.0", "@ethersproject/random@^5.4.0": version "5.4.0" resolved "https://registry.yarnpkg.com/@ethersproject/random/-/random-5.4.0.tgz#9cdde60e160d024be39cc16f8de3b9ce39191e16" @@ -2123,6 +2155,17 @@ "@ethersproject/properties" "^5.5.0" "@ethersproject/strings" "^5.5.0" +"@ethersproject/web@5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@ethersproject/web/-/web-5.5.1.tgz#cfcc4a074a6936c657878ac58917a61341681316" + integrity sha512-olvLvc1CB12sREc1ROPSHTdFCdvMh0J5GSJYiQg2D0hdD4QmJDy8QYDb1CvoqD/bF1c++aeKv2sR5uduuG9dQg== + dependencies: + "@ethersproject/base64" "^5.5.0" + "@ethersproject/bytes" "^5.5.0" + "@ethersproject/logger" "^5.5.0" + "@ethersproject/properties" "^5.5.0" + "@ethersproject/strings" "^5.5.0" + "@ethersproject/wordlists@5.4.0", "@ethersproject/wordlists@^5.4.0": version "5.4.0" resolved "https://registry.yarnpkg.com/@ethersproject/wordlists/-/wordlists-5.4.0.tgz#f34205ec3bbc9e2c49cadaee774cf0b07e7573d7" @@ -4389,10 +4432,10 @@ bnb-javascript-sdk-nobroadcast@^2.16.14: regenerator-runtime "^0.13.3" uuid "^3.3.3" -bnc-notify@^1.9.1: - version "1.9.1" - resolved "https://registry.yarnpkg.com/bnc-notify/-/bnc-notify-1.9.1.tgz#cd8ec8e5f5482cf78b6caea7de35288ee73d6b32" - integrity sha512-OWXI6KIOU/0CWhlFBiIStfbio3X5uUTeBjG6h4R7Ng6MABqZHMFRCNOgVQ50HdwwZiaFMuA3l23cZLxJjyaY0Q== +bnc-notify@^1.9.2: + version "1.9.2" + resolved "https://registry.yarnpkg.com/bnc-notify/-/bnc-notify-1.9.2.tgz#f077559643ae0eed69759524dff904b7a9f2f07f" + integrity sha512-Eeo7NiPuZqhod2dEuL1M67SHUDVm4jExv70yubv5arexN2BhW/ruzCzklPExv/oqo8q6H4fQicQiT4jCN6zPPQ== dependencies: bignumber.js "^9.0.0" bnc-sdk "^3.5.0" @@ -7352,6 +7395,42 @@ ethers@^5.4.7: "@ethersproject/web" "5.5.0" "@ethersproject/wordlists" "5.5.0" +ethers@^5.5.2: + version "5.5.2" + resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.5.2.tgz#cd2e508c7342c44fa70392f722e8de8f2416489f" + integrity sha512-EF5W+6Wwcu6BqVwpgmyR5U2+L4c1FQzlM/02dkZOugN3KF0cG9bzHZP+TDJglmPm2/IzCEJDT7KBxzayk7SAHw== + dependencies: + "@ethersproject/abi" "5.5.0" + "@ethersproject/abstract-provider" "5.5.1" + "@ethersproject/abstract-signer" "5.5.0" + "@ethersproject/address" "5.5.0" + "@ethersproject/base64" "5.5.0" + "@ethersproject/basex" "5.5.0" + "@ethersproject/bignumber" "5.5.0" + "@ethersproject/bytes" "5.5.0" + "@ethersproject/constants" "5.5.0" + "@ethersproject/contracts" "5.5.0" + "@ethersproject/hash" "5.5.0" + "@ethersproject/hdnode" "5.5.0" + "@ethersproject/json-wallets" "5.5.0" + "@ethersproject/keccak256" "5.5.0" + "@ethersproject/logger" "5.5.0" + "@ethersproject/networks" "5.5.1" + "@ethersproject/pbkdf2" "5.5.0" + "@ethersproject/properties" "5.5.0" + "@ethersproject/providers" "5.5.1" + "@ethersproject/random" "5.5.0" + "@ethersproject/rlp" "5.5.0" + "@ethersproject/sha2" "5.5.0" + "@ethersproject/signing-key" "5.5.0" + "@ethersproject/solidity" "5.5.0" + "@ethersproject/strings" "5.5.0" + "@ethersproject/transactions" "5.5.0" + "@ethersproject/units" "5.5.0" + "@ethersproject/wallet" "5.5.0" + "@ethersproject/web" "5.5.1" + "@ethersproject/wordlists" "5.5.0" + ethjs-unit@0.1.6: version "0.1.6" resolved "https://registry.yarnpkg.com/ethjs-unit/-/ethjs-unit-0.1.6.tgz#c665921e476e87bce2a9d588a6fe0405b2c41699"