Merge pull request #66 from near-examples/updateExample

gagdiez · web-flow · commit a91c7faf86f1 · 2025-05-13T11:34:45.000+02:00
The example was updated to use sign from chainsing
diff --git a/src/components/Bitcoin.jsx b/src/components/Bitcoin.jsx
@@ -2,9 +2,9 @@ import { useState, useEffect } from "react";
 
 import { useDebounce } from "../hooks/debounce";
 import PropTypes from "prop-types";
-import { SIGNET_CONTRACT, MPC_CONTRACT, NetworkId } from "../config";
+import { SIGNET_CONTRACT, NetworkId } from "../config";
 import { useWalletSelector } from "@near-wallet-selector/react-hook";
-import { chainAdapters, utils } from "chainsig.js";
+import { chainAdapters } from "chainsig.js";
 import { bigIntToDecimal } from "../utils/bigIntToDecimal";
 
 const btcRpcAdapter = new chainAdapters.btc.BTCRpcAdapters.Mempool(
@@ -14,8 +14,9 @@ const btcRpcAdapter = new chainAdapters.btc.BTCRpcAdapters.Mempool(
 const Bitcoin = new chainAdapters.btc.Bitcoin({
   network: NetworkId,
   btcRpcAdapter,
-  contract: SIGNET_CONTRACT,
+  contract: SIGNET_CONTRACT
 })
+
 export function BitcoinView({ props: { setStatus } }) {
   const { signedAccountId, signAndSendTransactions } = useWalletSelector();
 
@@ -74,32 +75,17 @@ export function BitcoinView({ props: { setStatus } }) {
       "🕒 Asking MPC to sign the transaction, this might take a while..."
     );
     try {
-      const mpcTransactions = hashesToSign.map(
-        (hash) => ({
-          receiverId: MPC_CONTRACT,
-          actions: [
-            {
-              type: 'FunctionCall',
-              params: {
-                methodName: "sign",
-                args: {
-                  request: {
-                    payload: hash,
-                    path: derivationPath,
-                    key_version: 0,
-                  },
-                },
-                gas: "250000000000000",
-                deposit: 1,
-              },
-            },
-          ],
-        })
-      )
-
-      const sentTxs = await signAndSendTransactions({ transactions: mpcTransactions });
-      const rsvSignatures = sentTxs.map(tx => utils.cryptography.toRSV(tx))
-      
+
+      const rsvSignatures = await SIGNET_CONTRACT.sign({
+        payloads: hashesToSign,
+        path: derivationPath,
+        keyType: "Ecdsa",
+        signerAccount: { 
+          accountId: signedAccountId,
+          signAndSendTransactions 
+        }
+      });
+
       if (!rsvSignatures) {
         throw new Error("No signature received");
       }
diff --git a/src/components/EVM/EVM.jsx b/src/components/EVM/EVM.jsx
@@ -8,15 +8,14 @@ import Web3 from "web3";
 
 import { SIGNET_CONTRACT, MPC_CONTRACT } from "../../config";
 import { useWalletSelector } from "@near-wallet-selector/react-hook";
-import { chainAdapters, utils } from "chainsig.js";
+import { chainAdapters } from "chainsig.js";
 import { createPublicClient, http } from "viem";
 import { bigIntToDecimal } from "../../utils/bigIntToDecimal";
 
-
 export function EVMView({
   props: { setStatus, rpcUrl, contractAddress, explorerUrl },
 }) {
-  const { callFunction, signedAccountId } = useWalletSelector();
+  const { signedAccountId, signAndSendTransactions } = useWalletSelector();
 
   const [loading, setLoading] = useState(false);
   const [step, setStep] = useState("request");
@@ -26,7 +25,6 @@ export function EVMView({
   const [action, setAction] = useState("transfer");
   const [derivation, setDerivation] = useState("ethereum-1");
   const [signedTransaction, setSignedTransaction] = useState(null);
-
   const [gasPriceInGwei, setGasPriceInGwei] = useState("");
   const [txCost, setTxCost] = useState("");
 
@@ -38,10 +36,10 @@ export function EVMView({
     transport: http(rpcUrl),
   });
 
-  const Evm = new chainAdapters.evm.EVM({
+  const Evm = (new chainAdapters.evm.EVM({
     publicClient,
-    contract: SIGNET_CONTRACT,
-  })
+    contract: SIGNET_CONTRACT
+  }));
 
   useEffect(() => {
     async function fetchEthereumGasPrice() {
@@ -99,7 +97,7 @@ export function EVMView({
     setSenderAddress(address);
     setSenderLabel(address);
     const balance = await Evm.getBalance(address);
-    setBalance(bigIntToDecimal(balance.balance,balance.decimals));
+    setBalance(bigIntToDecimal(balance.balance, balance.decimals));
   };
 
   async function chainSignature() {
@@ -111,36 +109,32 @@ export function EVMView({
     setStatus(
       `🕒 Asking ${MPC_CONTRACT} to sign the transaction, this might take a while`
     );
-  
+
     try {
-      const signature = await callFunction({
-        contractId: MPC_CONTRACT,
-        method: "sign",
-        args: {
-          request: {
-            payload: hashesToSign[0],
-            path: derivationPath,
-            key_version: 0,
-          },
-        },
-        gas: "250000000000000", // 250 Tgas
-        deposit: 1,
+
+      const rsvSignatures = await SIGNET_CONTRACT.sign({
+        payloads: hashesToSign,
+        path: derivationPath,
+        keyType: "Ecdsa",
+        signerAccount: { 
+          accountId: signedAccountId,
+          signAndSendTransactions 
+        }
       });
       
-      setSignedTransaction(
-        Evm.finalizeTransactionSigning({
-          transaction: transaction,
-          rsvSignatures: [utils.cryptography.toRSV(signature)],
-        })
-      );
+      const txSerialized = Evm.finalizeTransactionSigning({
+        transaction,
+        rsvSignatures,
+      })
+
+      setSignedTransaction(txSerialized);
 
       setStatus(
         `✅ Signed payload ready to be relayed to the Ethereum network`
       );
       setStep("relay");
     } catch (e) {
-      console.trace(e);
-      
+      console.log(e);
       setStatus(`❌ Error: ${e.message}`);
       setLoading(false);
     }
diff --git a/src/components/Solana.jsx b/src/components/Solana.jsx
@@ -3,27 +3,21 @@ import PropTypes from "prop-types";
 import { useWalletSelector } from "@near-wallet-selector/react-hook";
 import { useEffect, useState } from "react";
 import { useDebounce } from "../hooks/debounce";
-import { SIGNET_CONTRACT, MPC_CONTRACT } from "../config";
+import { SIGNET_CONTRACT } from "../config";
 import { chainAdapters } from "chainsig.js";
 import { Connection as SolanaConnection } from '@solana/web3.js'
 import { bigIntToDecimal } from "../utils/bigIntToDecimal";
 import { decimalToBigInt } from "../utils/decimalToBigInt";
 
-function uint8ArrayToHex(uint8Array) {
-  return Array.from(uint8Array)
-    .map(byte => byte.toString(16).padStart(2, '0'))
-    .join('');
-}
-
 const connection = new SolanaConnection("https://api.devnet.solana.com");
-const solana = new chainAdapters.solana.Solana({
+
+const Solana = new chainAdapters.solana.Solana({
   solanaConnection: connection,
   contract: SIGNET_CONTRACT
-}) 
-
+})
 export function SolanaView({ props: { setStatus } }) {
-  const { callFunction, signedAccountId } = useWalletSelector();
- 
+  const { signedAccountId, signAndSendTransactions } = useWalletSelector();
+
   const [receiver, setReceiver] = useState("G58AYKiiNy7wwjPAeBAQWTM6S1kJwP3MQ3wRWWhhSJxA");
   const [amount, setAmount] = useState(1);
   const [loading, setLoading] = useState(false);
@@ -45,103 +39,98 @@ export function SolanaView({ props: { setStatus } }) {
       setStatus("Querying your address and balance");
       setSenderAddress(`Deriving address from path ${derivationPath}...`);
 
-      const { publicKey } = await solana.deriveAddressAndPublicKey(signedAccountId, derivationPath);
+      const { publicKey } = await Solana.deriveAddressAndPublicKey(signedAccountId, derivationPath);
 
       setSenderAddress(publicKey);
 
-      const balance = await solana.getBalance(publicKey);
+      const balance = await Solana.getBalance(publicKey);
 
       setStatus(
-        `Your Solana address is:${publicKey}, balance: ${bigIntToDecimal(balance.balance,balance.decimals)} sol`
+        `Your Solana address is:${publicKey}, balance: ${bigIntToDecimal(balance.balance, balance.decimals)} sol`
       );
     }
   }, [signedAccountId, derivationPath, setStatus]);
 
-    async function chainSignature() {
-      setStatus("🏗️ Creating transaction");
-      
-      const { transaction:{transaction} } = await solana.prepareTransactionForSigning({
-        from: senderAddress,
-        to: receiver,
-        amount: decimalToBigInt(amount, 9),
-      })
-
-      setStatus(
-        "🕒 Asking MPC to sign the transaction, this might take a while..."
-      );
-
-      try {
-        const rsvSignatures = await callFunction({
-          contractId: MPC_CONTRACT,
-          method: "sign",
-          args: {
-            request: {
-              payload_v2: { "Eddsa": uint8ArrayToHex(transaction.serializeMessage()) },
-              path: derivationPath,
-              domain_id: 1,
-            },
-          },
-          gas: "250000000000000", // 250 Tgas
-          deposit: 1,
-        });
-
-        if (!rsvSignatures || !rsvSignatures.signature) {
-          throw new Error("Failed to sign transaction");
+  async function chainSignature() {
+    setStatus("🏗️ Creating transaction");
+
+    const { transaction: { transaction } } = await Solana.prepareTransactionForSigning({
+      from: senderAddress,
+      to: receiver,
+      amount: decimalToBigInt(amount, 9),
+    })
+
+    setStatus(
+      "🕒 Asking MPC to sign the transaction, this might take a while..."
+    );
+
+    try {
+      const rsvSignatures = await SIGNET_CONTRACT.sign({
+        payloads: [transaction.serializeMessage()],
+        path: derivationPath,
+        keyType: "Eddsa",
+        signerAccount: { 
+          accountId: signedAccountId,
+          signAndSendTransactions 
         }
+      });
 
-        const txSerialized = solana.finalizeTransactionSigning({    
-          transaction,
-          rsvSignatures,
-          senderAddress
-        })
-        await solana.broadcastTx(txSerialized);
-
-        setStatus("✅ Signed payload ready to be relayed to the Solana network");
-        setSignedTransaction(transaction.serialize().toString('base64'));
-        setStep("relay");
-      } catch (e) {
-        console.log(e);
-        setStatus(`❌ Error: ${e.message}`);
-        setLoading(false);
+      if (!rsvSignatures[0] || !rsvSignatures[0].signature) {
+        throw new Error("Failed to sign transaction");
       }
+
+      const txSerialized = Solana.finalizeTransactionSigning({
+        transaction,
+        rsvSignatures: rsvSignatures[0],
+        senderAddress
+      })
+
+      setStatus("✅ Signed payload ready to be relayed to the Solana network");
+      setSignedTransaction(txSerialized);
+      setStep("relay");
+    } catch (e) {
+      console.log(e);
+      setStatus(`❌ Error: ${e.message}`);
+      setLoading(false);
     }
-  
-    async function relayTransaction() {
-      setLoading(true);
+  }
+
+  async function relayTransaction() {
+    setLoading(true);
+    setStatus(
+      "🔗 Relaying transaction to the Solana network... this might take a while"
+    );
+
+    try {
+
+      const txHash = await Solana.broadcastTx(signedTransaction);
+
       setStatus(
-        "🔗 Relaying transaction to the Solana network... this might take a while"
+        <>
+          <a
+            href={`https://explorer.solana.com/tx/${txHash.hash}?cluster=devnet`}
+            target="_blank"
+          >
+            {" "}
+            ✅ Successfully Broadcasted{" "}
+          </a>
+        </>
       );
-  
-      try {
-  
-        const txHash = await solana.broadcastTx(signedTransaction);
-
-        setStatus(
-          <>
-            <a
-              href={`https://explorer.solana.com/tx/${txHash.hash}?cluster=devnet`}
-              target="_blank"
-            >
-              {" "}
-              ✅ Successfully Broadcasted{" "}
-            </a>
-          </>
-        );
-      } catch (e) {
-        setStatus(`❌ Error: ${e.message}`);
-      }
-  
-      setStep("request");
-      setLoading(false);
+    } catch (e) {
+      setStatus(`❌ Error: ${e.message}`);
     }
 
+    setStep("request");
+    setLoading(false);
+  }
+
   const UIChainSignature = async () => {
     setLoading(true);
     await chainSignature();
     setLoading(false);
   };
 
-  return (    <>
+  return (<>
     <div className="alert alert-info text-center" role="alert">
       You are working with <strong>DevTest</strong>.
       <br />
diff --git a/src/config.js b/src/config.js
@@ -14,10 +14,9 @@ export const NetworkId = 'testnet';
 export const MPC_CONTRACT = 'v1.signer-prod.testnet'
 export const MPC_KEY = 'secp256k1:4NfTiv3UsGahebgTaHyD9vF8KYKMBnfd6kh94mK6xv8fGBiJB8TBtFMP5WWXz6B89Ac1fbpzPwAvoyQebemHFwx3';
 
-export const SIGNET_CONTRACT = new contracts.near.ChainSignatureContract({
+export const SIGNET_CONTRACT = new contracts.ChainSignatureContract({
   networkId: NetworkId,
   contractId: MPC_CONTRACT,
-  accountId: '',
 })
 
 export const ABI = [
