SnowConeKit Logo
SnowConeKit
0.1.86

Installation

Get up and running with SnowConeKit

Install SnowConeKit and its peer dependencies, wagmi and ethers.

npm install @snowcone/snowconekit wagmi ethers

Note: SnowConeKit is a React library.

Import SnowConeKit, wagmi, and ethers.

import '@snowcone/snowconekit/styles.css';
import { getDefaultWallets, SnowConeKitProvider, } from '@snowcone/snowconekit';
import { chain, configureChains, createClient, WagmiConfig, } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

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({ alchemyId: process.env.ALCHEMY_ID }),
publicProvider()
]
);
const { connectors } = getDefaultWallets({
appName: 'My SnowConeKit App',
chains
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider
})

Read more about configuring chains & providers with wagmi.

Wrap your application with SnowConeKitProvider and WagmiConfig.

const App = () => {
return (
<WagmiConfig client={wagmiClient}>
<SnowConeKitProvider chains={chains}>
<YourApp />
</SnowConeKitProvider>
</WagmiConfig>
);
};

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

import { ConnectButton } from '@snowcone/snowconekit';
export const YourApp = () => {
return <ConnectButton />;
};

You're done! SnowConeKit will now handle your user's wallet selection, display wallet/transaction information and handle network/wallet switching.

Note: If you're using Remix, remember to add SnowConeKit to its server dependencies.

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.

To see some running examples of SnowConeKit, or even use them to automatically scaffold a new project, check out the official snowconekit-examples repository.

To try SnowConeKit directly in your browser, check out the CodeSandbox links below: