From a6294e523fa2ed3afc6d0cbd6b5df29fe6b7def0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 23 Oct 2019 13:09:26 +0200
Subject: [PATCH] codesplitting web3 components, web3 fixes

---
 package.json                                  |  5 +---
 src/components/Web3Donation/Conversion.tsx    | 21 +++++++++--------
 .../Web3Donation/InputGroup.module.scss       | 14 +++++++++++
 src/components/Web3Donation/utils.ts          | 23 ++++++++-----------
 src/components/molecules/ModalThanks.tsx      | 15 ++++++++----
 5 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index b04bbb33..e14d72f4 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "remark-react": "^6.0.0",
     "slugify": "^1.3.4",
     "use-dark-mode": "^2.3.1",
-    "web3": "^1.2.1"
+    "web3": "^1.2.2"
   },
   "devDependencies": {
     "@babel/node": "^7.6.3",
@@ -133,9 +133,6 @@
     "typescript": "^3.6.4",
     "why-did-you-update": "^1.0.6"
   },
-  "engines": {
-    "node": ">=10.0.0"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/kremalicious/blog.git"
diff --git a/src/components/Web3Donation/Conversion.tsx b/src/components/Web3Donation/Conversion.tsx
index f0150a01..dcd53693 100644
--- a/src/components/Web3Donation/Conversion.tsx
+++ b/src/components/Web3Donation/Conversion.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { getFiat } from './utils'
+import { getFiat, Logger } from './utils'
 import styles from './Conversion.module.scss'
 
 export default class Conversion extends PureComponent<
@@ -24,20 +24,21 @@ export default class Conversion extends PureComponent<
   }
 
   async getFiatResponse() {
-    const { dollar, euro } = await getFiat(this.props.amount)
-    this.setState({
-      euro: euro,
-      dollar: dollar
-    })
+    try {
+      const { dollar, euro } = await getFiat(this.props.amount)
+      this.setState({ euro, dollar })
+    } catch (error) {
+      Logger.error(error.message)
+    }
   }
 
   render() {
+    const { dollar, euro } = this.state
+
     return (
       <div className={styles.conversion}>
-        <span>
-          {this.state.dollar !== '0.00' && `= $ ${this.state.dollar}`}
-        </span>
-        <span>{this.state.euro !== '0.00' && `= € ${this.state.euro}`}</span>
+        <span>{dollar !== '0.00' && `= $ ${dollar}`}</span>
+        <span>{euro !== '0.00' && `= € ${euro}`}</span>
       </div>
     )
   }
diff --git a/src/components/Web3Donation/InputGroup.module.scss b/src/components/Web3Donation/InputGroup.module.scss
index fe36a928..433a4faa 100644
--- a/src/components/Web3Donation/InputGroup.module.scss
+++ b/src/components/Web3Donation/InputGroup.module.scss
@@ -25,6 +25,10 @@
       border-bottom-left-radius: 0;
       border-left: 0;
     }
+
+    :global(.dark) & {
+      border-color: #000;
+    }
   }
 }
 
@@ -55,6 +59,11 @@
     &::-webkit-inner-spin-button {
       margin-left: -($spacer / 2);
     }
+
+    :global(.dark) & {
+      border-color: #000;
+      color: $brand-grey-dimmed;
+    }
   }
 }
 
@@ -72,6 +81,11 @@
   border-bottom-left-radius: $border-radius;
   display: flex;
   align-items: center;
+
+  :global(.dark) & {
+    background: $body-background-color--dark;
+    border-right-color: #000;
+  }
 }
 
 .infoline {
diff --git a/src/components/Web3Donation/utils.ts b/src/components/Web3Donation/utils.ts
index fd133e53..6675e1f7 100644
--- a/src/components/Web3Donation/utils.ts
+++ b/src/components/Web3Donation/utils.ts
@@ -100,19 +100,14 @@ export const getNetwork = async (web3: Web3) => {
 
 export const getFiat = async (amount: number) => {
   const url = 'https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=EUR'
+  const response = await fetch(url)
+  if (!response.ok) Logger.error(response.statusText)
+  const data = await response.json()
+  /* eslint-disable @typescript-eslint/camelcase */
+  const { price_usd, price_eur } = data[0]
+  const dollar = (amount * price_usd).toFixed(2)
+  const euro = (amount * price_eur).toFixed(2)
+  /* eslint-enable @typescript-eslint/camelcase */
 
-  try {
-    const response = await fetch(url)
-    if (!response.ok) Logger.error(response.statusText)
-    const data = await response.json()
-    /* eslint-disable @typescript-eslint/camelcase */
-    const { price_usd, price_eur } = data[0]
-    const dollar = (amount * price_usd).toFixed(2)
-    const euro = (amount * price_eur).toFixed(2)
-    /* eslint-enable @typescript-eslint/camelcase */
-
-    return { dollar, euro }
-  } catch (error) {
-    Logger.error(error)
-  }
+  return { dollar, euro }
 }
diff --git a/src/components/molecules/ModalThanks.tsx b/src/components/molecules/ModalThanks.tsx
index 55cb4827..44fdbed0 100644
--- a/src/components/molecules/ModalThanks.tsx
+++ b/src/components/molecules/ModalThanks.tsx
@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { lazy, Suspense } from 'react'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-import Web3Donation from '../Web3Donation'
-import Qr from '../atoms/Qr'
 import Modal from '../atoms/Modal'
 import styles from './ModalThanks.module.scss'
 
+const Web3Donation = lazy(() => import('../Web3Donation'))
+const Qr = lazy(() => import('../atoms/Qr'))
+
 export default function ModalThanks(props: any) {
   const { author } = useSiteMetadata()
 
@@ -16,7 +17,9 @@ export default function ModalThanks(props: any) {
       title="Say thanks"
     >
       <div className={styles.modalThanks}>
-        <Web3Donation address={author.ether} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <Web3Donation address={author.ether} />
+        </Suspense>
 
         <header>
           <h4>Any other wallets</h4>
@@ -27,7 +30,9 @@ export default function ModalThanks(props: any) {
           .filter(key => key === 'bitcoin' || key === 'ether')
           .map((address: string, i: number) => (
             <div key={i} className={styles.coin}>
-              <Qr title={address} address={(author as any)[address]} />
+              <Suspense fallback={<div>Loading...</div>}>
+                <Qr title={address} address={(author as any)[address]} />
+              </Suspense>
             </div>
           ))}
       </div>