feat: v1 alignment (#525)

Author: darioAnongba

packages/site/package.json

@@ -29,7 +29,7 @@
     ]
   },
   "dependencies": {
-    "@metamask/keyring-api": "^20.0.0",
+    "@metamask/keyring-api": "^20.1.1",
     "@metamask/providers": "^22.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/site/src/components/Buttons.tsx

@@ -123,6 +123,12 @@ export const SendBitcoinButton = (
   return <Button {...props}>Send txn</Button>;
 };
 
+export const SignMessageButton = (
+  props: ComponentPropsWithoutRef<'button'>,
+) => {
+  return <Button {...props}>Sign message</Button>;
+};
+
 export const EstimateFeeButton = (
   props: ComponentPropsWithoutRef<'button'>,
 ) => {

packages/site/src/components/EstimateFeeCard.tsx

@@ -1,54 +1,78 @@
+import type { KeyringAccount } from '@metamask/keyring-api';
 import { BtcMethod } from '@metamask/keyring-api';
+import { useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 
 import { Card, SendBitcoinButton } from '.';
 import { useInvokeKeyring } from '../hooks';
 
-export const SendBitcoinCard = ({
-  enabled,
-  fullWidth,
-  scope,
-  account,
-  address,
-}: {
-  enabled: boolean;
-  fullWidth: boolean;
-  scope: string;
-  account: string;
-  address: string;
-}) => {
+export const SendBitcoinCard = ({ account }: { account: KeyringAccount }) => {
   const invokeKeyring = useInvokeKeyring();
+  const [address, setAddress] = useState(
+    'bc1q4degm5k044n9xv3ds7d8l6hfavydte6wn6sesw',
+  );
+  const [amount, setAmount] = useState('0.00000500');
 
   const handleClick = async () => {
-    await invokeKeyring({
+    const response = (await invokeKeyring({
       method: 'keyring_submitRequest',
       params: {
-        account,
+        account: account.id,
         id: uuidV4(),
-        scope,
+        scope: account.scopes[0],
+        origin: 'http://localhost:3000',
         request: {
-          method: `${BtcMethod.SendBitcoin}`,
+          method: `${BtcMethod.SendTransfer}`,
           params: {
-            recipients: {
-              [address]: '0.00000500',
-            },
-            replaceable: true,
-            dryrun: true,
+            recipients: [
+              {
+                amount,
+                address,
+              },
+            ],
           },
         },
       },
-    });
+    })) as { result: { txid: string } };
+
+    console.log(response.result.txid);
   };
 
   return (
     <Card
       content={{
-        title: 'Send Btc',
-        description: `Send Btc`,
-        button: <SendBitcoinButton onClick={handleClick} disabled={!enabled} />,
+        title: 'Send BTC',
+        description: (
+          <div>
+            From: {account.address}
+            <br />
+            Scope: {account.scopes[0]}
+            <br />
+            <br />
+            <label>
+              To:
+              <input
+                type="text"
+                value={address}
+                onChange={(changeEvent) => setAddress(changeEvent.target.value)}
+                style={{ marginLeft: '10px', width: '400px' }}
+              />
+            </label>
+            <br />
+            <label>
+              Amount:
+              <input
+                type="text"
+                value={amount}
+                onChange={(changeEvent) => setAmount(changeEvent.target.value)}
+                style={{ marginLeft: '10px' }}
+              />
+            </label>
+          </div>
+        ),
+        button: <SendBitcoinButton onClick={handleClick} />,
       }}
-      disabled={!enabled}
-      fullWidth={fullWidth}
+      fullWidth
     />
   );
 };