Skip to main content

useAddChain

Hook to add a new chain to graz's internal store without suggesting it to the wallet.

This is useful when you want to dynamically add chains to your application at runtime without requiring wallet interaction. Unlike useSuggestChain, this hook only updates the internal store and doesn't communicate with the user's wallet.

Usage​

Basic Usage​

import { useAddChain } from "graz";

function App() {
  const { addChain, isLoading, isSuccess, error } = useAddChain();

  return (
    <button
      onClick={() => {
        addChain({
          chainInfo: {
            chainId: "osmosis-1",
            chainName: "Osmosis",
            rpc: "https://rpc.osmosis.zone",
            rest: "https://lcd.osmosis.zone",
            bip44: {
              coinType: 118,
            },
            bech32Config: {
              bech32PrefixAccAddr: "osmo",
              bech32PrefixAccPub: "osmopub",
              bech32PrefixValAddr: "osmovaloper",
              bech32PrefixValPub: "osmovaloperpub",
              bech32PrefixConsAddr: "osmovalcons",
              bech32PrefixConsPub: "osmovalconspub",
            },
            currencies: [
              {
                coinDenom: "OSMO",
                coinMinimalDenom: "uosmo",
                coinDecimals: 6,
              },
            ],
            feeCurrencies: [
              {
                coinDenom: "OSMO",
                coinMinimalDenom: "uosmo",
                coinDecimals: 6,
                gasPriceStep: {
                  low: 0.01,
                  average: 0.025,
                  high: 0.04,
                },
              },
            ],
            stakeCurrency: {
              coinDenom: "OSMO",
              coinMinimalDenom: "uosmo",
              coinDecimals: 6,
            },
          },
        });
      }}
    >
      Add Osmosis Chain
    </button>
  );
}

With Event Callbacks​

import { useAddChain } from "graz";

function App() {
  const { addChain } = useAddChain({
    onSuccess: (chainInfo) => {
      console.log(`Successfully added ${chainInfo.chainName}`);
    },
    onError: (error) => {
      console.error("Failed to add chain:", error);
    },
    onLoading: (chainInfo) => {
      console.log(`Adding ${chainInfo.chainName}...`);
    },
  });

  return (
    <button onClick={() => addChain({ chainInfo: myChainInfo })}>
      Add Chain
    </button>
  );
}

Using Async Version​

import { useAddChain } from "graz";

function App() {
  const { addChainAsync } = useAddChain();

  const handleAddChain = async () => {
    try {
      const result = await addChainAsync({
        chainInfo: myChainInfo,
      });
      console.log("Chain added:", result);
    } catch (error) {
      console.error("Error adding chain:", error);
    }
  };

  return <button onClick={handleAddChain}>Add Chain</button>;
}

Parameters​

Hook Arguments​

NameTypeRequiredDescription
onSuccess(chainInfo: ChainInfo) => voidNoCallback function executed on successful addition
onError(error: Error, chainInfo: ChainInfo) => voidNoCallback function executed on error
onLoading(chainInfo: ChainInfo) => voidNoCallback function executed when mutation starts

Mutation Arguments​

The addChain and addChainAsync functions accept an object with the following properties:

NameTypeRequiredDescription
chainInfoChainInfoYesChain information object from @keplr-wallet/types

Return Values​

NameTypeDescription
addChain(args: AddChainArgs) => voidFunction to trigger chain addition
addChainAsync(args: AddChainArgs) => Promise<ChainInfo>Async function to trigger chain addition
errorError | nullError object if mutation failed
isLoadingbooleanWhether the mutation is in progress
isSuccessbooleanWhether the mutation was successful
status"idle" | "pending" | "success" | "error"Current status of the mutation

ChainInfo Structure​

The ChainInfo object follows the Keplr wallet type definition. Here's a minimal example:

import type { ChainInfo } from "@keplr-wallet/types";

const chainInfo: ChainInfo = {
  chainId: "cosmoshub-4",
  chainName: "Cosmos Hub",
  rpc: "https://rpc.cosmos.network",
  rest: "https://lcd.cosmos.network",
  bip44: {
    coinType: 118,
  },
  bech32Config: {
    bech32PrefixAccAddr: "cosmos",
    bech32PrefixAccPub: "cosmospub",
    bech32PrefixValAddr: "cosmosvaloper",
    bech32PrefixValPub: "cosmosvaloperpub",
    bech32PrefixConsAddr: "cosmosvalcons",
    bech32PrefixConsPub: "cosmosvalconspub",
  },
  currencies: [
    {
      coinDenom: "ATOM",
      coinMinimalDenom: "uatom",
      coinDecimals: 6,
    },
  ],
  feeCurrencies: [
    {
      coinDenom: "ATOM",
      coinMinimalDenom: "uatom",
      coinDecimals: 6,
      gasPriceStep: {
        low: 0.01,
        average: 0.025,
        high: 0.03,
      },
    },
  ],
  stakeCurrency: {
    coinDenom: "ATOM",
    coinMinimalDenom: "uatom",
    coinDecimals: 6,
  },
};

Notes​

  • This hook only adds the chain to graz's internal store. It does not suggest the chain to the user's wallet.
  • If a chain with the same chainId already exists, the mutation will throw an error.
  • After adding a chain, it becomes available for connection via useConnect.
  • For suggesting a chain to the wallet, use useSuggestChain instead.
  • To add a chain and suggest it to the wallet in one step, use useSuggestChainAndConnect.

See Also​