Use standalone modal (#14)

* Use standalone modal

* v0.2.3-canary.7

* Covert deps to be peer deps

* v0.2.3-canary.8

* v0.2.3-canary.9

* v0.2.3-canary.10

* v0.2.3-canary.11

* v0.2.3-canary.12

* Update dynamic import

* v0.2.3-canary.13

* v0.2.3-canary.14

* v0.2.3-canary.15

* v0.2.3-canary.16

* v0.2.3-canary.17

* v0.2.3-canary.18

* v0.2.3-canary.19

* v0.2.3-canary.20

* v0.2.3-canary.21

* v0.2.3-canary.22

* prep canary 24

* v0.2.3-canary.23

* Fix nextjs errors

* v0.2.3-canary.24

* Use canary in next app

* Amend docs to mention installation

* v0.2.3-canary.25

* Cleanup code per PR comments

* Fix projectId

* v0.2.3-canary.26

* Update next app to use qrcode

docs/docs/Installation/index.md

@@ -11,3 +11,20 @@ npm install --save @walletconnect/solib
 ```bash
 yarn add @walletconnect/solib
 ```
+
+### Note on QRCodes and Web3Modal's standalone modal
+If you plan on setting `qrcode: false` and handling QRCode display yourself when
+using `WalletConnectConnector`, be sure to mark the web3modal dependencies as external in the rollup or webpack config.
+They are peer dependencies and are not downloaded automatically, and need to be
+marked as such to avoid import analysis tools false flagging them.
+
+Example in vite
+```json
+export default defineConfig({
+  rollupOptions: {
+    external: ["@web3modal/core", "@web3modal/ui"]
+  },
+  plugins: [react()],
+});
+
+```

example-next/package.json

@@ -12,7 +12,7 @@
     "@chakra-ui/react": "^2.3.5",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@walletconnect/solib": "^0.2.3-canary.4",
+    "@walletconnect/solib": "^0.2.3-canary.26",
     "events": "^3.3.0",
     "framer-motion": "^7.5.2",
     "next": "12.3.1",

example-next/pages/index.tsx

@@ -1,4 +1,3 @@
-import type { NextPage } from 'next'
 import {
   connect,
   signMessage,
@@ -11,8 +10,6 @@ import {
   getFeeForMessage,
   getTransaction,
   watchTransaction,
-  getNetwork,
-  watchNetwork,
   fetchName,
   fetchAddressFromDomain,
   getAccount
@@ -32,7 +29,7 @@ import {
   useToast
 } from '@chakra-ui/react'
 
-function Home(): NextPage {
+function Home() {
   const toast = useToast()
   console.log('Phantom is ready', getConnectorIsAvailable(PhantomConnector.connectorName()))
   const [address, setAddress] = useState<string | undefined>('')
@@ -45,17 +42,17 @@ function Home(): NextPage {
 
   useEffect(() => {
     console.log('ya hey')
-    watchAddress(address => {
-      console.log('Got address', address)
-      setAddress(address)
+    watchAddress(address2 => {
+      console.log('Got address', address2)
+      setAddress(address2)
     })
   }, [setAddress])
 
   useEffect(() => {
     if (address) {
-      getBalance().then(value => setBalance((value && value.decimals.toString()) || '0'))
-      fetchName('FidaeBkZkvDqi1GXNEwB8uWmj9Ngx2HXSS5nyGRuVFcZ').then(name => {
-        setName(name?.reverse || address!)
+      getBalance().then(value => setBalance(value?.decimals.toString() ?? '0'))
+      fetchName('FidaeBkZkvDqi1GXNEwB8uWmj9Ngx2HXSS5nyGRuVFcZ').then(name2 => {
+        setName(name2?.reverse ?? address)
       })
       fetchAddressFromDomain('bonfida.sol').then(addr => {
         console.log({ addressFromDomain: addr })
@@ -70,12 +67,11 @@ function Home(): NextPage {
     })
   }, [])
 
-  const onSign = useCallback((message: string | undefined) => {
-    if (message) {
-      signMessage(message).then(signature => {
-        setSignature(signature!)
+  const onSign = useCallback((message2: string | undefined) => {
+    if (message2)
+      signMessage(message2).then(signature2 => {
+        setSignature(signature2 ?? '')
       })
-    }
   }, [])
 
   const onSendTransaction = useCallback(
@@ -88,22 +84,22 @@ function Home(): NextPage {
         feePayer: 'from'
       }).then(fee => console.log({ fee }))
 
-      if (to && amountInLamports) {
+      if (to && amountInLamports)
         signAndSendTransaction('transfer', {
           to,
           amountInLamports,
           feePayer: 'from'
         }).then(async result => {
           console.log({ result })
-          await watchTransaction(result!, () => {
-            getTransaction(result!).then(tra => console.log({ tra }))
-            toast({
-              status: 'success',
-              title: 'Transaction successful'
+          if (result)
+            await watchTransaction(result, () => {
+              getTransaction(result).then(tra => console.log({ tra }))
+              toast({
+                status: 'success',
+                title: 'Transaction successful'
+              })
             })
-          })
         })
-      }
     },
     [toast]
   )
@@ -121,7 +117,7 @@ function Home(): NextPage {
             <Badge fontSize="1em" fontStyle={'italic'}>
               Balance: {balance}
             </Badge>
-            <Button onClick={() => disconnect()}>Disconnect</Button>
+            <Button onClick={async () => disconnect()}>Disconnect</Button>
           </Flex>
         )}
         {address && (
@@ -148,7 +144,7 @@ function Home(): NextPage {
                   </NumberInputStepper>
                 </NumberInput>
               </Flex>
-              <Button onClick={() => onSendTransaction(toAddress!, amount)}>
+              <Button onClick={() => onSendTransaction(toAddress ?? '', amount)}>
                 Send Transaction
               </Button>
             </Flex>