feat: add coinbase wallet support

mrgnlabs · Nov 20, 2023 · 0dff1cd · 0dff1cd
1 parent a69b254
commit 0dff1cd
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 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
@@ -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
@@ -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
@@ -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: {