Next dapp template

git clone https://github.com/whitechain-labs/templates.git
cd templates/whitechain-dapp-nextjs

corepack enable
pnpm install

cp .env.example .env

pnpm dev

export const whitechainTestnet: Chain = defineChain({
  ...chainConfig,
  id: 1874,
  name: 'Whitechain Sepolia',
  testnet: true,
  nativeCurrency: { decimals: 18, name: 'WhiteBIT Coin', symbol: 'WBT' },
  rpcUrls: { default: { http: ['https://rpc.testnet.whitechain.io'] } },
  blockExplorers: {
    default: { name: 'Whitechain Explorer', url: 'https://explorer.testnet.whitechain.io' },
  },
});

const adapter = new WagmiAdapter({ projectId, networks, ssr: true });
createAppKit({ adapters: [adapter], projectId, networks, enableCoinbase: false });
export const wagmiConfig = adapter.wagmiConfig;

'use client';

export function Providers({ children }: { children: ReactNode }) {
  const [queryClient] = useState(
    () => new QueryClient({ defaultOptions: { queries: { staleTime: 10_000, retry: 2 } } }),
  );
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

export function useWallet(): WalletState {
  const { address, chainId, isConnected, isConnecting, connector } = useConnection();
  const { mutate: disconnect } = useDisconnect();
  const { mutate: switchChain } = useSwitchChain();
  return {
    address, chainId, isConnected, isConnecting, connector, disconnect,
    switchChain: (id: number) => switchChain({ chainId: id }),
  };
}

const { open } = useAppKit();
const { address, isConnected, isConnecting, disconnect } = useWallet();
const { data: balance } = useBalance({
  address,
  chainId: targetChainId,
  query: { enabled: Boolean(address) },
});

if (!isConnected) {
  return <Button loading={isConnecting} onClick={() => void open()}>Connect wallet</Button>;
}
// Connected: show the address, the formatted balance, and a Disconnect button.

const { data: storedValue, refetch } = useReadContract({
  abi: storageAbi,
  address: storageAddress,
  functionName: 'retrieve',
  chainId: targetChainId,
  query: { enabled: Boolean(storageAddress) },
});

const { mutate: storeValue, data: txHash } = useWriteContract();
const receipt = useWaitForTransactionReceipt({ hash: txHash, chainId: targetChainId });

useEffect(() => {
  if (receipt.isSuccess) void refetch();
}, [receipt.isSuccess, refetch]);

// On submit:
storeValue({
  abi: storageAbi,
  address: storageAddress,
  functionName: 'store',
  args: [BigInt(inputValue)],
  chainId: targetChainId,
});