Web3Auth / web3auth-wagmi-connector

Web3Auth connector for wagmi
25 stars 24 forks source link

Module not found: Can't resolve '@wagmi/core' #56

Closed ArturVargas closed 1 year ago

ArturVargas commented 1 year ago

Depencies: "@rainbow-me/rainbowkit": "^0.12.2", "@web3auth/base": "^5.0.1", "@web3auth/core": "^4.6.0", "@web3auth/no-modal": "^5.0.1", "@web3auth/openlogin-adapter": "^5.0.1", "@web3auth/web3auth-wagmi-connector": "^3.0.0", "ethers": "^5.7.0", "next": "^13.0.0", "react": "^18.2.0", "react-bootstrap": "^2.7.1", "react-dom": "^18.2.0", "wagmi": "^0.12.2"

Connector Code:

import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3AuthCore } from "@web3auth/core";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { CHAIN_NAMESPACES } from "@web3auth/base";

const name = "Login with Google";
const iconUrl =
  "https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-google-icon-logo-png-transparent-svg-vector-bie-supply-14.png";

export const web3AuthConnector = ({ chains }: any) => {

  const web3AuthInstance = new Web3AuthCore({
    clientId:
      "BJmkK9IK0n0-.....",
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      chainId: "0x" + chains[0].id.toString(16),
      rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
      displayName: chains[0].name,
      tickerName: chains[0].nativeCurrency?.name,
      ticker: chains[0].nativeCurrency?.symbol,
      blockExplorer: chains[0]?.blockExplorers?.default?.url,
    },
  });

  //   // Add openlogin adapter for customisations
  const openloginAdapterInstance = new OpenloginAdapter({
    adapterSettings: {
      network: "cyan",
      uxMode: "popup",
      whiteLabel: {
        name: "Buks",
        logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
        logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
        defaultLanguage: "en",
        dark: true, // whether to enable dark mode. defaultValue: false
      },
    },
  });
  web3AuthInstance.configureAdapter(openloginAdapterInstance);

  return {
    id: "web3auth",
    name,
    iconUrl,
    iconBackground: "#fff",
    createConnector: () => {
      const connector = new Web3AuthConnector({
        chains: chains,
        options: {
          web3AuthInstance,
          loginParams: {
            loginProvider: "google",
          },
        },
      });
      return {
        connector,
      };
    },
  };
};

Wagmi implementation:

const connectors = connectorsForWallets([
  {
    groupName: "Recommended",
    wallets: [coreWallet({ chains })],
  },
  {
    groupName: "Popular",
    wallets: [
      rainbowWallet({ chains }),
      coinbaseWallet({ chains, appName: "Buks" }),
      walletConnectWallet({ chains }),
    ],
  },
  {
    groupName: "Other",
    wallets: [web3AuthConnector({ chains })] as any,
  },
]);

export const client = createClient({
  autoConnect: true,
  connectors,
  provider,
});

Error Log:

Error_Log
yashovardhan commented 1 year ago

Hey @ArturVargas can you please open up a thread around this on https://community.web3auth.io?