Use ParaProvider

package.json

@@ -20,7 +20,6 @@
     "@farcaster/miniapp-wagmi-connector": "1.0.0",
     "@getpara/graz": "2.0.0-alpha.14",
     "@getpara/react-sdk": "2.0.0-alpha.50",
-    "@getpara/wagmi-v2-integration": "2.0.0-alpha.50",
     "@leapwallet/cosmos-social-login-capsule-provider": "0.0.44",
     "@radix-ui/react-slot": "^1.2.3",
     "@solana-mobile/wallet-adapter-mobile": "2.2.3",

src/constants/index.ts

@@ -2,30 +2,14 @@
 
 import { mainnet } from "wagmi/chains";
 import type { Chain } from "wagmi/chains";
-import { queryClient } from "@/provider/context/QueryProvider";
-import { paraConnector } from "@getpara/wagmi-v2-integration";
-import { metaMask, walletConnect } from "wagmi/connectors";
-import {
-  http,
-  createConfig,
-  cookieStorage,
-  createStorage,
-  type CreateConfigParameters,
-} from "wagmi";
-import { Environment, type TExternalWallet, ParaWeb } from "@getpara/react-sdk";
+import { Environment } from "@getpara/react-sdk";
 
 export const ENVIRONMENT =
-  process.env.NODE_ENV === "development" ? Environment.DEV : Environment.PROD;
+  process.env.NODE_ENV === "development" ? Environment.BETA : Environment.PROD;
 export const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY;
 export const WALLET_CONNECT_PROJECT_ID =
   process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID;
 
-export const EXTERNAL_WALLETS: TExternalWallet[] = [
-  "METAMASK",
-  "OKX",
-  "WALLETCONNECT",
-];
-
 if (!API_KEY || API_KEY === "") {
   throw new Error(
     "API key is not defined. Please set NEXT_PUBLIC_PARA_API_KEY in your environment variables."
@@ -38,13 +22,6 @@ if (!WALLET_CONNECT_PROJECT_ID || WALLET_CONNECT_PROJECT_ID === "") {
   );
 }
 
-const para =
-  typeof window !== "undefined"
-    ? new ParaWeb(ENVIRONMENT, API_KEY, {
-        externalWalletConnectionOnly: true,
-      })
-    : null;
-
 // Define Camp Network chains
 export const campNetwork: Chain & { iconUrl?: string } = {
   id: 484,
@@ -67,47 +44,3 @@ export const supportedChains = [
   campNetwork, // Camp Network (first - mainnet)
   mainnet, // Ethereum Mainnet
 ] as const;
-
-const connector = para
-  ? paraConnector({
-      appName: "Camp",
-      options: {},
-      chains: [campNetwork, mainnet],
-      para,
-      queryClient,
-      logo: "/camp-token.png",
-      theme: {
-        font: "Inter",
-        borderRadius: "sm",
-        backgroundColor: "#F9F7F4",
-        foregroundColor: "#FF6D01",
-        accentColor: "#FF5101",
-      },
-      oAuthMethods: ["GOOGLE", "TWITTER"],
-      disablePhoneLogin: true,
-      authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
-      recoverySecretStepEnabled: true,
-      onRampTestMode: true,
-    })
-  : null;
-
-const config = {
-  chains: [campNetwork, mainnet],
-  connectors: [
-    ...(connector ? [connector] : []),
-    walletConnect({
-      projectId: WALLET_CONNECT_PROJECT_ID,
-    }),
-    metaMask(),
-  ],
-  ssr: true,
-  storage: createStorage({
-    storage: cookieStorage,
-  }),
-  transports: {
-    [campNetwork.id]: http("https://rpc.camp.raas.gelato.cloud"), // Camp Network
-    [mainnet.id]: http(), // Ethereum Mainnet
-  },
-} as CreateConfigParameters;
-
-export const wagmiConfig = createConfig(config);

src/provider/context/ParaProvider.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ParaProvider as Provider } from "@getpara/react-sdk";
+import { mainnet } from "wagmi/chains";
+import { cookieStorage, createStorage, http } from "wagmi";
+import { API_KEY, campNetwork, ENVIRONMENT } from "@/constants";
+
+export function ParaProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <Provider
+      paraClientConfig={{
+        apiKey: API_KEY || "",
+        env: ENVIRONMENT,
+      }}
+      externalWalletConfig={{
+        wallets: ["METAMASK", "OKX", "WALLETCONNECT"],
+        evmConnector: {
+          config: {
+            chains: [campNetwork, mainnet],
+            transports: {
+              [campNetwork.id]: http("https://rpc.camp.raas.gelato.cloud"), // Camp Network
+              [mainnet.id]: http(), // Ethereum Mainnet
+            },
+            storage: createStorage({
+              storage: cookieStorage,
+            }),
+            ssr: true,
+          },
+        },
+        walletConnect: {
+          projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "",
+        },
+      }}
+      config={{ appName: "YOUR APP NAME!!!" }}
+      paraModalConfig={{
+        // CHANGE THIS CONFIG AS NEEDED
+        disableEmailLogin: false,
+        disablePhoneLogin: false,
+        authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
+        oAuthMethods: [
+          "APPLE",
+          "DISCORD",
+          "FACEBOOK",
+          "FARCASTER",
+          "GOOGLE",
+          "TWITTER",
+        ],
+        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}
+    </Provider>
+  );
+}

src/provider/index.tsx

@@ -2,18 +2,16 @@
 
 import "@getpara/react-sdk/styles.css";
 import { QueryProvider } from "./context/QueryProvider";
-import { WagmiProvider } from "./context/WagmiProvider";
+import { ParaProvider } from "./context/ParaProvider";
 
 export function Providers({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <WagmiProvider>
-      <QueryProvider>
-        {children}
-      </QueryProvider>
-    </WagmiProvider>
+    <QueryProvider>
+      <ParaProvider>{children}</ParaProvider>
+    </QueryProvider>
   );
 }