fix: modal not opening if no options provided (#2735)

reown-com · Aug 23, 2024 · d37bdb8 · d37bdb8
1 parent 9fcc69c
commit d37bdb8
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 6 deletions.
diff --git a/apps/laboratory/src/components/AppKitButtons.tsx b/apps/laboratory/src/components/AppKitButtons.tsx
@@ -1,6 +1,39 @@
-import { Stack, Card, CardHeader, Heading, CardBody, Box, StackDivider } from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+
+import { useWeb3Modal as useWeb3ModalEthers } from '@web3modal/ethers/react'
+import { useWeb3Modal as useWeb3ModalSolana } from '@web3modal/solana/react'
+import { useWeb3Modal as useWeb3ModalEthers5 } from '@web3modal/ethers5/react'
+import { useWeb3Modal as useWeb3ModalWagmi } from '@web3modal/wagmi/react'
+import {
+  Stack,
+  Card,
+  CardHeader,
+  Heading,
+  CardBody,
+  Box,
+  StackDivider,
+  Button
+} from '@chakra-ui/react'
 
 export function AppKitButtons() {
+  const { pathname } = useRouter()
+  const { open: openEthers } = useWeb3ModalEthers()
+  const { open: openSolana } = useWeb3ModalSolana()
+  const { open: openEthers5 } = useWeb3ModalEthers5()
+  const { open: openWagmi } = useWeb3ModalWagmi()
+
+  function openModalWithHook() {
+    if (pathname.includes('/solana')) {
+      openEthers()
+    } else if (pathname.includes('/ethers5')) {
+      openEthers5()
+    } else if (pathname.includes('/wagmi')) {
+      openWagmi()
+    } else if (pathname.includes('/ethers')) {
+      openSolana()
+    }
+  }
+
   return (
     <Card marginTop={10}>
       <CardHeader>
@@ -15,13 +48,20 @@ export function AppKitButtons() {
             </Heading>
             <w3m-button />
           </Box>
-
           <Box>
             <Heading size="xs" textTransform="uppercase" pb="2">
               Network Button
             </Heading>
             <w3m-network-button />
           </Box>
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Hooks Interactions
+            </Heading>
+            <Button data-testId="w3m-open-hook-button" onClick={openModalWithHook}>
+              Open
+            </Button>
+          </Box>
         </Stack>
       </CardBody>
     </Card>

diff --git a/apps/laboratory/src/components/Wagmi/WagmiTests.tsx b/apps/laboratory/src/components/Wagmi/WagmiTests.tsx
@@ -14,7 +14,6 @@ export function WagmiTests() {
       <CardHeader>
         <Heading size="md">Test Interactions</Heading>
       </CardHeader>
-
       <CardBody>
         <Stack divider={<StackDivider />} spacing="4">
           <Box>

diff --git a/apps/laboratory/tests/basic-tests.spec.ts b/apps/laboratory/tests/basic-tests.spec.ts
@@ -7,6 +7,12 @@ testM.describe('Modal only tests', () => {
     await modalPage.page.getByTestId('connect-button').click()
     await expect(modalPage.page.getByTestId('all-wallets')).toBeVisible()
   })
+
+  testM('Should be able to open modal with the open hook', async ({ modalPage }) => {
+    const openHookButton = modalPage.page.getByTestId('w3m-open-hook-button')
+    await openHookButton.click()
+    await expect(modalPage.page.getByTestId('all-wallets')).toBeVisible()
+  })
 })
 
 testMExternal.describe('External connectors tests', () => {

diff --git a/packages/base/utils/library/react/index.ts b/packages/base/utils/library/react/index.ts
@@ -82,9 +82,7 @@ export function useWeb3Modal() {
   }
 
   async function open(options?: OpenOptions) {
-    if (options) {
-      await modal?.open(options)
-    }
+    await modal?.open(options)
   }
 
   async function close() {