nasdf / wagmi-magic-connector Goto Github PK

[{
	"resource": ".../src/config/wagmi.ts",
	"owner": "typescript",
	"code": "2322",
	"severity": 8,
	"message": "Type '{ id: string; name: string; iconUrl: string; iconBackground: string; createConnector: () => { connector: MagicConnector; }; }' is not assignable to type 'Wallet<Connector<any, any, any>>'.\n  The types of 'createConnector().connector' are incompatible between these types.\n    Type 'MagicConnector' is not assignable to type 'Connector<any, any, any>'.\n      Property 'onAccountsChanged' is protected but type 'MagicConnector' is not a class derived from 'Connector<Provider, Options, Signer>'.",
	"source": "ts",
	"startLineNumber": 115,
	"startColumn": 7,
	"endLineNumber": 115,
	"endColumn": 40
}]

act_devtools_backend_compact.js:2367 Error: login method undefined
    at _a.connect (index.ts:49:31)
    at async connect (chunk-VQG3VKOR.js:727:18)
o

import { MagicConnector } from '@nasdf/wagmi-magic-connector'

const apiKey = import.meta.env.VITE_YOUR_MAGIC_CONNECT_API_KEY;

if (!apiKey) {
    throw new Error('API key not found. Please check your environment variables.');
  }

const network = {
  rpcUrl: 'https://poly-mainnet.gateway.pokt.network/v1/lb/f3ebd729f40522b268bd0bc5', // your ethereum, polygon, or optimism mainnet/testnet rpc URL
  chainId: 137,
}

const rainbowMagicConnector = ({ chains }: any) => ({
  id: 'magic',
  name: 'Email',
  iconUrl: 'https://svgshare.com/i/iJK.svg',
  iconBackground: '#fff',
  createConnector: () => {
    const connector = new MagicConnector({
      chains: chains,
      options: {
        apiKey: apiKey as string,
        network: network,
      },
    })
    return {
      connector,
    };
  },
});

export const { chains, provider } = configureChains([polygon], [
  jsonRpcProvider({
    rpc: (chain) => {
      switch (chain.id) {
        case 1:
          return {
            http: "https://eth-mainnet.gateway.pokt.network/v1/lb/f3ebd729f40522b268bd0bc5",
          };
        case 5:
          return {
            http: "https://eth-goerli.gateway.pokt.network/v1/lb/f3ebd729f40522b268bd0bc5",
          };
        case 137:
          return {
            http: "https://poly-mainnet.gateway.pokt.network/v1/lb/f3ebd729f40522b268bd0bc5",
          };
        case 43114:
          return {
            http: "https://avax-mainnet.gateway.pokt.network/v1/lb/f3ebd729f40522b268bd0bc5",
          };
        default:
          return {
            http: "https://eth-mainnet.gateway.pokt.network/v1/lb/f3ebd729f40522b268bd0bc5",
          };
      }
    },
  }),
]);

export const connectors = connectorsForWallets([
  {
    groupName: "Recommended",
    wallets: [
      coinbaseWallet({ appName: "Trelis Pay", chains }),
      metaMaskWallet({ chains, shimDisconnect: true }),
      walletConnectWallet({ chains }),
      rainbowMagicConnector({ chains }),
    ],
  },...