Skip to main content

🪝 Installation

Get KryptoGO Kit up and running Quick start, or using a manual setup.

Quick start​

To scaffold a new KryptoGO Kit + wagmi + Next.js app, use one of the following commands with your preferred package manager:

npm init @kryptogo/kryptogokit@latest
# or
yarn create @kryptogo/kryptogokit@latest
# or
pnpm create @kryptogo/kryptogokit@latest

This will prompt you for a project name, generate a new directory containing a boilerplate project, and install all required dependencies.

Alternatively, you can manually integrate KryptoGOKit into your existing project.

Manual setup​

Install KryptoGOKit and its peer dependencies, wagmi and ethers.

npm install @kryptogo/kryptogokit wagmi ethers

Import​

Import kryptogokit, wagmi, and ethers.

import '@kryptogo/kryptogokit/styles.css';

import {
  getDefaultWallets,
  KG WalletKitProvider,
} from '@kryptogo/kryptogokit';
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

Configure​

Configure your desired chains and generate the required connectors. You will also need to setup a wagmi client.

...
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My KryptoGO Kit App',
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

Read more about configuring chains & providers with wagmi.

Wrap providers​

Wrap your application with KryptogoKitProvider and WagmiConfig.

const App = () => {
  return (
    <WagmiConfig client={wagmiClient}>
      <KryptogoKitProvider chains={chains}>
        </* Your App */>
      </KryptogoKitProvider>
    </WagmiConfig>
  );
};

Add the connect button​

Then, in your app, import and render the ConnectButton component.

import { ConnectButton } from '@kryptogo/kryptogokit';

export const YourApp = () => {
  return <ConnectButton />;
};

KryptoGO Kit will now manage your user's wallet selection, display wallet and transaction information, and handle network and wallet switching.

Remix​

When using [Remix] (https://remix.run/), KryptoGO Kit must be added to your list of server dependencies since it's published as an ESM package.

Add your own functionality​

Now that your users can connect their wallets, you can start building out the rest of your app using wagmi.

Send transactions, interact with contracts, resolve ENS details and much more with wagmi’s comprehensive suite of React Hooks.

For more detail, view the wagmi documentation.

Further examples​

To see some running examples of KryptoGO Kit, or even use them to automatically scaffold a new project, check out the official examples.