connect

Connection flow

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

Usage

import { connect, ConnectResponse } from '@puzzlehq/sdk-core';
import { useState } from 'react';

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

  const onClick = async () => {
    setLoading(true);
    setError(undefined);
    try {
      const connection: ConnectResponse = await connect({
        dAppInfo: {
          name: "<YOUR DAPP NAME>",
          description: "<YOUR DAPP DESCRIPTION>",
          iconUrl: "<YOUR DAPP ICON URL>",
        },
        permissions: {
          programIds: {
            [Network.AleoMainnet]: ['dapp_1.aleo', 'dapp_2.aleo', 'dapp_2_imports.aleo']
            [Network.AleoTestnet]: ['dapp_3.aleo', 'dapp_3_imports_1.aleo', 'dapp_3_imports_2.aleo']
          }
        }
      })
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setLoading(false);
    }
  }
  return (
    <div>
      <button
        onClick={ onClick }
        disabled={ loading }
      >
        connect to puzzle
      </button>
      { error && <p>error connecting: {error}</p> }
    </div>
  )
}

Types

type ConnectRequestParams = {
  dAppInfo: {
    name?: string;
    description?: string;
    iconUrl?: string;
  };
  permissions: {
    programIds: ProgramIdPermissions;
  };
};

type Connection = ConnectRequestParams & {
  dAppInfo: {
    hostname: string;
  };
  expiry: Date;
};

type ConnectionWithAccountInfo = Connection & {
  address: string;
  network: Network;
  balances: Balance[];
};

type ConnectRequest = {
  method: 'connect';
  params: ConnectRequestParams;
};

type ConnectResponse = {
  connection: ConnectionWithAccountInfo;
};