From 0dff1cdb5a64dbb24a3d57105ffb6537cad97e6f Mon Sep 17 00:00:00 2001
From: Adam Chambers <adammchambers@gmail.com>
Date: Mon, 20 Nov 2023 16:00:33 -0500
Subject: [PATCH] feat: add coinbase wallet support

---
 .../common/Wallet/WalletAuthDialog.tsx        |  4 ++-
 .../src/components/ui/icons.tsx               | 30 +++++++++++++++++++
 apps/marginfi-v2-ui/src/config/wallets.ts     |  2 ++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/apps/marginfi-v2-ui/src/components/common/Wallet/WalletAuthDialog.tsx b/apps/marginfi-v2-ui/src/components/common/Wallet/WalletAuthDialog.tsx
index 573df5e045..f53c507628 100644
--- a/apps/marginfi-v2-ui/src/components/common/Wallet/WalletAuthDialog.tsx
+++ b/apps/marginfi-v2-ui/src/components/common/Wallet/WalletAuthDialog.tsx
@@ -19,6 +19,7 @@ import {
   IconBrandApple,
   IconBrandGoogle,
   IconBraveWallet,
+  IconCoinbaseWallet,
   IconPhantomWallet,
   IconBackpackWallet,
   IconSolflareWallet,
@@ -55,6 +56,7 @@ const socialProviders: {
 // wallet login options
 const walletIcons: { [key: string]: React.ReactNode } = {
   "Brave Wallet": <IconBraveWallet size={28} />,
+  "Coinbase Wallet": <IconCoinbaseWallet size={28} />,
   Phantom: <IconPhantomWallet size={28} />,
   Solflare: <IconSolflareWallet size={28} />,
   Backpack: <IconBackpackWallet size={28} />,
@@ -228,7 +230,7 @@ export const WalletAuthDialog = () => {
                 <ul className="flex items-center justify-center gap-4 mt-6 mb-2">
                   {filteredWallets.map((wallet, i) => {
                     const img = walletIcons[wallet.adapter.name] || (
-                      <Image src={wallet.adapter.icon} alt={wallet.adapter.name} />
+                      <Image src={wallet.adapter.icon} width={28} height={28} alt={wallet.adapter.name} />
                     );
                     return (
                       <li key={i}>
diff --git a/apps/marginfi-v2-ui/src/components/ui/icons.tsx b/apps/marginfi-v2-ui/src/components/ui/icons.tsx
index 27b95d4185..622e7819af 100644
--- a/apps/marginfi-v2-ui/src/components/ui/icons.tsx
+++ b/apps/marginfi-v2-ui/src/components/ui/icons.tsx
@@ -80,6 +80,35 @@ const IconBraveWallet = ({ size = 24, className }: IconProps) => (
   </svg>
 );
 
+const IconCoinbaseWallet = ({ size = 24, className }: IconProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_3_2)">
+      <path
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="#0052FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.5625 12C3.5625 16.6599 7.34009 20.4375 12 20.4375C16.6599 20.4375 20.4375 16.6599 20.4375 12C20.4375 7.34009 16.6599 3.5625 12 3.5625C7.34009 3.5625 3.5625 7.34009 3.5625 12ZM9.84375 9.28125C9.53309 9.28125 9.28125 9.53309 9.28125 9.84375V14.1562C9.28125 14.4669 9.53309 14.7188 9.84375 14.7188H14.1562C14.4669 14.7188 14.7188 14.4669 14.7188 14.1562V9.84375C14.7188 9.53309 14.4669 9.28125 14.1562 9.28125H9.84375Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3_2">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
 const IconBrandGoogle = ({ size = 24, className }: IconProps) => (
   <svg
     width={size}
@@ -368,6 +397,7 @@ export {
   // customed icons
   IconBrandGoogle,
   IconBraveWallet,
+  IconCoinbaseWallet,
   IconPhantomWallet,
   IconSolflareWallet,
   IconBackpackWallet,
diff --git a/apps/marginfi-v2-ui/src/config/wallets.ts b/apps/marginfi-v2-ui/src/config/wallets.ts
index eb634f26af..104548cb10 100644
--- a/apps/marginfi-v2-ui/src/config/wallets.ts
+++ b/apps/marginfi-v2-ui/src/config/wallets.ts
@@ -4,6 +4,7 @@ import {
   GlowWalletAdapter,
   BackpackWalletAdapter,
   WalletConnectWalletAdapter,
+  CoinbaseWalletAdapter,
 } from "@solana/wallet-adapter-wallets";
 import {
   createDefaultAddressSelector,
@@ -29,6 +30,7 @@ export const WALLET_ADAPTERS = [
   new SolflareWalletAdapter(),
   new BackpackWalletAdapter(),
   new GlowWalletAdapter(),
+  new CoinbaseWalletAdapter(),
   new WalletConnectWalletAdapter({
     network: WalletAdapterNetwork.Mainnet,
     options: {