@swing.xyz/wallets

@swing.xyz/wallets

Multi-chain wallet connection manager.

Installation

Install the package using your favorite package manager.

yarn add @swing.xyz/wallets

# OR

npm i @swing.xyz/wallets

Setup

The @swing.xyz/wallets package is designed to work with the @swing.xyz/sdk package.

Use with @swing.xyz/sdk

To use with @swing.xyz/sdk, you should provide the swingSDK instance to the WalletProvider.

import { SwingSDK } from '@swing.xyz/sdk';
import { WalletProvider } from '@swing.xyz/wallets';

const swingSDK = new SwingSDK({
  // Include your SwingSDK config
});

export default function App() {
  return <WalletProvider swingSDK={swingSDK}>{/* The rest of your app code */}</WalletProvider>;
}

Use with @swing.xyz/ui

To use with @swing.xyz/ui, you should wrap the WalletProvider in a SwingSdkProvider. This ensures that the same swingSDK instance is available to the WalletProvider.

import { Swap, SwingSdkProvider, useSwingSdk } from '@swing.xyz/ui';
import { WalletProvider } from '@swing.xyz/wallets';

export default function App() {
  return (
    <SwingSdkProvider>
      <WalletProviderWrapper />
    </SwingSdkProvider>
  );
}

function WalletProviderWrapper() {
  const swingSDK = useSwingSdk();

  return (
    <WalletProvider swingSDK={swingSDK}>
      {/* The rest of your app code, such as the one of the @swing.xyz/ui widgets */}
      <Swap />
    </WalletProvider>
  );
}

Use with Wagmi

This package is designed to work with Wagmi. It will automatically inherit any connectors you have configured in your Wagmi config.

To use with Wagmi, you must wrap your Wagmi provider around the WalletProvider.

import { WagmiProvider } from 'wagmi';
import { WalletProvider } from '@swing.xyz/wallets';

export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <WalletProvider swingSDK={swingSDK}>{/* The rest of your app code */}</WalletProvider>
    </WagmiProvider>
  );
}

Connectors

Connectors are a small abstraction layer over different wallet providers.

You can add your own custom connectors by implementing the WalletConnector interface.

// You can import this from `@swing.xyz/wallets/connectors`
interface WalletConnector {
  /**
   * Unquie identifier for the wallet
   */
  id: string;

  /**
   * Wallet name
   */
  name: string;

  /**
   * Wallet logo
   */
  logo: string;

  /**
   * Type of the connector such as injected, walletconnect, etc.
   */
  type: string;

  /**
   * Protocols supported by the wallet such as evm, ibc, solana, bitcoin, etc
   */
  protocols: ProtocolType[];

  /**
   * Get the provider for the connector
   */
  getProvider: (chain: Chain) => Promise<WalletProvider | undefined> | WalletProvider | undefined;

  /**
   * Connect to the wallet
   */
  connect: (chain: Chain) => Promise<undefined | string[]>;

  /**
   * Disconnect from the wallet
   */
  disconnect?: () => Promise<void> | void;

  /**
   * Switch the current chain of the wallet
   */
  switchChain?: (chain: Chain) => Promise<string[]> | Promise<void>;
}

getConnectors()

The getConnectors function returns an array of all the connectors.

import { getConnectors } from '@swing.xyz/wallets/connectors';

const connectors = getConnectors();

getConnector()

The getConnector function returns a connector by ID.

import { getConnector } from '@swing.xyz/wallets/connectors';

const connector = getConnector('metamask');

Custom Connector Example

import type { WalletConnector } from '@swing.xyz/wallets/connectors';
import { WalletProvider } from '@swing.xyz/wallets';

const customConnector: WalletConnector = {
  id: 'custom',
  name: 'Custom',
  logo: 'custom-logo.png',
  type: 'injected',
  protocols: ['evm'], // Include the protocols supported by your custom wallet
  getProvider: () => window.ethereum,
  connect: async () => {
    /// Connect to the custom wallet
  },
  disconnect: async () => {
    /// Disconnect from the custom wallet
  },
  switchChain: async () => {
    /// Switch the current chain of the custom wallet
  },
};

export default function App() {
  return <WalletProvider connectors={[customConnector]}>{/* The rest of your app code */}</WalletProvider>;
}

Connections

Connections are a representation of a wallet's connection to a chain.

// You can import this from `@swing.xyz/wallets/connections`
interface WalletConnection {
  connector: WalletConnector;
  chain: Chain;
  accounts: string[];
}

connect()

The connect function connects a wallet to a chain.

import { connect } from '@swing.xyz/wallets/connections';

const walletAddress = await connect({ connector, chainId: 'ethereum' });

disconnect()

The disconnect function disconnects a wallet from a chain.

import { disconnect } from '@swing.xyz/wallets/connections';

await disconnect();

getConnections()

The getConnections function returns an array of all the connections.

import { getConnections } from '@swing.xyz/wallets/connections';

const connections = getConnections();

getConnection()

The getConnection function returns a connection by wallet address.

import { getConnection } from '@swing.xyz/wallets/connections';

const connection = getConnection('0x123...');

getConnectionForChain()

The getConnectionForChain function returns a connection for a given chain.

import { getConnectionForChain } from '@swing.xyz/wallets/connections';

const connection = getConnectionForChain('ethereum');

Hooks

useConnect()

The useConnect hook provides a function to connect to a wallet.

import { useConnect } from '@swing.xyz/wallets/hooks/useConnect';

const connect = useConnect();

const walletAddress = await connect({ connector, chainId: 1 });

useConnection()

The useConnection hook provides a function to get the current connection by wallet address.

import { useConnection } from '@swing.xyz/wallets/hooks/useConnection';

const connection = useConnection('0x123...');

useConnections()

The useConnections hook provides a function to get all the connections.

import { useConnections } from '@swing.xyz/wallets/hooks/useConnections';

const connections = useConnections();

useConnector()

The useConnector hook provides a function to get a connector by ID.

import { useConnector } from '@swing.xyz/wallets/hooks/useConnector';

const connector = useConnector('metamask');

useConnectors()

The useConnectors hook provides a function to get all the connectors.

import { useConnectors } from '@swing.xyz/wallets/hooks/useConnectors';

const connectors = useConnectors();

Default Wallets

The following wallets are supported by default:

• MetaMask
• Coinbase Wallet
• WalletConnect
• Rabby
• Rainbow
• Trust Wallet
• Safe
• Keplr
• Phantom
• TonConnect
• MultiversX

You can also add your own custom connectors to the WalletProvider, and they will be available to all of the connector helpers such as the useConnectors() hook and getConnectors() functions.

If you would like your wallet to be added to our default wallet list, please open a PR adding your wallet to the src/connectors folder.