refactor: split bitcoin tests in different components and add inputs

apps/laboratory/src/components/Bitcoin/BitcoinSendTransferTest.tsx

@@ -0,0 +1,67 @@
+import { Box, Button, Input, InputGroup, InputLeftAddon, useToast } from '@chakra-ui/react'
+import type { BitcoinConnector } from '@reown/appkit-adapter-bitcoin'
+import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
+import { useState } from 'react'
+
+export function BitcoinSendTransferTest() {
+  const { walletProvider } = useAppKitProvider<BitcoinConnector>('bip122')
+  const { address } = useAppKitAccount()
+
+  const toast = useToast()
+  const [loading, setLoading] = useState(false)
+  const [recipient, setRecipient] = useState<string>(address || '')
+  const [amount, setAmount] = useState<string>('1500')
+
+  async function onSendTransfer() {
+    if (!walletProvider) {
+      toast({
+        title: 'No wallet provider',
+        status: 'error',
+        isClosable: true
+      })
+    }
+
+    try {
+      setLoading(true)
+      const signature = await walletProvider.sendTransfer({
+        recipient,
+        amount
+      })
+
+      toast({
+        title: `Transfer sent: ${signature}`,
+        status: 'success',
+        isClosable: true
+      })
+    } catch (error) {
+      toast({ title: 'Error', description: (error as Error).message, status: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Box display="flex" width="100%" gap="2" mb="2">
+        <InputGroup>
+          <InputLeftAddon>Recipient</InputLeftAddon>
+          <Input value={recipient} onChange={e => setRecipient(e.currentTarget.value)} />
+        </InputGroup>
+
+        <InputGroup>
+          <InputLeftAddon>Amount</InputLeftAddon>
+          <Input value={amount} onChange={e => setAmount(e.currentTarget.value)} type="number" />
+        </InputGroup>
+      </Box>
+
+      <Button
+        data-testid="send-transfer-button"
+        onClick={onSendTransfer}
+        width="auto"
+        isLoading={loading}
+      >
+        Send Transfer
+      </Button>
+    </>
+  )
+}

apps/laboratory/src/components/Bitcoin/BitcoinSignMessageTest.tsx

@@ -0,0 +1,59 @@
+import { Box, Button, Input, InputGroup, InputLeftAddon, useToast } from '@chakra-ui/react'
+import type { BitcoinConnector } from '@reown/appkit-adapter-bitcoin'
+import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
+import { useState } from 'react'
+
+export function BitcoinSignMessageTest() {
+  const { walletProvider } = useAppKitProvider<BitcoinConnector>('bip122')
+  const { address } = useAppKitAccount()
+
+  const toast = useToast()
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState<string>('Hello, World!')
+
+  async function onSignMessage() {
+    if (!walletProvider || !address) {
+      toast({
+        title: 'No connection detected',
+        status: 'error',
+        isClosable: true
+      })
+
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const signature = await walletProvider.signMessage({
+        address,
+        message
+      })
+      toast({ title: 'Signature', description: signature, status: 'success' })
+    } catch (error) {
+      toast({ title: 'Error', description: (error as Error).message, status: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Box display="flex" width="100%" gap="2" mb="2">
+        <InputGroup>
+          <InputLeftAddon>Message</InputLeftAddon>
+          <Input value={message} onChange={e => setMessage(e.currentTarget.value)} />
+        </InputGroup>
+      </Box>
+
+      <Button
+        data-testid="sign-message-button"
+        onClick={onSignMessage}
+        width="auto"
+        isLoading={loading}
+      >
+        Sign Message
+      </Button>
+    </>
+  )
+}

apps/laboratory/src/components/Bitcoin/BitcoinSignPSBTTest.tsx

@@ -0,0 +1,79 @@
+import { Box, Button, Input, InputGroup, InputLeftAddon, useToast } from '@chakra-ui/react'
+import type { BitcoinConnector } from '@reown/appkit-adapter-bitcoin'
+import { useAppKitAccount, useAppKitNetwork, useAppKitProvider } from '@reown/appkit/react'
+import { useState } from 'react'
+import { BitcoinUtil } from '../../utils/BitcoinUtil'
+
+export function BitcoinSignPSBTTest() {
+  const { walletProvider } = useAppKitProvider<BitcoinConnector>('bip122')
+  const { address } = useAppKitAccount()
+  const { caipNetwork } = useAppKitNetwork()
+
+  const toast = useToast()
+  const [loading, setLoading] = useState(false)
+  const [recipient, setRecipient] = useState<string>(address || '')
+  const [amount, setAmount] = useState<string>('1500')
+
+  async function onSignPSBT() {
+    if (!walletProvider || !address || !caipNetwork) {
+      toast({
+        title: 'No connection detected',
+        status: 'error',
+        isClosable: true
+      })
+
+      return
+    }
+
+    if (caipNetwork.chainNamespace !== 'bip122') {
+      toast({
+        title: 'The selected chain is not bip122',
+        status: 'error',
+        isClosable: true
+      })
+
+      return
+    }
+
+    try {
+      const utxos = await BitcoinUtil.getUTXOs(address, caipNetwork.caipNetworkId)
+      const feeRate = await BitcoinUtil.getFeeRate()
+
+      const params = BitcoinUtil.createSignPSBTParams({
+        amount: Number(amount),
+        feeRate,
+        network: caipNetwork,
+        recipientAddress: recipient,
+        senderAddress: address,
+        utxos
+      })
+
+      const signature = await walletProvider.signPSBT(params)
+      toast({ title: 'PSBT Signature', description: signature.psbt, status: 'success' })
+    } catch (error) {
+      toast({ title: 'Error', description: (error as Error).message, status: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Box display="flex" width="100%" gap="2" mb="2">
+        <InputGroup>
+          <InputLeftAddon>Recipient</InputLeftAddon>
+          <Input value={recipient} onChange={e => setRecipient(e.currentTarget.value)} />
+        </InputGroup>
+
+        <InputGroup>
+          <InputLeftAddon>Amount</InputLeftAddon>
+          <Input value={amount} onChange={e => setAmount(e.currentTarget.value)} type="number" />
+        </InputGroup>
+      </Box>
+
+      <Button data-testid="sign-psbt-button" onClick={onSignPSBT} width="auto" isLoading={loading}>
+        Sign PSBT
+      </Button>
+    </>
+  )
+}

apps/laboratory/src/components/Bitcoin/BitcoinTests.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { useAppKitAccount } from '@reown/appkit/react'
+import { StackDivider, Card, CardHeader, Heading, CardBody, Box, Stack } from '@chakra-ui/react'
+import { BitcoinSignMessageTest } from './BitcoinSignMessageTest'
+import { BitcoinSendTransferTest } from './BitcoinSendTransferTest'
+import { BitcoinSignPSBTTest } from './BitcoinSignPSBTTest'
+
+export function BitcoinTests() {
+  const [ready, setReady] = React.useState(false)
+
+  const { isConnected } = useAppKitAccount()
+
+  React.useEffect(() => {
+    setReady(true)
+  }, [])
+
+  if (!ready || !isConnected) {
+    return null
+  }
+
+  return (
+    <Card marginTop={10} marginBottom={10}>
+      <CardHeader>
+        <Heading size="md">Test Interactions</Heading>
+      </CardHeader>
+
+      <CardBody>
+        <Stack divider={<StackDivider />} spacing="4">
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Sign Message Test
+            </Heading>
+            <BitcoinSignMessageTest />
+          </Box>
+
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Sign PSBT Test
+            </Heading>
+            <BitcoinSignPSBTTest />
+          </Box>
+
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Send Transfer Test
+            </Heading>
+            <BitcoinSendTransferTest />
+          </Box>
+        </Stack>
+      </CardBody>
+    </Card>
+  )
+}