Release/2.5.3 (#8)

* Update deps, apply canary

* add loading states and tag canary

* Apply web3modal patches

* update to latest monorepo packages

* remove manual metamask

* Use latest monorepo canary

* Update to 2.8.3 monorepo packages

* tag 2.5.3

laboratory/package.json

@@ -1,23 +1,24 @@
 {
   "name": "laboratory",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "private": true,
   "scripts": {
     "dev": "rm -rf .next; next dev",
     "build": "next build"
   },
   "dependencies": {
     "@nextui-org/react": "1.0.0-beta.13",
-    "@walletconnect/ethereum-provider": "2.8.1",
-    "@walletconnect/modal": "2.5.2",
-    "@walletconnect/modal-auth-html": "2.5.2",
-    "@walletconnect/modal-auth-react": "2.5.2",
-    "@walletconnect/modal-sign-html": "2.5.2",
-    "@walletconnect/modal-sign-react": "2.5.2",
-    "next": "13.4.6",
+    "@walletconnect/ethereum-provider": "2.8.3",
+    "@walletconnect/modal": "2.5.3",
+    "@walletconnect/modal-auth-html": "2.5.3",
+    "@walletconnect/modal-auth-react": "2.5.3",
+    "@walletconnect/modal-sign-html": "2.5.3",
+    "@walletconnect/modal-sign-react": "2.5.3",
+    "next": "13.4.7",
     "react": "18.2.0",
     "react-code-blocks": "0.0.9-0",
     "react-dom": "18.2.0",
-    "valtio": "1.10.5"
+    "react-hot-toast": "2.4.1",
+    "valtio": "1.10.6"
   }
 }

laboratory/src/components/Toast.tsx

@@ -0,0 +1,33 @@
+import { toast, Toaster } from 'react-hot-toast'
+
+export const showToast = toast
+
+export default function Toast() {
+  return (
+    <Toaster
+      toastOptions={{
+        position: 'bottom-right',
+        style: {
+          borderRadius: '16px',
+          background: 'linear-gradient(97.02deg, #272A2A 0%, #141414 100%)',
+          color: '#ffffff',
+          border: '1px solid #585f5f',
+          paddingTop: '12px',
+          paddingBottom: '10px',
+          paddingLeft: '16px',
+          paddingRight: '16px'
+        },
+        error: {
+          style: {
+            borderColor: '#ff974c'
+          }
+        },
+        success: {
+          style: {
+            borderColor: '#2bee4b'
+          }
+        }
+      }}
+    />
+  )
+}

laboratory/src/pages/_app.tsx

@@ -7,6 +7,7 @@ import { NotificationModal } from '../components/NotificationModal'
 import { ShowLocalStorageButton } from '../components/ShowLocalStorageButton'
 import { SunIcon } from '../components/SunIcon'
 import { getTheme } from '../utilities/EnvUtil'
+import Toast from '../components/Toast'
 
 export default function App({ Component, pageProps }: AppProps) {
   const [ready, setReady] = useState(false)
@@ -49,6 +50,7 @@ export default function App({ Component, pageProps }: AppProps) {
             </div>
           </Row>
           <NotificationModal />
+          <Toast />
 
           <Component {...pageProps} />
         </NextUIProvider>

laboratory/src/pages/with-auth-api/html.tsx

@@ -3,6 +3,7 @@ import { WalletConnectModalAuth } from '@walletconnect/modal-auth-html'
 import { NotificationCtrl } from '../../controllers/NotificationCtrl'
 import { DEMO_METADATA, DEMO_STATEMENT } from '../../data/Constants'
 import { getProjectId, getTheme } from '../../utilities/EnvUtil'
+import { getErrorMessage, showErrorToast } from '../../utilities/ErrorUtil'
 
 const web3ModalAuth = new WalletConnectModalAuth({
   projectId: getProjectId(),
@@ -16,7 +17,8 @@ export default function WithAuthHtmlPage() {
       const data = await web3ModalAuth.signIn(DEMO_STATEMENT)
       NotificationCtrl.open('Sign In', JSON.stringify(data, null, 2))
     } catch (error) {
-      NotificationCtrl.open('Sign In', JSON.stringify(error, null, 2))
+      const message = getErrorMessage(error)
+      showErrorToast(message)
     }
   }
 

laboratory/src/pages/with-auth-api/react.tsx

@@ -3,13 +3,19 @@ import { WalletConnectModalAuth, useSignIn } from '@walletconnect/modal-auth-rea
 import { NotificationCtrl } from '../../controllers/NotificationCtrl'
 import { DEMO_METADATA, DEMO_STATEMENT } from '../../data/Constants'
 import { getProjectId, getTheme } from '../../utilities/EnvUtil'
+import { getErrorMessage, showErrorToast } from '../../utilities/ErrorUtil'
 
 export default function WithAuthReactPage() {
   const { signIn } = useSignIn(DEMO_STATEMENT)
 
   async function onSignIn() {
-    const data = await signIn()
-    NotificationCtrl.open('Sign In', JSON.stringify(data, null, 2))
+    try {
+      const data = await signIn()
+      NotificationCtrl.open('Sign In', JSON.stringify(data, null, 2))
+    } catch (error) {
+      const message = getErrorMessage(error)
+      showErrorToast(message)
+    }
   }
 
   return (

laboratory/src/pages/with-ethereum-provider/index.tsx

@@ -1,14 +1,16 @@
-import { Button, Card, Spacer } from '@nextui-org/react'
+import { Button, Card, Loading, Spacer } from '@nextui-org/react'
 import { EthereumProvider } from '@walletconnect/ethereum-provider'
 import type { EthereumProvider as IEthereumProvider } from '@walletconnect/ethereum-provider/dist/types/EthereumProvider'
 import { DEMO_SIGN_REQUEST } from 'laboratory/src/data/Constants'
 import { useEffect, useState } from 'react'
 import { NotificationCtrl } from '../../controllers/NotificationCtrl'
 import { getProjectId, getTheme } from '../../utilities/EnvUtil'
+import { getErrorMessage, showErrorToast } from '../../utilities/ErrorUtil'
 
 export default function WithEthereumProvider() {
   const [providerClient, setProviderClient] = useState<IEthereumProvider | undefined>(undefined)
   const [session, setSession] = useState<boolean>(false)
+  const [disconnecting, setDisconnecting] = useState<boolean>(false)
 
   async function onInitializeProviderClient() {
     const client = await EthereumProvider.init({
@@ -27,33 +29,52 @@ export default function WithEthereumProvider() {
 
   async function onConnect() {
     if (providerClient) {
-      await providerClient.connect()
-      setSession(true)
-      NotificationCtrl.open('Connect', JSON.stringify(providerClient.session, null, 2))
+      try {
+        await providerClient.connect()
+        setSession(true)
+        NotificationCtrl.open('Connect', JSON.stringify(providerClient.session, null, 2))
+      } catch (error) {
+        const message = getErrorMessage(error)
+        showErrorToast(message)
+      }
     } else {
-      throw new Error('providerClient is not initialized')
+      showErrorToast('providerClient is not initialized')
     }
   }
 
   async function onDisconnect() {
-    if (providerClient) {
-      await providerClient.disconnect()
-      setSession(false)
-    } else {
-      throw new Error('providerClient is not initialized')
+    if (!disconnecting) {
+      if (providerClient) {
+        setDisconnecting(true)
+        try {
+          await providerClient.disconnect()
+        } catch (error) {
+          const message = getErrorMessage(error)
+          showErrorToast(message)
+        }
+        setDisconnecting(false)
+        setSession(false)
+      } else {
+        showErrorToast('providerClient is not initialized')
+      }
     }
   }
 
   async function onSignMessage() {
     if (providerClient?.session) {
-      const { request } = DEMO_SIGN_REQUEST(
-        providerClient.session.topic,
-        providerClient.accounts[0]
-      )
-      const result = await providerClient.request(request)
-      NotificationCtrl.open('Sign Message', JSON.stringify(result, null, 2))
+      try {
+        const { request } = DEMO_SIGN_REQUEST(
+          providerClient.session.topic,
+          providerClient.accounts[0]
+        )
+        const result = await providerClient.request(request)
+        NotificationCtrl.open('Sign Message', JSON.stringify(result, null, 2))
+      } catch (error) {
+        const message = getErrorMessage(error)
+        showErrorToast(message)
+      }
     } else {
-      throw new Error('providerClient is not initialized')
+      showErrorToast('providerClient is not initialized')
     }
   }
 
@@ -80,8 +101,8 @@ export default function WithEthereumProvider() {
                   Sign Message
                 </Button>
                 <Spacer />
-                <Button shadow color="error" onPress={onDisconnect}>
-                  Disconnect
+                <Button shadow color="error" onPress={onDisconnect} disabled={disconnecting}>
+                  {disconnecting ? <Loading size="xs" color={'white'} /> : 'Disconnect'}
                 </Button>
               </>
             ) : (

laboratory/src/pages/with-sign-api/html.tsx

@@ -1,46 +1,50 @@
-import { Button, Card, Spacer } from '@nextui-org/react'
+import { Button, Card, Loading, Spacer } from '@nextui-org/react'
 import type { WalletConnectModalSignSession } from '@walletconnect/modal-sign-html'
 import { WalletConnectModalSign } from '@walletconnect/modal-sign-html'
 import { getAddressFromAccount, getSdkError } from '@walletconnect/utils'
 import { useEffect, useState } from 'react'
 import { NotificationCtrl } from '../../controllers/NotificationCtrl'
 import { DEMO_METADATA, DEMO_NAMESPACE, DEMO_SIGN_REQUEST } from '../../data/Constants'
 import { getProjectId, getTheme } from '../../utilities/EnvUtil'
+import { getErrorMessage, showErrorToast } from '../../utilities/ErrorUtil'
 
 const web3ModalSign = new WalletConnectModalSign({
   projectId: getProjectId(),
-  modalOptions: {
-    themeMode: getTheme(),
-    mobileWallets: [
-      {
-        id: 'metamask',
-        name: 'MetaMask',
-        links: {
-          native: 'metamask://',
-          universal: ''
-        }
-      }
-    ]
-  },
+  modalOptions: { themeMode: getTheme() },
   metadata: DEMO_METADATA
 })
 
 export default function WithSignHtmlPage() {
   const [session, setSession] = useState<WalletConnectModalSignSession | undefined>(undefined)
+  const [disconnecting, setDisconnecting] = useState<boolean>(false)
 
   async function onConnect() {
-    const result = await web3ModalSign.connect(DEMO_NAMESPACE)
-    setSession(result)
-    NotificationCtrl.open('Connect', JSON.stringify(result, null, 2))
+    try {
+      const result = await web3ModalSign.connect(DEMO_NAMESPACE)
+      setSession(result)
+      NotificationCtrl.open('Connect', JSON.stringify(result, null, 2))
+    } catch (error) {
+      const message = getErrorMessage(error)
+      showErrorToast(message)
+    }
   }
 
   async function onDisconnect() {
-    if (session) {
-      await web3ModalSign.disconnect({
-        topic: session.topic,
-        reason: getSdkError('USER_DISCONNECTED')
-      })
-      setSession(undefined)
+    if (!disconnecting) {
+      if (session) {
+        setDisconnecting(true)
+        try {
+          await web3ModalSign.disconnect({
+            topic: session.topic,
+            reason: getSdkError('USER_DISCONNECTED')
+          })
+        } catch (error) {
+          const message = getErrorMessage(error)
+          showErrorToast(message)
+        }
+        setDisconnecting(false)
+        setSession(undefined)
+      }
     }
   }
 
@@ -54,14 +58,20 @@ export default function WithSignHtmlPage() {
         NotificationCtrl.open('Sign Message', 'No active session, please connect first')
       }
     } catch (error) {
-      NotificationCtrl.open('Sign Message', JSON.stringify(error))
+      const message = getErrorMessage(error)
+      showErrorToast(message)
     }
   }
 
   useEffect(() => {
     async function init() {
-      const result = await web3ModalSign.getSession()
-      setSession(result)
+      try {
+        const result = await web3ModalSign.getSession()
+        setSession(result)
+      } catch (error) {
+        const message = getErrorMessage(error)
+        showErrorToast(message)
+      }
     }
 
     function deleteSession() {
@@ -86,8 +96,8 @@ export default function WithSignHtmlPage() {
                 Sign Message
               </Button>
               <Spacer />
-              <Button shadow color="error" onPress={onDisconnect}>
-                Disconnect
+              <Button shadow color="error" onPress={onDisconnect} disabled={disconnecting}>
+                {disconnecting ? <Loading size="xs" color={'white'} /> : 'Disconnect'}
               </Button>
             </>
           ) : (