Update wagmi library for 0.3.5 (#350)

kernel-community · May 13, 2022 · ee73155 · ee73155
1 parent 012cf6c
commit ee73155
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 152 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,28 +1,29 @@
-import React from 'react';
+import React from 'react'
 
-import {TranslationProvider} from '@modules/localization';
+import { TranslationProvider } from '@modules/localization'
 
-import Layout from '@modules/layouts/site_layout';
-import {NavigationProvider} from '@modules/navigation';
-import {Provider} from 'wagmi';
-import {connectors, provider, connectorStorageKey} from '@src/course/connect';
+import Layout from '@modules/layouts/site_layout'
+import { NavigationProvider } from '@modules/navigation'
+import { Provider, createClient } from 'wagmi'
+import { connectors, provider, connectorStorageKey } from '@src/course/connect'
 //Load our Primsjs css and Fonts
-import '@modules/layouts/global.css'; //<- Load in Prismjs css. Our custom styles have to be loaded this way cause Prismjs is blackboxed from our own code.
+import '@modules/layouts/global.css' //<- Load in Prismjs css. Our custom styles have to be loaded this way cause Prismjs is blackboxed from our own code.
 
-export const wrapRootElement = ({element}) => (
+const client = createClient({
+  autoConnect: true,
+  connectors,
+  provider,
+  connectorStorageKey,
+})
+
+export const wrapRootElement = ({ element }) => (
   <TranslationProvider>
-    <Provider
-      autoConnect
-      connectors={connectors}
-      provider={provider}
-      connectorStorageKey={connectorStorageKey}>
-      {element}
-    </Provider>
+    <Provider client={client}>{element}</Provider>
   </TranslationProvider>
-);
+)
 
-export const wrapPageElement = ({element, props}) => (
+export const wrapPageElement = ({ element, props }) => (
   <NavigationProvider>
     <Layout {...props}>{element}</Layout>
   </NavigationProvider>
-);
+)
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "sharp": "^0.30.2",
     "theme-ui": "^0.14.5",
     "use-immer": "^0.6.0",
-    "wagmi": "^0.2.25",
+    "wagmi": "^0.3.5",
     "window-or-global": "^1.0.1"
   },
   "devDependencies": {

diff --git a/src/hooks/useSignPermitTransaction.js b/src/hooks/useSignPermitTransaction.js
@@ -13,7 +13,7 @@ const types = {
 }
 
 const useSignPermitTransaction = ({ provider, address }) => {
-  const [, signMessage] = useSignTypedData()
+  const { signTypedDataAsync } = useSignTypedData()
 
   return async ({ nonce, expiry }) => {
     const { chainId } = await provider.getNetwork()
@@ -32,7 +32,7 @@ const useSignPermitTransaction = ({ provider, address }) => {
       allowed: true,
     }
 
-    const { data: message } = await signMessage({
+    const { data: message } = await signTypedDataAsync({
       domain,
       types,
       value,

diff --git a/src/modules/flashcard/card.js b/src/modules/flashcard/card.js
@@ -40,13 +40,27 @@ const Card = ({
   revealCallback,
   wasActive,
 }) => {
-  const [{ data, error }, connect] = useConnect()
-  const [{ data: accountData }] = useAccount()
-  const provider = useProvider()
-
   const [isModalVisible, setIsModalVisible] = useState(false)
   const [isUserRegistered, setIsUserRegistered] = useState(false)
 
+  const handleOnAccountConnected = () => {
+    if (!isUserRegistered) {
+      setIsModalVisible(true)
+    }
+  }
+
+  const { data: accountData } = useAccount()
+  const provider = useProvider()
+  const { error, connect, connectors, isConnected } = useConnect({
+    onConnect: handleOnAccountConnected,
+  })
+
+  const [connector, setConnector] = useState(connectors[Connector.INJECTED])
+
+  useEffect(() => {
+    setConnector(connector)
+  }, [isConnected])
+
   useEffect(() => {
     async function get() {
       setIsUserRegistered(await isRegistered(accountData.address, provider))
@@ -56,14 +70,6 @@ const Card = ({
     }
   }, [accountData?.address, provider])
 
-  const handleOnClickConnect = () => {
-    connect(data.connectors[Connector.INJECTED]).then((result) => {
-      if (!result.error && !isUserRegistered) {
-        setIsModalVisible(true)
-      }
-    })
-  }
-
   const cardVariants = {
     initial: { y: 10 * (index - currentCard), opacity: 1 },
     active: { y: 0, opacity: 1 },
@@ -133,7 +139,7 @@ const Card = ({
                   initial="initial"
                   animate={revealAnimateState}
                   sx={{ position: 'absolute' }}>
-                  {data.connected && isUserRegistered && (
+                  {isConnected && isUserRegistered && (
                     <Flex onClick={revealCallback}>
                       <span
                         className="reveal-answer"
@@ -142,25 +148,29 @@ const Card = ({
                       </span>
                     </Flex>
                   )}
-                  {data.connected && !isUserRegistered && (
+                  {isConnected && !isUserRegistered && (
                     <Web3Control
                       descriptionText="Register to reveal"
                       buttonText="Register"
-                      isDisabled={!data.connectors[Connector.INJECTED].ready}
+                      isDisabled={!connector.ready}
                       onClickButton={() => setIsModalVisible(true)}
                     />
                   )}
-                  {!data.connected && (
+                  {!isConnected && (
                     <Web3Control
                       descriptionText="Connect wallet to reveal"
                       buttonText="Metamask"
-                      isDisabled={!data.connectors[Connector.INJECTED].ready}
-                      onClickButton={handleOnClickConnect}>
-                      {error && error.message && <div>Failed to connect</div>}
+                      isDisabled={!connector.ready}
+                      onClickButton={() => {
+                        connect(connector)
+                      }}>
+                      {error?.message && (
+                        <div sx={styles.connectError}>Failed to connect</div>
+                      )}
                     </Web3Control>
                   )}
                 </motion.div>
-                {data.connected && isUserRegistered && (
+                {isConnected && isUserRegistered && (
                   <motion.div
                     variants={answerCopyVariant}
                     initial="initial"
@@ -234,6 +244,9 @@ const styles = {
     transformOrigin: 'bottom',
     boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   },
+  connectError: {
+    textAlign: 'center',
+  },
   connectText: {
     textAlign: 'center',
     fontWeight: 'bold',

diff --git a/src/modules/web3/modal.js b/src/modules/web3/modal.js
@@ -13,8 +13,8 @@ import { Icon } from '@makerdao/dai-ui-icons'
 
 const Web3 = ({ setIsVisible }) => {
   const provider = useProvider()
-  const [{ data: accountData }] = useAccount()
-  const [{ data: signer }] = useSigner()
+  const { data: accountData } = useAccount()
+  const { data: signer } = useSigner()
   const signTransaction = useSignPermitTransaction({
     provider,
     address: accountData?.address,