connect

Connection flow

You must configure the connection by passing the dApp info to configureConnection. It is strongly recommended that dApps create their own WalletConnect project and pass in the projectId.

A dApp must connect with the wallet before communication between dApps and wallet can begin. A dApp can only have one WalletConnect session at a time.

Usage

import { connect, configureConnection } from '@puzzlehq/sdk-core';
import { SessionTypes } from '@walletconnect/types';
import { useState } from 'react';

configureConnection(
  dAppName="<YOUR DAPP NAME>"
  dAppDescription="<YOUR DAPP DESCRIPTION>"
  dAppUrl="<YOUR DAPP URL>"
  dAppIconURL="<YOUR DAPP ICON URL>"
  projectId="<YOUR WALLETCONNECT PROJECT ID>" // optional
)

export const ConnectPage = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>();

  const onClick = async () => {
    setLoading(true);
    setError(undefined);
    try {
      const session: SessionTypes.Struct = await connect()
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setLoading(false);
    }
  }
  return (
    <div>
      <button
        onClick={ onClick }
        disabled={ loading }
      >
        connect to puzzle
      </button>
      { data && <p>you did it!</p> }
      { error && <p>error connecting: {error}</p> }
    </div>
  )
}