DappConnect

---

Usage

1. Install DappConnect sdk
2. Init DappConnect client to connect ws network
3. Call getConnectLink function to get deeplink
4. open deeplink in web3mq wallet
5. Connect Wallet
6. Call sendSign function
7. Wallet Confirmation Signature

Install

npm install @web3mq/dapp-connect

or

yarn add @web3mq/dapp-connect

Init DappConnect client

import { DappConnect, DappConnectCallbackParams } from "@web3mq/dapp-connect";

const handleDappConnectCallback = (event: DappConnectCallbackParams) => {};
const dappConnectClient = new DappConnect(
  { dAppID: "SwapChat:im" },
  handleDappConnectCallback
);
console.log("the dapp-connect client: ", dappConnectClient);

tip

When the return value of the callback function is SuccessData, it means the network connection is successful.

Once the network connection is successful, you can create deepLink and wallet to establish the connection

tip

To facilitate the wallet connection, you can wrap a function that converts deeplink to a QR code

import QRCode from "qrcode";

const generateQrCode = async (text: string) => {
  try {
    return await QRCode.toDataURL(text);
  } catch (err: any) {
    throw new Error(err.message);
  }
};

getConnectLink()

Create wallet connect deep link

import { DappConnect, DappConnectCallbackParams } from "@web3mq/dapp-connect";

const handleDappConnectCallback = (event: DappConnectCallbackParams) => {};
const dappConnectClient = new DappConnect(
  { dAppID: "SwapChat:im" },
  handleDappConnectCallback
);
const deepLink = dappConnectClient.getConnectLink();
const qrCode = await generateQrCode(deepLink);
console.log(deepLink);
console.log(qrCode);

tip

When the return value of the callback function is SuccessData, it means that the wallet and dapp are successfully connected.

Once the wallet and dapp are successfully connected, the sendSign method can be called to request a signature

sendSign()

tip

After calling the sendsign method, the signature result will not be received directly, but will be returned via a callback function

import { DappConnect, DappConnectCallbackParams } from "@web3mq/dapp-connect";

const handleDappConnectCallback = (event: DappConnectCallbackParams) => {};
const dappConnectClient = new DappConnect(
  { dAppID: "SwapChat:im" },
  handleDappConnectCallback
);
await dappConnectClient.sendSign({
  signContent: "test sign out",
  didValue: walletAddress || "",
});

tip

When the return value of the callback function is SuccessData, the wallet is successfully signed and the signature result is returned

Full example

import React, { useState } from "react";
import {
  DappConnect,
  DappConnectCallbackParams,
  WalletMethodMap,
} from "@web3mq/dapp-connect";
import QRCode from "qrcode";

const generateQrCode = async (text: string) => {
  try {
    return await QRCode.toDataURL(text);
  } catch (err: any) {
    throw new Error(err.message);
  }
};

const App: React.FC = () => {
  const [client, setClient] = useState<DappConnect>();
  const [walletAddress, setWalletAddress] = useState("");
  const [qrCodeImg, setQrCodeImg] = useState("");
  const [signRes, setSignRes] = useState("");

  const handleDappConnectCallback = async (
    event: DappConnectCallbackParams
  ) => {
    console.log(event, "event - handleDappConnectCallback");
    const { type, data } = event;
    if (data.approve) {
      if (type === "connect") {
        console.log("ws connect success");
        return;
      }
      if (type === "dapp-connect") {
        const metadata = data.metadata;
        if (data.method === WalletMethodMap.providerAuthorization) {
          console.log(
            "connect success, wallet address is : ",
            metadata?.address
          );
          setWalletAddress(metadata?.address || "");
        }
        if (data.method === WalletMethodMap.personalSign) {
          console.log("sign success: ", metadata?.signature);
          setSignRes(metadata?.signature || "");
        }
      }
    } else {
      console.log(`wallet response error: 
       code is: ${data.code}, 
       message is :${data.message}
       `);
      setWalletAddress("");
      setSignRes("");
      setQrCodeImg("");
    }
  };
  const init = async () => {
    const dappConnectClient = new DappConnect(
      { dAppID: "SwapChat:im", keepAlive: false, requestTimeout: 60000 },
      handleDappConnectCallback
    );
    console.log("the dapp-connect client: ", dappConnectClient);
    setClient(dappConnectClient);
  };
  const sign = async () => {
    await client?.sendSign({
      signContent: "test sign out",
      address: walletAddress || "",
    });
  };
  const createLink = async () => {
    const link = client?.getConnectLink();
    console.log(link, "link");
    if (link) {
      const qrCode = await generateQrCode(link);
      setQrCodeImg(qrCode);
    }
  };

  return (
    <div>
      <div>
        <button onClick={init}>init</button>
      </div>
      <div>
        <button onClick={createLink}>create link</button>
      </div>
      <div>
        <button onClick={sign}>send Sign</button>
      </div>

      <div>
        {qrCodeImg && (
          <img
            src={qrCodeImg}
            style={{
              width: "200px",
              height: "200px",
            }}
            alt=""
          />
        )}
      </div>
      <div>
        {walletAddress && (
          <p>{"connect success, wallet address is : " + walletAddress}</p>
        )}
      </div>
      <div>{signRes && <p> signature: {signRes} </p>}</div>
    </div>
  );
};

export default App;

const [client, setClient] = useState();
const [event, setEvent] = useState();

const callback = (eventData) => {
  setEvent(eventData);
};

useEffect(() => {
  console.log(client);
}, [eventData]);

const init = () => {
  setClient(new Client({}, callback));
};