From f101f79d180c17aa9dc1d798ef795c246ee192df Mon Sep 17 00:00:00 2001
From: Felipe Mendes <zo.fmendes@gmail.com>
Date: Thu, 28 Nov 2024 09:58:43 -0300
Subject: [PATCH] refactor: split bitcoin tests in different components and add
 inputs

---
 .../Bitcoin/BitcoinSendTransferTest.tsx       |  67 +++++++++
 .../Bitcoin/BitcoinSignMessageTest.tsx        |  59 ++++++++
 .../Bitcoin/BitcoinSignPSBTTest.tsx           |  79 +++++++++++
 .../src/components/Bitcoin/BitcoinTests.tsx   |  53 +++++++
 apps/laboratory/src/pages/library/bitcoin.tsx | 132 +-----------------
 5 files changed, 263 insertions(+), 127 deletions(-)
 create mode 100644 apps/laboratory/src/components/Bitcoin/BitcoinSendTransferTest.tsx
 create mode 100644 apps/laboratory/src/components/Bitcoin/BitcoinSignMessageTest.tsx
 create mode 100644 apps/laboratory/src/components/Bitcoin/BitcoinSignPSBTTest.tsx
 create mode 100644 apps/laboratory/src/components/Bitcoin/BitcoinTests.tsx

diff --git a/apps/laboratory/src/components/Bitcoin/BitcoinSendTransferTest.tsx b/apps/laboratory/src/components/Bitcoin/BitcoinSendTransferTest.tsx
new file mode 100644
index 0000000000..fb2d2c7006
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/apps/laboratory/src/components/Bitcoin/BitcoinSignMessageTest.tsx b/apps/laboratory/src/components/Bitcoin/BitcoinSignMessageTest.tsx
new file mode 100644
index 0000000000..b076c8b7d6
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/apps/laboratory/src/components/Bitcoin/BitcoinSignPSBTTest.tsx b/apps/laboratory/src/components/Bitcoin/BitcoinSignPSBTTest.tsx
new file mode 100644
index 0000000000..55df912c94
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/apps/laboratory/src/components/Bitcoin/BitcoinTests.tsx b/apps/laboratory/src/components/Bitcoin/BitcoinTests.tsx
new file mode 100644
index 0000000000..ebf6a21623
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/laboratory/src/pages/library/bitcoin.tsx b/apps/laboratory/src/pages/library/bitcoin.tsx
index 27534cdd37..a0550106db 100644
--- a/apps/laboratory/src/pages/library/bitcoin.tsx
+++ b/apps/laboratory/src/pages/library/bitcoin.tsx
@@ -1,19 +1,12 @@
-import {
-  createAppKit,
-  useAppKitAccount,
-  useAppKitProvider,
-  type CaipNetwork,
-  useAppKitNetwork
-} from '@reown/appkit/react'
+import { createAppKit, type CaipNetwork } from '@reown/appkit/react'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 
 import { AppKitButtons } from '../../components/AppKitButtons'
 
-import { BitcoinAdapter, type BitcoinConnector } from '@reown/appkit-adapter-bitcoin'
-import { Button, Stack, useToast } from '@chakra-ui/react'
-import { useState } from 'react'
-import { BitcoinUtil } from '../../utils/BitcoinUtil'
+import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
+
+import { BitcoinTests } from '../../components/Bitcoin/BitcoinTests'
 
 const networks = ConstantsUtil.BitcoinNetworks
 
@@ -38,125 +31,10 @@ const appkit = createAppKit({
 ThemeStore.setModal(appkit)
 
 export default function MultiChainBitcoinAdapterOnly() {
-  const { walletProvider } = useAppKitProvider<BitcoinConnector>('bip122')
-  const { address } = useAppKitAccount()
-  const { caipNetwork } = useAppKitNetwork()
-
-  const [loading, setLoading] = useState(false)
-
-  const toast = useToast()
-  async function signMessage() {
-    if (!walletProvider || !address) {
-      toast({
-        title: 'No connection detected',
-        status: 'error',
-        isClosable: true
-      })
-
-      return
-    }
-
-    setLoading(true)
-
-    try {
-      const signature = await walletProvider.signMessage({
-        address,
-        message: 'Hello, World!'
-      })
-      toast({ title: 'Signature', description: signature, status: 'success' })
-    } catch (error) {
-      toast({ title: 'Error', description: (error as Error).message, status: 'error' })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  async function sendTransfer() {
-    if (!walletProvider) {
-      toast({
-        title: 'No wallet provider',
-        status: 'error',
-        isClosable: true
-      })
-    }
-
-    try {
-      const signature = await walletProvider.sendTransfer({
-        recipient: 'bc1qcer94ntpu33lcj0fnave79lu8tghkll47eeu9u',
-        amount: '100000'
-      })
-
-      toast({
-        title: `Transfer sent: ${signature}`,
-        status: 'success',
-        isClosable: true
-      })
-    } catch (error) {
-      toast({ title: 'Error', description: (error as Error).message, status: 'error' })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  async function signPSBT() {
-    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: 100,
-        feeRate,
-        network: caipNetwork,
-        recipientAddress: address,
-        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 (
     <>
       <AppKitButtons />
-      {address && (
-        <Stack direction={['column', 'column', 'row']} pt="8">
-          <Button data-testid="sign-transaction-button" onClick={signMessage} isDisabled={loading}>
-            Sign Message
-          </Button>
-          <Button data-testid="send-transfer-button" onClick={sendTransfer} isDisabled={loading}>
-            Send Transfer
-          </Button>
-          <Button data-testid="sign-psbt-button" onClick={signPSBT} isDisabled={loading}>
-            Sign PSBT
-          </Button>
-        </Stack>
-      )}
+      <BitcoinTests />
     </>
   )
 }