Merge branch 'add-guild-page' of github.com:guildxyz/guild.xyz into a…

…dd-custom-error-handling
guildxyz · Dec 10, 2024 · 1593e3d · 1593e3d
2 parents 1b0e001 + b5215ec
commit 1593e3d
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 28 deletions.
diff --git a/public/guild-icon.png b/public/guild-icon.png
diff --git a/public/walletLogos/brave.svg b/public/walletLogos/brave.svg
diff --git a/public/walletLogos/coinbasewallet.png b/public/walletLogos/coinbasewallet.png
diff --git a/public/walletLogos/walletconnect.svg b/public/walletLogos/walletconnect.svg
diff --git 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 (
     <div className="grid gap-8">
       <div className="grid gap-2">
-        {connectors.map((connector) => (
-          <Button
-            key={connector.uid}
-            onClick={() => connect({ connector })}
-            leftIcon={
-              connector.icon ? (
-                <img
-                  src={connector.icon}
-                  alt={`${connector.name} icon`}
-                  className="size-6"
-                />
-              ) : (
-                <Wallet weight="bold" className="size-6" />
-              )
-            }
-            size="xl"
-            isLoading={
-              !!variables?.connector &&
-              "id" in variables.connector &&
-              variables.connector.id === connector.id &&
-              isPending
-            }
-            loadingText="Check your wallet"
-            className="justify-start"
-          >
-            {connector.name}
-          </Button>
-        ))}
+        {connectors.map((connector) => {
+          const connetorIcon =
+            CUSTOM_CONNECTOR_ICONS[
+              connector.id as keyof typeof CUSTOM_CONNECTOR_ICONS
+            ] ?? connector.icon;
+          return (
+            <Button
+              key={connector.uid}
+              onClick={() => connect({ connector })}
+              leftIcon={
+                connetorIcon ? (
+                  <img
+                    src={connetorIcon}
+                    alt={`${connector.name} icon`}
+                    className="size-6"
+                  />
+                ) : (
+                  <Wallet weight="bold" className="size-6" />
+                )
+              }
+              size="xl"
+              isLoading={
+                !!variables?.connector &&
+                "id" in variables.connector &&
+                variables.connector.id === connector.id &&
+                isPending
+              }
+              loadingText="Check your wallet"
+              className="justify-start"
+            >
+              {connector.name}
+            </Button>
+          );
+        })}
       </div>
 
       <div className="grid gap-2 text-center text-foreground-secondary text-sm">

diff --git 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
@@ -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,
   },
 });