Connect a Wallet

The Swing SDK requires a connected wallet provider to initiate signing and sending transactions. A variety of wallets, including Metamask, Coinbase, and Keplr are supported.

Due to compliance reasons, to give your users the best user experience and to prevent failed transactions, we advise you to notify your users whether they're connecting from a restricted jurisdiction or not. Learn more here.

Some of the examples below are written using React, but you can use the same methods in any framework.

Wagmi

If you are using wagmi, connect using the wallet client's transport. A full example can be found in the staking-sdk-nextjs example.

import { useConnect, useAccountEffect } from 'wagmi';
import { SwingSDK } from '@swing.xyz/sdk';
 
const swingSDK = new SwingSDK();
 
function WagmiConnectButton() {
  const { connectAsync, connectors } = useConnect();
 
  // Sync the wallet provider with the Swing SDK
  useAccountEffect({
    async onConnect(data) {
      const provider = await data.connector.getProvider();
 
      await swingSDK.wallet.connect(provider, data.chainId);
    },
  });
 
  return (
    <button
      onClick={async () => {
        // Typically you would render a button for each connector.
        const connector = connectors[0];
 
        await connectAsync({ connector });
 
        const provider = await connector.getProvider();
        const chainId = await connector.getChainId();
 
        // Pass the provider to Swing SDK
        await swingSDK.wallet.connect(provider, chainId);
      }}
    >
      Connect Wallet
    </button>
  );
}

Thirdweb

If you are using @thirdweb-dev/react, connect using the wallet signer.

import { useConnect, metamaskWallet } from '@thirdweb-dev/react';
import { SwingSDK } from '@swing.xyz/sdk';
 
const swingSDK = new SwingSDK();
const metamaskConfig = metamaskWallet();
 
function ThirdWebConnectButton() {
  const connect = useConnect();
 
  return (
    <button
      onClick={async () => {
        // Typically you would render a button for each wallet config
        const wallet = await connect(metamaskConfig);
        const signer = await wallet.getSigner();
 
        // Pass wallet signer to Swing SDK
        const walletAddress = await swingSDK.wallet.connect(
          signer,
          defaultTransferParams.fromChain,
        );
      }}
    >
      Connect Wallet
    </button>
  );
}

Web3-React

If you are using web3-react, connect using the active provider.

import { useWeb3React } from '@web3-react/core';
import { useEffect, useState } from 'react';
import { SwingSDK } from '@swing.xyz/sdk';
 
const swingSDK = new SwingSDK();
 
function Web3ReactConnectButton() {
  const { connector, provider } = useWeb3React();
  const [chain, setChain] = useState({ chainId: 5 });
 
  useEffect(() => {
    // Whenever the provider changes, sync it to the Swing SDK
    async function syncProviderWithSwingSDK() {
      await swingSDK.wallet.connect(provider, chain.chainId);
    }
 
    syncProviderWithSwingSDK();
  }, [provider]);
 
  return (
    <button
      onClick={async () => {
        // Typically you would render a button for each wallet config
        await connector.activate(chain); // <--- Forces the active provider to switch to desired network
 
        // Pass the active provider to Swing SDK
        const walletAddress = await swingSDK.wallet.connect(
          connector.provider,
          chain.chainId,
        );
      }}
    >
      Connect Wallet
    </button>
  );
}

RainbowKit

If you are using Rainbow with Wagmi, please follow the Wagmi instructions.

If you are using @rainbow-me/rainbowkit, connect using the custom wallet button.

import { WalletButton } from '@rainbow-me/rainbowkit';
import { SwingSDK } from '@swing.xyz/sdk';
 
const swingSDK = new SwingSDK();
 
function RainbowKitConnectButton() {
  return (
    <WalletButton.Custom wallet="rainbow">
      {({ ready, connect, connector }) => {
        return (
          <button
            type="button"
            disabled={!ready}
            onClick={async () => {
              await connect();
 
              const provider = await connector.connector.getProvider();
 
              // Pass the active provider to Swing SDK
              const walletAddress = await swingSDK.wallet.connect(
                connector.provider,
                connector.provider.chainId,
              );
            }}
          >
            Connect Rainbow
          </button>
        );
      }}
    </WalletButton.Custom>
  );
}

Metamask

When connecting to an MetaMask, provide the wallet interface located on the window.

await swingSDK.wallet.connect(window.ethereum, 'ethereum');

Coinbase

When connecting to the Coinbase wallet, provide the wallet interface located on the window.

await swingSDK.wallet.connect(window.CoinbaseWalletProvider, 'ethereum');

Brave

When connecting to an Brave, provide the wallet interface located on the window.

await swingSDK.wallet.connect(window.ethereum, 'ethereum');

WalletConnect

When connecting to WalletConnect, provide the wallet interface located on the window.

await swingSDK.wallet.connect(window.ethereum, 'ethereum');

Phantom EVM

When connecting to Phantom's EVM wallet, provide the wallet interface located on the window.

await swingSDK.wallet.connect(window.phantom.ethereum, 'ethereum');

Phantom Solana

When connecting to Phantom's Solana wallet, provide the wallet interface located on the window.

await swingSDK.wallet.connect(window.phantom.solana, 'solana');

Keplr

When connecting to a Cosmos wallet, provide the OfflineSigner and the SigningStargateClient.

import { SigningStargateClient } from '@cosmjs/stargate';
import { SwingSDK } from '@swing.xyz/sdk';
 
const swingSDK = new SwingSDK();
 
function KeplrConnectButton() {
  const chain = swingSDK.getChain('cosmoshub-4');
 
  return (
    <button
      onClick={async () => {
        // Enable the chain in Keplr
        await window.keplr.enable(chain.slug);
 
        // Get the offline signer from Keplr
        const offlineSigner = window.keplr.getOfflineSigner(chain.slug);
 
        // Create a SigningStargateClient using the offline signer
        const client = await SigningStargateClient.connectWithSigner(
          chain.rpcUrl,
          offlineSigner,
        );
 
        // Pass the offline signer and client to SwingSDK
        await swingSDK.wallet.connect(
          {
            offlineSigner,
            client,
          },
          chain.slug,
        );
      }}
    >
      Connect Wallet
    </button>
  );
}

CosmosKit

If you are using @cosmos-kit/react or @cosmos-kit/react-lite, connect using getOfflineSigner and getSigningStargateClient returned from the useChain hook.

import { useChain } from '@cosmos-kit/react';
import { SwingSDK } from '@swing.xyz/sdk';
 
const swingSDK = new SwingSDK();
 
function CosmosKitConnectButton() {
  const chain = swingSDK.getChain('cosmoshub-4');
  const { connect, getOfflineSigner, getSigningStargateClient } = useChain(
    chain.slug,
  );
 
  return (
    <button
      onClick={async () => {
        // Trigger cosmos-kit to connect to the wallet
        await connect();
 
        const offlineSigner = await getOfflineSigner();
        const client = await getSigningStargateClient();
 
        // Pass the offline signer and client to SwingSDK
        await swingSDK.wallet.connect(
          {
            offlineSigner,
            client,
          },
          chain.slug,
        );
      }}
    >
      Connect Wallet
    </button>
  );
}

Other wallets

Not seeing your wallet? We're constantly adding new wallet integrations. If you need a specific wallet, please reach out in our Discord.