Skip to main content

Prerequisites

Before integrating Para with Arc Chain, ensure you have:
  • A Para API key from the Para Developer Portal
  • Node.js 18+ and Next.js development environment
  • Basic familiarity with React and TypeScript

Installation

npm install @getpara/react-sdk Please make sure to be on version 2.2.0

Setup Para Provider

Create a ParaSDKProvider that communicates with Arc Chain.
from "@para/sdk-react";

const ARC_TESTNET = {
  name: "Arc Testnet",
  evmChainId: "5042002" as const,
  nativeTokenSymbol: "USDC",
  logoUrl:
    "<YOUR_ARC_LOGO_URL>", // Replace with your Arc logo URL
  rpcUrl: "https://rpc.testnet.arc.network",
  explorer: {
    name: "ArcScan Testnet Explorer",
    url: "https://testnet.arcscan.app",
    txUrlFormat:
      "https://testnet.arcscan.app/tx/{HASH}",
  },
  isTestnet: true,
};

export function ParaProvider({ children }: { children: React.ReactNode }) {
  return (
    <ParaSDKProvider
      paraClientConfig={{
        apiKey: API_KEY,
        env: ENVIRONMENT,
      }}
      externalWalletConfig={{
        wallets: ["METAMASK", "WALLETCONNECT"],
        includeWalletVerification: true,
        evmConnector: {
          config: {
            chains: [ARC_TESTNET],
          },
        },
        walletConnect: {
          projectId:
            process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "",
        },
      }}
      config={{
        appName: "Para Modal + EVM Wallets Example",
      }}
      paraModalConfig={{
        balances: {
          displayType: "AGGREGATED",
          requestType: "MAINNET_AND_TESTNET",
          additionalAssets: [
            {
              name: "USDC",
              symbol: "USDC",
              logoUrl:
                "<YOUR_ARC_LOGO_URL>", // Replace with your Arc logo URL
              implementations: [
                {
                  network: ARC_TESTNET,
                },
              ],
            },
          ],
        },
        disableEmailLogin: false,
        disablePhoneLogin: false,
        authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
        oAuthMethods: ["GOOGLE"],
        onRampTestMode: true,
        theme: {
          foregroundColor: "#222222",
          backgroundColor: "#FFFFFF",
          accentColor: "#888888",
          darkForegroundColor: "#EEEEEE",
          darkBackgroundColor: "#111111",
          darkAccentColor: "#AAAAAA",
          mode: "light",
          borderRadius: "none",
          font: "Inter",
        },
        logo: "/para.svg",
        recoverySecretStepEnabled: true,
        twoFactorAuthEnabled: false,
      }}
    >
      {children}
    </ParaSDKProvider>
  );
}

Key Features

This integration provides a way to use Para Wallet with Arc Chain, an EVM-compatible L1 blockchain that uses USDC as its native gas token for predictable fiat-based transaction fees. Arc features sub-second deterministic finality and is designed for programmable money, lending, capital markets, FX, and payments.