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 @@
+
+
\ 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,
},
});