diff --git a/public/guild-icon.png b/public/guild-icon.png new file mode 100644 index 0000000000..d3de5cafb6 Binary files /dev/null and b/public/guild-icon.png differ diff --git a/public/walletLogos/brave.svg b/public/walletLogos/brave.svg new file mode 100644 index 0000000000..e3749a6553 --- /dev/null +++ b/public/walletLogos/brave.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/walletLogos/coinbasewallet.png b/public/walletLogos/coinbasewallet.png new file mode 100644 index 0000000000..8e057ea919 Binary files /dev/null and b/public/walletLogos/coinbasewallet.png differ diff --git a/public/walletLogos/walletconnect.svg b/public/walletLogos/walletconnect.svg new file mode 100644 index 0000000000..a2243de999 --- /dev/null +++ b/public/walletLogos/walletconnect.svg @@ -0,0 +1,12 @@ + + + + WalletConnect + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/SignInDialog.tsx b/src/components/SignInDialog.tsx index cb75cb13ba..740745b7ad 100644 --- a/src/components/SignInDialog.tsx +++ b/src/components/SignInDialog.tsx @@ -22,6 +22,12 @@ import { ResponsiveDialogTitle, } from "./ui/ResponsiveDialog"; +const CUSTOM_CONNECTOR_ICONS = { + "com.brave.wallet": "/walletLogos/brave.svg", + walletConnect: "/walletLogos/walletconnect.svg", + coinbaseWalletSDK: "/walletLogos/coinbasewallet.png", +} as const; + export const SignInDialog = () => { const { isConnected } = useAccount(); const [open, setOpen] = useAtom(signInDialogOpenAtom); @@ -49,34 +55,40 @@ const WalletList = () => { return (
- {connectors.map((connector) => ( - - ))} + {connectors.map((connector) => { + const connetorIcon = + CUSTOM_CONNECTOR_ICONS[ + connector.id as keyof typeof CUSTOM_CONNECTOR_ICONS + ] ?? connector.icon; + return ( + + ); + })}
diff --git a/src/config/wagmi.ts b/src/config/wagmi.ts index 5d4bb14c22..c1a4c3d84e 100644 --- a/src/config/wagmi.ts +++ b/src/config/wagmi.ts @@ -1,5 +1,7 @@ +import { env } from "@/lib/env"; import { http, createConfig } from "wagmi"; import { mainnet, sepolia } from "wagmi/chains"; +import { coinbaseWallet, injected, walletConnect } from "wagmi/connectors"; export const wagmiConfig = createConfig({ chains: [mainnet, sepolia], @@ -8,6 +10,18 @@ export const wagmiConfig = createConfig({ [sepolia.id]: http(), }, ssr: true, + connectors: [ + injected(), + coinbaseWallet({ + appName: "Guild.xyz", + appLogoUrl: "https://guild.xyz/guild-icon.png", + version: "4", + }), + walletConnect({ + projectId: env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID, + showQrModal: true, + }), + ], }); declare module "wagmi" { diff --git a/src/lib/env.ts b/src/lib/env.ts index 17cd757fc7..0eba167f95 100644 --- a/src/lib/env.ts +++ b/src/lib/env.ts @@ -11,11 +11,14 @@ export const env = createEnv({ client: { NEXT_PUBLIC_API: z.string().url(), NEXT_PUBLIC_PINATA_GATEWAY_URL: z.string().url(), + NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: z.string(), }, runtimeEnv: { NEXT_PUBLIC_API: process.env.NEXT_PUBLIC_API_V3, PINATA_ADMIN_JWT: process.env.PINATA_ADMIN_JWT, NEXT_PUBLIC_PINATA_GATEWAY_URL: process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL, + NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: + process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID, LOGGING: process.env.LOGGING, }, });