rainbow-me / rainbowkit

The best way to connect a wallet 🌈 🧰
https://rainbowkit.com
MIT License
2.44k stars 664 forks source link

[bug] Only MetaMask and Coinbase wallets able to connect #772

Closed hey-key closed 1 year ago

hey-key commented 2 years ago

Is there an existing issue for this?

RainbowKit Version

0.4.0

wagmi Version

0.5.0

Current Behavior

I've added all wallets in the list for connectorsForWallets function. The wallets appears in the Rainbow Modal list as expected. When I press MetaMask it opens my MetaMask to connect. When I press Coinbase it opens the QR code to connect, when I press any other wallet (Trust, WalletConnect, Ledger, Steak, Argent, etc) to connect, nothing happens. I dont see any QR appearing to the right. Niether Ledger Live tries to connect.

Environment

Local, using Goerli testnet for Eth

Expected Behavior

Pressing any wallet from the available list, would open a QR code, or try to connect the hardware (Ledger).

Steps To Reproduce

Im using Vite React. This is my package.json

 "dependencies": {
    "@apollo/client": "^3.6.8",
    "@iconify-json/fa": "^1.1.1",
    "@iconify-json/logos": "^1.1.5",
    "@iconify/react": "^3.2.2",
    "@metamask/providers": "^9.1.0",
    "@rainbow-me/rainbowkit": "^0.4.0",
    "@stitches/react": "^1.2.8",
    "@types/apollo-upload-client": "^17.0.0",
    "@types/js-cookie": "^3.0.2",
    "@types/lodash-es": "^4.17.6",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.28.0",
    "@walletconnect/web3-provider": "^1.7.8",
    "@web3auth/web3auth": "^1.0.0",
    "@xstate/react": "^3.0.0",
    "apollo-upload-client": "^17.0.0",
    "axios": "^0.27.2",
    "buffer": "^6.0.3",
    "date-fns": "^2.28.0",
    "ethers": "^5.6.9",
    "formik": "^2.2.9",
    "framer-motion": "^6.3.16",
    "graphql": "^16.5.0",
    "js-cookie": "^3.0.1",
    "js-file-download": "^0.4.12",
    "js-sha3": "^0.8.0",
    "lodash-es": "^4.17.21",
    "magic-sdk": "^8.1.1",
    "modern-normalize": "^1.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.1",
    "react-helmet-async": "^1.3.0",
    "react-loading-skeleton": "^3.1.0",
    "react-query": "^3.39.1",
    "react-router-dom": "^6.3.0",
    "slate": "^0.82.1",
    "slate-history": "^0.66.0",
    "slate-react": "^0.82.1",
    "socket.io-client": "^4.5.1",
    "ts-enum-util": "^4.0.2",
    "uuid": "^8.3.2",
    "vite-plugin-env-compatible": "^1.1.1",
    "wagmi": "^0.5.0",
    "web3": "^1.7.3",
    "web3-utils": "^1.7.3",
    "xstate": "^4.32.1",
    "yup": "^0.32.11",
    "zustand": "^4.0.0-rc.1"
  },

This is my wallet Provider:

const { chains, provider, webSocketProvider } = configureChains(
  getConfiguredChains(),
  [
    alchemyProvider({
      alchemyId: '_gg7wS......kC',
    }),
    publicProvider(),
  ]
);

const connectors = connectorsForWallets([
  {
    groupName: 'Wallets',
    wallets: [
      wallet.metaMask({ chains }),
      wallet.argent({ chains }),
      wallet.walletConnect({ chains }),
      wallet.ledger({ chains }),
      wallet.coinbase({ chains, appName: 'My App' }),
      wallet.rainbow({ chains }),
      wallet.trust({ chains }),
      wallet.steak({ chains }),
      wallet.imToken({ chains }),
    ],
  },
]);

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
  webSocketProvider,
});

export const WalletProvider: React.FC<Props> = ({ children }) => {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider
        chains={chains}
        avatar={RainbowKitAvatar}
        appInfo={{
          appName: 'My App',
        }}
      >
        {children}
      </RainbowKitProvider>
    </WagmiConfig>
  );
};

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

nickbytes commented 1 year ago

Can you link to a minimal reproducible example @hey-key ? Feel free to reopen if still an issue.

This looks fine in our example application: https://rainbowkit-example.vercel.app/