make transactions work, switch to ethereum-blockies

package.json

@@ -29,14 +29,15 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@ethersproject/providers": "^5.0.0-beta.145",
+    "@ethersproject/providers": "^5.0.0-beta.146",
-    "@ethersproject/units": "^5.0.0-beta.131",
+    "@ethersproject/units": "^5.0.0-beta.132",
     "@loadable/component": "^5.10.3",
     "@web3-react/core": "^6.0.0-beta.15",
     "@web3-react/injected-connector": "^6.0.0-beta.17",
     "classnames": "^2.2.6",
     "date-fns": "^2.8.1",
     "dms2dec": "^1.1.0",
+    "ethereum-blockies": "github:MyEtherWallet/blockies",
     "fast-exif": "^1.0.1",
     "feather-icons": "^4.24.1",
     "fraction.js": "^4.0.12",
@@ -62,35 +63,32 @@
     "gatsby-remark-copy-linked-files": "^2.1.30",
     "gatsby-remark-images": "^3.1.33",
     "gatsby-remark-smartypants": "^2.1.16",
-    "gatsby-remark-vscode": "^1.3.0",
+    "gatsby-remark-vscode": "^1.4.0",
     "gatsby-source-filesystem": "^2.1.38",
     "gatsby-source-graphql": "^2.1.24",
     "gatsby-transformer-remark": "^2.6.37",
     "gatsby-transformer-sharp": "^2.3.5",
     "graphql": "^14.5.8",
     "intersection-observer": "^0.7.0",
-    "load-script": "^1.0.0",
     "pigeon-maps": "^0.14.0",
     "pigeon-marker": "^0.3.4",
     "react": "^16.12.0",
-    "react-blockies": "^1.4.1",
+    "react-clipboard.js": "^2.0.16",
-    "react-clipboard.js": "^2.0.13",
     "react-dom": "^16.12.0",
     "react-feather": "^2.0.3",
     "react-helmet": "^5.2.1",
-    "react-modal": "^3.11.1",
+    "react-pose": "^4.0.10",
-    "react-pose": "^4.0.9",
     "react-qr-svg": "^2.2.1",
     "react-transition-group": "^4.3.0",
-    "remark": "^11.0.1",
+    "remark": "^11.0.2",
     "remark-react": "^6.0.0",
     "slugify": "^1.3.6",
     "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
-    "@babel/node": "^7.7.0",
+    "@babel/node": "^7.7.4",
-    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-env": "^7.7.4",
-    "@babel/preset-typescript": "^7.7.0",
+    "@babel/preset-typescript": "^7.7.4",
     "@svgr/webpack": "^4.3.3",
     "@testing-library/jest-dom": "^4.2.3",
     "@testing-library/react": "^9.3.2",
@@ -98,11 +96,10 @@
     "@types/jest": "^24.0.21",
     "@types/loadable__component": "^5.10.0",
     "@types/lunr": "^2.3.2",
-    "@types/node": "^12.12.11",
+    "@types/node": "^12.12.12",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.12",
     "@types/react-dom": "^16.9.3",
     "@types/react-helmet": "^5.0.14",
-    "@types/react-modal": "^3.10.0",
     "@types/react-transition-group": "^4.2.3",
     "@types/shortid": "0.0.29",
     "@typescript-eslint/eslint-plugin": "^2.8.0",
@@ -110,7 +107,7 @@
     "@welldone-software/why-did-you-render": "^3.3.9",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "eslint": "^6.6.0",
+    "eslint": "^6.7.0",
     "eslint-config-prettier": "^6.7.0",
     "eslint-loader": "^3.0.2",
     "eslint-plugin-graphql": "^3.1.0",

src/@types/node_modules.d.ts

@@ -2,3 +2,7 @@ declare module 'pigeon-maps'
 declare module 'pigeon-marker'
 declare module 'react-blockies'
 declare module 'remark-react'
+
+declare module 'ethereum-blockies' {
+  export function toDataUrl(address: string): string
+}

src/components/molecules/Web3Donation/Account.module.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 .accountWrap {
   font-size: $font-size-small;
@@ -8,12 +9,14 @@
   justify-content: space-between;
 }
 
-.identicon {
+.blockies {
+  width: 1.2rem;
+  height: 1.2rem;
   border-radius: 50%;
   overflow: hidden;
   display: inline-block;
   vertical-align: middle;
-  margin-right: $spacer / 8;
+  margin-right: $spacer / 4;
 }
 
 .balance {

src/components/molecules/Web3Donation/Account.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Blockies from 'react-blockies'
+import { toDataUrl } from 'ethereum-blockies'
 import { formatEther } from '@ethersproject/units'
 import styles from './Account.module.scss'
 import useWeb3, { getBalance } from '../../../hooks/use-web3'
@@ -7,6 +7,7 @@ import useWeb3, { getBalance } from '../../../hooks/use-web3'
 export default function Account() {
   const { library, account } = useWeb3()
   const ethBalance = account && getBalance(account, library)
+  const blockies = account && toDataUrl(account)
 
   const accountDisplay =
     account &&
@@ -17,12 +18,7 @@ export default function Account() {
   return (
     <div className={styles.accountWrap} title={account}>
       <span className={styles.account}>
-        <Blockies
+        <img className={styles.blockies} src={blockies} alt="Blockies" />
-          seed={account}
-          scale={2}
-          size={8}
-          className={styles.identicon}
-        />
         {accountDisplay}
       </span>
       <span className={styles.balance}>{balanceDisplay}</span>

src/components/molecules/Web3Donation/Alert.tsx

@@ -17,7 +17,7 @@ const constructMessage = (
   transactionHash
     ? message &&
       message.text +
-        '<br />' +
+        '<br /><br />' +
         getTransactionMessage(transactionHash).transaction
     : message && message.text
 

src/components/molecules/Web3Donation/index.tsx

@@ -46,10 +46,12 @@ export default function Web3Donation({ address }: { address: string }) {
       text: getTransactionMessage().waitingConfirmation
     })
 
-    // setMessage({
+    await tx.wait()
-    //   status: 'success',
+
-    //   text: getTransactionMessage().success
+    setMessage({
-    // })
+      status: 'success',
+      text: getTransactionMessage().success
+    })
   }
 
   return (

src/pages/thanks.tsx

@@ -36,7 +36,7 @@ export default function Thanks() {
   )
 
   return (
-    <Web3ReactProvider getLibrary={getLibrary}>
+    <>
       <Helmet>
         <title>Say thanks</title>
         <meta name="robots" content="noindex,nofollow" />
@@ -54,10 +54,12 @@ export default function Thanks() {
             <p>Send Ether with MetaMask or Brave.</p>
           </header>
 
-          <LazyWeb3Donation
+          <Web3ReactProvider getLibrary={getLibrary}>
-            fallback={<div className={styles.loading}>Loading...</div>}
+            <LazyWeb3Donation
-            address={author.ether}
+              fallback={<div className={styles.loading}>Loading...</div>}
-          />
+              address={author.ether}
+            />
+          </Web3ReactProvider>
         </div>
 
         <div className={styles.coins}>
@@ -71,6 +73,6 @@ export default function Thanks() {
           ))}
         </div>
       </article>
-    </Web3ReactProvider>
+    </>
   )
 }