Sign Transaction

Once the connection is complete, we will get the user's JoyID information, such as address, public key, credential, etc. In this guide, we will continue our previous journey in Connect by signing transactions to send EVM token after the connection is complete.

You can use @joyid/evm SDK to sign a transaction and you can also use @joyid/ethers SDK to use JoyID provider to sign a transaction. See ethers adapter for more details.

To sign a transaction with the user's JoyID, we need to do the following steps:

Step 1: Save JoyID info

In the previous guide, we have already connected the user with JoyID, and we have got the user's JoyID information. Now we need to save the user's JoyID information. We can save it in the local storage, or in the state of the React component, or in the Vuex store of the Vue app, etc.

React
import * as React from "react";
import {connect} from "@joyid/evm";
import "./style.css";

export default function App() {
  const [joyidInfo, setJoyidInfo] = React.useState(null);
  const onConnect = async () => {
    try {
      const authData = await connect();
      setJoyidInfo(authData);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div>
      <h1>Hello JoyID!</h1>
      <button onClick={onConnect}>Connect JoyID</button>
    </div>
  );
}
Vue
<template>
  <div id="app">
    <h1>Hello JoyID!</h1>
    <button @click="connect">Connect JoyID</button>
  </div>
</template>

<script>
import {connect} from "@joyid/evm";

export default {
  name: "App",
  data() {
    return {
      joyidInfo: null,
    };
  },
  methods: {
    async connect() {
      try {
        const authData = await connect();
        this.joyidInfo = authData;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

Step 2: Sign a Transaction

After the connection is complete, we need to add a button element and listen to the click event. When the user clicks the button, we will call the signTransaction to sign a transaction with the user's JoyID.

React
import * as React from "react";
import {connect, signTransaction} from "@joyid/evm";
import {parseEther} from "ethers/lib/utils";
import "./style.css";

export default function App() {
  const [joyidInfo, setJoyidInfo] = React.useState(null);
  const [toAddress, setToAddress] = React.useState("0xA6eBeCE9938C3e1757bE3024D2296666d6F8Fc49");
  const [amount, setAmount] = React.useState("0.01");
  const onConnect = async () => {
    try {
      const authData = await connect();
      setJoyidInfo(authData);
    } catch (error) {
      console.log(error);
    }
  };

  const onSign = async () => {
    const signedTx = await signTransaction({
      to: toAddress,
      from: joyidInfo.ethAddress,
      value: parseEther(amount).toString(),
    });
    console.log(`signedTx: ${signedTx}`);
    // You can use Axon RPC `eth_sendRawTransaction` to send the `signedTx` to the blockchain.
  };
  return (
    <div>
      <h1>Hello JoyID!</h1>
      {joyidInfo ? null : <button onClick={onConnect}>Connect JoyID</button>}
      {joyidInfo ? (
        <div>
          <textarea value={toAddress} onChange={(e) => setToAddress(e.target.value)} />
          <textarea value={amount} onChange={(e) => setAmount(e.target.value)} />
          <button onClick={onSign}>Sign</button>
        </div>
      ) : null}
    </div>
  );
}
Vue
<template>
  <div id="app">
    <h1>Hello JoyID!</h1>
    <button @click="connect" v-if="!joyidInfo">Connect JoyID</button>
    <div v-else>
      <textarea v-model="toAddress" />
      <textarea v-model="amount" />
      <button @click="sign">Sign</button>
    </div>
  </div>
</template>

<script>
import {connect, signTransaction} from "@joyid/evm";
import {parseEther} from "ethers/lib/utils";

export default {
  name: "App",
  data() {
    return {
      joyidInfo: null,
      toAddress: "0xA6eBeCE9938C3e1757bE3024D2296666d6F8Fc49",
      amount: "0.01",
    };
  },
  methods: {
    async connect() {
      try {
        const authData = await connect();
        this.joyidInfo = authData;
      } catch (error) {
        console.log(error);
      }
    },
    async sign() {
      const signedTx = await signTransaction({
        to: this.toAddress,
        from: this.joyidInfo.ethAddress,
        value: parseEther(this.amount).toString(),
      });
      console.log(`signedTx: ${signedTx}`);
      // You can use Axon RPC `eth_sendRawTransaction` to send the `signedTx` to the blockchain.
    },
  },
};
</script>
To learn more about the signTransaction function, please check the API Reference.

Try it out

Loading Sandbox...
Loading Sandbox...
Edit this page on GitHub
Table of Contents