@talisman-connect/wallets

@talisman-connect/wallets

Installation:

npm i --save @talisman-connect/wallets

Get wallets (Need to be called first):

import { getWallets } from '@talisman-connect/wallets';

const supportedWallets = getWallets();

Subscribe to accounts:

<div>
  {supportedWallets?.map((wallet) => {
    return (
      <div key={wallet.extensionName}>
        <button
          onClick={() =>
            // save "selected" wallet
            wallet.subscribeAccounts((accounts) => {
              // save accounts
            })
          }
        >
        </button>
      </div>
    )
  }}
</div>

Display accounts: (accounts are saved via useState)

<div>
  {accounts?.map((account) => {
    return <div key={account.address}>{account.address}</div>;
  })}
</div>

Using the wallet object (signing example):

try {
  const signer = account.wallet.signer;
  // NOTE: This line will trigger the extension to pop up
  const { signature } = await signer.signRaw({
    type: 'payload',
    data: payload,
    address: account.address,
  });
catch (err) {
  // handle error
}

Contributing new wallets

• Add wallet under /src/lib. Example: /src/lib/foo-wallet/index.ts
• Add class which implements Wallet. Example: export class FooWallet implements Wallet
• Add the wallet instance in supportedWallets array in libs/wallets/src/lib/wallets.ts.
• IMPORTANT: The logo should not exceed 10KB so it will be automatically inlined.

Troubleshooting

If in case there is an error parsing import.meta, please add the following to webpack config:

webpackConfig.module.rules.push({
  test: /\.js$/,
  loader: require.resolve('@open-wc/webpack-import-meta-loader'),
});

Running unit tests

Run nx test wallets to execute the unit tests via Jest.