Skip to main content

Scaffold

npx create-inco-app@latest my-app --wallet dynamic --framework hardhat --chain evm --yes
This scaffolds the full monorepo with Dynamic as the wallet provider. For just the frontend, add --template frontend.

Environment Setup

Get your Environment ID from app.dynamic.xyz and set it in frontend/.env:
frontend/.env
# Base network: "testnet" (Base Sepolia, default) or "mainnet" (Base Mainnet)
NEXT_PUBLIC_NETWORK=testnet

NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=your_environment_id_here

# Your deployed contract address
NEXT_PUBLIC_CONFLOTTERY_ADDRESS=<deployed_contract_address>

Provider Setup

Dynamic wraps your app with DynamicContextProvider + a wagmi connector (DynamicWagmiConnector). The EVM network it shows is built from activeChain in lib/network.ts, which follows NEXT_PUBLIC_NETWORK — no per-provider chain edits needed.
components/Providers.tsx
"use client";

import { ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider, createConfig, http } from "wagmi";
import {
  DynamicContextProvider,
  DynamicWidget,
} from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { ThemeProvider } from "next-themes";
import { activeChain } from "@/lib/network";

const queryClient = new QueryClient();

const environmentId = process.env.NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID || "";

const config = createConfig({
  chains: [activeChain],
  multiInjectedProviderDiscovery: false,
  transports: {
    [activeChain.id]: http(),
  },
  ssr: true,
});

const evmNetworks = [
  {
    blockExplorerUrls: [activeChain.blockExplorers?.default.url ?? ""],
    chainId: activeChain.id,
    name: activeChain.name,
    rpcUrls: [activeChain.rpcUrls.default.http[0]],
    iconUrls: ["https://avatars.githubusercontent.com/u/108554348?v=4"],
    nativeCurrency: activeChain.nativeCurrency,
    networkId: activeChain.id,
  },
];

const Providers = ({ children }: { children: ReactNode }) => {
  if (!environmentId) {
    console.warn(
      "Missing NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID. Get one at https://app.dynamic.xyz/"
    );
  }

  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      <DynamicContextProvider
        settings={{
          environmentId,
          walletConnectors: [EthereumWalletConnectors],
          overrides: { evmNetworks },
        }}
      >
        <WagmiProvider config={config}>
          <QueryClientProvider client={queryClient}>
            <DynamicWagmiConnector>{children}</DynamicWagmiConnector>
          </QueryClientProvider>
        </WagmiProvider>
      </DynamicContextProvider>
    </ThemeProvider>
  );
};

export { Providers };
Provider hierarchy: ThemeProviderDynamicContextProviderWagmiProviderQueryClientProviderDynamicWagmiConnector

Inco SDK Integration

The Inco SDK works with the walletClient provided by wagmi (which Dynamic supplies via DynamicWagmiConnector). The network-aware client comes from lib/network.ts:
hooks/useConfLottery.ts
import { getIncoLightning } from "@/lib/network";
import { handleTypes } from "@inco/lightning-js";
import { useAccount, useWalletClient } from "wagmi";
import { parseEther } from "viem";

const { address } = useAccount();
const { data: walletClient } = useWalletClient();

// Network (Base Sepolia / Mainnet) is selected centrally in lib/network.ts via NEXT_PUBLIC_NETWORK.
const zap = await getIncoLightning();

// Encrypt a value before sending on-chain
const ciphertext = await zap.encrypt(parseEther(amount), {
  accountAddress: address,
  dappAddress: LOTTERY_ADDRESS,
  handleType: handleTypes.euint256,
});

// Decrypt a handle with attestation (e.g. check if the user won)
const [result] = await zap.attestedDecrypt(walletClient, [encryptedHandle]);
const isWinner = result.plaintext.value; // boolean for an ebool handle

Dependencies

PackagePurpose
@dynamic-labs/sdk-react-coreDynamic auth & wallet UI
@dynamic-labs/ethereumEVM wallet connectors
@dynamic-labs/wagmi-connectorDynamic ↔ wagmi connector
@inco/lightning-jsInco encryption/decryption
wagmiEVM wallet hooks
viemEthereum utilities