Styling Connectors

1
import {
2
  createConfig,
3
  cookieStorage,
4
  configForExternalWallets,
5
} from "@account-kit/react";
6
import { alchemy, sepolia } from "@account-kit/infra";
7
import { Connection } from "@solana/web3.js";
8
9
export const externalWalletsConfig = configForExternalWallets({
10
  // Preferred order (case-insensitive). Use "wallet_connect" for WalletConnect.
11
  wallets: ["wallet_connect", "phantom", "metamask", "coinbase wallet"],
12
  // Which chains to surface (filter to ["evm"] or ["svm"] if needed)
13
  chainType: ["svm", "evm"],
14
  // EVM-only
15
  walletConnectProjectId: "your-project-id",
16
  // Built-in Featured section controls
17
  hideMoreButton: false,
18
  numFeaturedWallets: 4,
19
});
20
21
export const config = createConfig(
22
  {
23
    transport: alchemy({ apiKey: "YOUR_API_KEY" }),
24
    chain: sepolia,
25
    storage: cookieStorage,
26
    solana: {
27
      connection: new Connection(
28
        `https://solana-devnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_API_KEY}`,
29
      ),
30
      adapters: externalWalletsConfig.adapters,
31
      // optional
32
      policyId: process.env.NEXT_PUBLIC_SOLANA_POLICY_ID,
33
    },
34
    connectors: externalWalletsConfig.connectors,
35
  },
36
  {
37
    auth: {
38
      sections: [
39
        [{ type: "email" }],
40
        [
41
          { type: "passkey" },
42
          { type: "social", authProviderId: "google", mode: "popup" },
43
        ],
44
        [
45
          // Spread the pre-configured UI for external wallets
46
          { type: "external_wallets", ...externalWalletsConfig.uiConfig },
47
        ],
48
      ],
49
    },
50
  },
51
);

1
import { useConnect } from "@account-kit/react";
2
3
const { connect, connectors } = useConnect();
4
const metaMask = connectors.find((c) => c.id === "metaMask");
5
await connect({ connector: metaMask! });

1
import { useSolanaWallet } from "@account-kit/react";
2
3
const { select, wallets } = useSolanaWallet();
4
const phantom = wallets.find((w) => w.name.toLowerCase() === "phantom");
5
if (phantom) await select(phantom.adapter.name);