Add alph_signAndSubmitUnsignedTx

src/components/TokenDapp.tsx

@@ -7,6 +7,7 @@ import {
   mintToken,
   TokenBalance,
   transferToken,
+  transferTokenSignAndSubmitUnsignedTx,
   withdrawMintedToken
 } from "../services/token.service"
 import {
@@ -172,6 +173,23 @@ export const TokenDapp: FC<{
     }
   }
 
+  const handleTransferSubmitUnsignedTx = async (e: React.FormEvent) => {
+    try {
+      e.preventDefault()
+      setTransactionStatus("approve")
+
+      console.log("transfer", { transferTo, transferAmount })
+      const result = await transferTokenSignAndSubmitUnsignedTx(alephium, transferTokenAddress, transferTo, transferAmount)
+      console.log(result)
+
+      setLastTransactionHash(result.txId)
+      setTransactionStatus("pending")
+    } catch (e) {
+      console.error(e)
+      setTransactionStatus("idle")
+    }
+  }
+
   const handleDestroyTokenSubmit = async (e: React.FormEvent) => {
     try {
       e.preventDefault()
@@ -404,6 +422,38 @@ export const TokenDapp: FC<{
           <br />
           <input type="submit" disabled={buttonsDisabled} value="Transfer" />
         </form>
+        <form onSubmit={handleTransferSubmitUnsignedTx}>
+          <h2 className={styles.title}>Transfer token (sign & submit unsigned tx)</h2>
+
+          <label htmlFor="transfer-token-address">Token Id</label>
+          <input
+            type="text"
+            id="transfer-to"
+            name="fname"
+            value={transferTokenAddress}
+            onChange={(e) => setTransferTokenAddress(e.target.value)}
+          />
+
+          <label htmlFor="transfer-to">To</label>
+          <input
+            type="text"
+            id="transfer-to"
+            name="fname"
+            value={transferTo}
+            onChange={(e) => setTransferTo(e.target.value)}
+          />
+
+          <label htmlFor="transfer-amount">Amount</label>
+          <input
+            type="number"
+            id="transfer-amount"
+            name="fname"
+            value={transferAmount}
+            onChange={(e) => setTransferAmount(e.target.value)}
+          />
+          <br />
+          <input type="submit" disabled={buttonsDisabled} value="Transfer" />
+        </form>
         <form onSubmit={handleDestroyTokenSubmit}>
           <h2 className={styles.title}>Destroy token contract</h2>
 

src/services/token.service.ts

@@ -1,5 +1,5 @@
 import * as web3 from '@alephium/web3'
-import { binToHex, contractIdFromAddress, DUST_AMOUNT, stringToHex } from '@alephium/web3'
+import { binToHex, contractIdFromAddress, DUST_AMOUNT, stringToHex, TransactionBuilder } from '@alephium/web3'
 import { Destroy, ShinyToken, ShinyTokenInstance, Transfer } from '../../artifacts/ts'
 import { setCurrentNodeProvider } from '@alephium/web3/dist/src/global'
 
@@ -124,6 +124,43 @@ export const transferToken = async (
   })
 }
 
+export const transferTokenSignAndSubmitUnsignedTx = async (
+  alephium: web3.SignerProvider | undefined,
+  tokenId: string,
+  transferTo: string,
+  transferAmount: string
+): Promise<web3.SignTransferTxResult> => {
+  if (alephium === undefined) {
+    throw Error("alephium object not initialized");
+  }
+
+  const builder = TransactionBuilder.from(alephium.nodeProvider!);
+  const account = await alephium.getSelectedAccount();
+  const buildResult = await builder.buildTransferTx(
+    {
+      signerAddress: account.address,
+      destinations: [
+        {
+          address: transferTo,
+          attoAlphAmount: DUST_AMOUNT,
+          tokens: [
+            {
+              id: tokenId,
+              amount: BigInt(transferAmount),
+            },
+          ],
+        },
+      ],
+    },
+    account.publicKey
+  );
+
+  return await alephium.signAndSubmitUnsignedTx({
+    signerAddress: account.address,
+    unsignedTx: buildResult.unsignedTx,
+  });
+};
+
 export const destroyTokenContract = async (
   alephium: web3.SignerProvider | undefined,
   tokenId: string,