fix: test runner cannot find element when wrapped with another element

.github/workflows/ui_tests.yml

@@ -95,6 +95,7 @@ jobs:
       - name: Run canary with minimal environment config
         env:
           NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+          MAILSAC_API_KEY: ${{ secrets.TESTS_MAILSEC_API_KEY }}
           CI: true
         working-directory: ./apps/laboratory/
         run: npm run playwright:test:canary

apps/laboratory/package.json

@@ -39,6 +39,7 @@
     "next-auth": "4.24.5",
     "react-icons": "4.12.0",
     "siwe": "2.1.4",
+    "sonner": "1.4.41",
     "valtio": "1.11.2",
     "viem": "2.9.3",
     "wagmi": "2.5.7"

apps/laboratory/src/components/Ethers/EthersSignMessageTest.tsx

@@ -1,10 +1,10 @@
-import { Button, useToast } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner } from 'ethers'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { toast } from 'sonner'
 
 export function EthersSignMessageTest() {
-  const toast = useToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
 
@@ -16,18 +16,12 @@ export function EthersSignMessageTest() {
       const provider = new BrowserProvider(walletProvider, chainId)
       const signer = new JsonRpcSigner(provider, address)
       const signature = await signer?.signMessage('Hello Web3Modal Ethers')
-      toast({
-        title: ConstantsUtil.SigningSucceededToastTitle,
-        description: signature,
-        status: 'success',
-        isClosable: true
+      toast.success(ConstantsUtil.SigningSucceededToastTitle, {
+        description: signature
       })
     } catch {
-      toast({
-        title: ConstantsUtil.SigningFailedToastTitle,
-        description: 'Failed to sign message',
-        status: 'error',
-        isClosable: true
+      toast.error(ConstantsUtil.SigningFailedToastTitle, {
+        description: 'Failed to sign message'
       })
     }
   }

apps/laboratory/src/components/Ethers/EthersSignTypedDataTest.tsx

@@ -1,7 +1,8 @@
-import { Button, useToast } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner } from 'ethers'
 import type { TypedDataField } from 'ethers'
+import { toast } from 'sonner'
 
 const types: Record<string, TypedDataField[]> = {
   Person: [
@@ -28,7 +29,6 @@ const message = {
 } as const
 
 export function EthersSignTypedDataTest() {
-  const toast = useToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
 
@@ -48,13 +48,10 @@ export function EthersSignTypedDataTest() {
 
       const signature = await signer?.signTypedData(domain, types, message)
 
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast.success('Success', { description: signature })
     } catch {
-      toast({
-        title: 'Error',
-        description: 'Failed to sign message',
-        status: 'error',
-        isClosable: true
+      toast.error('Error', {
+        description: 'Failed to sign message'
       })
     }
   }

apps/laboratory/src/components/Ethers/EthersTransactionTest.tsx

@@ -1,12 +1,12 @@
-import { Button, useToast, Stack, Link, Text, Spacer } from '@chakra-ui/react'
+import { Button, Stack, Link, Text, Spacer } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner, ethers } from 'ethers'
 import { sepolia, optimism } from '../../utils/ChainsUtil'
 import { useState } from 'react'
 import { vitalikEthAddress } from '../../utils/DataUtil'
+import { toast } from 'sonner'
 
 export function EthersTransactionTest() {
-  const toast = useToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
   const [loading, setLoading] = useState(false)
@@ -23,13 +23,10 @@ export function EthersTransactionTest() {
         to: vitalikEthAddress,
         value: ethers.parseUnits('0.0001', 'gwei')
       })
-      toast({ title: 'Succcess', description: tx.hash, status: 'success', isClosable: true })
+      toast.success('Success', { description: tx.hash })
     } catch {
-      toast({
-        title: 'Error',
-        description: 'Failed to sign transaction',
-        status: 'error',
-        isClosable: true
+      toast.error('Error', {
+        description: 'Failed to sign transaction'
       })
     } finally {
       setLoading(false)

apps/laboratory/src/components/Ethers/EthersWriteContractTest.tsx

@@ -1,13 +1,13 @@
-import { Button, useToast, Stack, Link, Text, Spacer } from '@chakra-ui/react'
+import { Button, Stack, Link, Text, Spacer } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner, ethers } from 'ethers'
 import { optimism, sepolia } from '../../utils/ChainsUtil'
 import { useState } from 'react'
+import { toast } from 'sonner'
 
 import { abi, address as donutAddress } from '../../utils/DonutContract'
 
 export function EthersWriteContractTest() {
-  const toast = useToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
   const [loading, setLoading] = useState(false)
@@ -23,13 +23,10 @@ export function EthersWriteContractTest() {
       const contract = new ethers.Contract(donutAddress, abi, signer)
       // @ts-expect-error ethers types are correct
       const tx = await contract.purchase(1, { value: ethers.parseEther('0.0001') })
-      toast({ title: 'Succcess', description: tx.hash, status: 'success', isClosable: true })
+      toast.success('Success', { description: tx.hash })
     } catch {
-      toast({
-        title: 'Error',
-        description: 'Failed to sign transaction',
-        status: 'error',
-        isClosable: true
+      toast.error('Error', {
+        description: 'Failed to sign transaction'
       })
     } finally {
       setLoading(false)

apps/laboratory/src/components/Solana/SolanaSendTransactionTest.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, useToast, Stack, Text, Spacer, Link } from '@chakra-ui/react'
+import { Button, Stack, Text, Spacer, Link } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react'
 import {
   PublicKey,
@@ -11,13 +11,13 @@ import {
 } from '@solana/web3.js'
 
 import { solana } from '../../utils/ChainsUtil'
+import { toast } from 'sonner'
 
 const PHANTOM_TESTNET_ADDRESS = 'EmT8r4E8ZjoQgt8sXGbaWBRMKfUXsVT1wonoSnJZ4nBn'
 const recipientAddress = new PublicKey(PHANTOM_TESTNET_ADDRESS)
 const amountInLamports = 100000000
 
 export function SolanaSendTransactionTest() {
-  const toast = useToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider, connection } = useWeb3ModalProvider()
   const [loading, setLoading] = useState(false)
@@ -53,13 +53,10 @@ export function SolanaSendTransactionTest() {
       transaction.recentBlockhash = blockhash
 
       const signature = await walletProvider.sendTransaction(transaction, connection as Connection)
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast.success('Success', { description: signature })
     } catch (err) {
-      toast({
-        title: 'Error',
-        description: (err as Error).message,
-        status: 'error',
-        isClosable: true
+      toast.error('Error', {
+        description: (err as Error).message
       })
     } finally {
       setLoading(false)
@@ -106,13 +103,10 @@ export function SolanaSendTransactionTest() {
         transactionV0,
         connection as Connection
       )
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast.success('Success', { description: signature })
     } catch (err) {
-      toast({
-        title: 'Error',
-        description: (err as Error).message,
-        status: 'error',
-        isClosable: true
+      toast.error('Error', {
+        description: (err as Error).message
       })
     } finally {
       setLoading(false)

apps/laboratory/src/components/Solana/SolanaSignMessageTest.tsx

@@ -1,11 +1,11 @@
-import { Button, useToast } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
+import { toast } from 'sonner'
 
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react'
 
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 
 export function SolanaSignMessageTest() {
-  const toast = useToast()
   const { address } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
 
@@ -20,27 +20,20 @@ export function SolanaSignMessageTest() {
 
       // Backpack has specific signature format now
       if ((signature as { signature: Uint8Array }).signature) {
-        toast({
-          title: ConstantsUtil.SigningSucceededToastTitle,
-          description: (signature as { signature: Uint8Array }).signature,
-          status: 'success',
-          isClosable: true
+        toast(ConstantsUtil.SigningSucceededToastTitle, {
+          description: (signature as { signature: Uint8Array }).signature
+        })
+        toast.success('Success', {
+          description: (signature as { signature: Uint8Array }).signature
         })
 
         return
       }
-      toast({
-        title: ConstantsUtil.SigningSucceededToastTitle,
-        description: signature as Uint8Array,
-        status: 'success',
-        isClosable: true
-      })
+
+      toast.success('Success', { description: signature as Uint8Array })
     } catch (err) {
-      toast({
-        title: ConstantsUtil.SigningFailedToastTitle,
-        description: 'Failed to sign message',
-        status: 'error',
-        isClosable: true
+      toast.error(ConstantsUtil.SigningFailedToastTitle, {
+        description: 'Failed to sign message'
       })
     }
   }

apps/laboratory/src/components/Solana/SolanaSignTransactionTest.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { Button, useToast, Stack, Text, Spacer, Link } from '@chakra-ui/react'
+import { Button, Stack, Text, Spacer, Link } from '@chakra-ui/react'
+import { toast } from 'sonner'
 import {
   PublicKey,
   Transaction,
@@ -17,7 +18,6 @@ const recipientAddress = new PublicKey(PHANTOM_DEVNET_ADDRESS)
 const amountInLamports = 100000000
 
 export function SolanaSignTransactionTest() {
-  const toast = useToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider, connection } = useWeb3ModalProvider()
   const [loading, setLoading] = useState(false)
@@ -48,13 +48,10 @@ export function SolanaSignTransactionTest() {
       const tx = await walletProvider.signTransaction(transaction)
       const signature = tx.signatures[0]?.signature
 
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast.success('Success', { description: signature })
     } catch (err) {
-      toast({
-        title: 'Error',
-        description: 'Failed to sign transaction',
-        status: 'error',
-        isClosable: true
+      toast.error('Error', {
+        description: 'Failed to sign transaction'
       })
     } finally {
       setLoading(false)
@@ -93,13 +90,10 @@ export function SolanaSignTransactionTest() {
       const tx = await walletProvider.signTransaction(transactionV0)
       const signature = tx.signatures[0]?.signature
 
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast.success('Success', { description: signature })
     } catch (err) {
-      toast({
-        title: 'Error',
-        description: 'Failed to sign transaction',
-        status: 'error',
-        isClosable: true
+      toast.error('Error', {
+        description: 'Failed to sign transaction'
       })
     } finally {
       setLoading(false)

apps/laboratory/src/components/Wagmi/WagmiSendUSDCTest.tsx

@@ -1,4 +1,6 @@
-import { Button, useToast, Stack, Link, Text, Spacer, Input } from '@chakra-ui/react'
+import { Button, Stack, Link, Text, Spacer, Input } from '@chakra-ui/react'
+import { toast } from 'sonner'
+
 import { useAccount, useWriteContract } from 'wagmi'
 import { useCallback, useState } from 'react'
 import { optimism, sepolia } from 'wagmi/chains'
@@ -35,26 +37,17 @@ export function WagmiSendUSDCTest() {
   const [address, setAddress] = useState('')
   const [amount, setAmount] = useState('')
   const { status, chain } = useAccount()
-  const toast = useToast()
 
   const { writeContract } = useWriteContract({
     mutation: {
       onSuccess: hash => {
         setLoading(false)
-        toast({
-          title: 'Transaction Success',
-          description: hash,
-          status: 'success',
-          isClosable: true
-        })
+        toast.success('Transaction Success', { description: hash })
       },
       onError: () => {
         setLoading(false)
-        toast({
-          title: 'Error',
-          description: 'Failed to send transaction',
-          status: 'error',
-          isClosable: true
+        toast.error('Error', {
+          description: 'Failed to send transaction'
         })
       }
     }

apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx

@@ -1,28 +1,20 @@
-import { Button, useToast } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
+import { toast } from 'sonner'
 import { useSignMessage, useAccount } from 'wagmi'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 
 export function WagmiSignMessageTest() {
-  const toast = useToast()
   const { signMessageAsync } = useSignMessage()
   const { status } = useAccount()
   const isConnected = status === 'connected'
 
   async function onSignMessage() {
     try {
       const signature = await signMessageAsync({ message: 'Hello Web3Modal!' })
-      toast({
-        title: ConstantsUtil.SigningSucceededToastTitle,
-        description: signature,
-        status: 'success',
-        isClosable: true
-      })
+      toast.success(ConstantsUtil.SigningSucceededToastTitle, { description: signature })
     } catch {
-      toast({
-        title: ConstantsUtil.SigningFailedToastTitle,
-        description: 'Failed to sign message',
-        status: 'error',
-        isClosable: true
+      toast.error(ConstantsUtil.SigningFailedToastTitle, {
+        description: 'Failed to sign message'
       })
     }
   }