Feat/UI modal fix

packages/adapters/coinbase-adapter/src/coinbaseAdapter.ts

@@ -72,7 +72,7 @@ class CoinbaseAdapter extends BaseEvmAdapter<void> {
       ...this.coinbaseOptions,
       appChainIds: [Number.parseInt(this.chainConfig.chainId, 16)],
     });
-    this.coinbaseProvider = this.coinbaseInstance.makeWeb3Provider({ options: this.coinbaseOptions.options || "all" });
+    this.coinbaseProvider = this.coinbaseInstance.makeWeb3Provider({ options: this.coinbaseOptions.options || "smartWalletOnly" });
     this.status = ADAPTER_STATUS.READY;
     this.emit(ADAPTER_EVENTS.READY, WALLET_ADAPTERS.COINBASE);
     try {

packages/base/src/utils.ts

@@ -37,9 +37,10 @@ export interface WalletRegistryItem {
     universal?: string;
     inAppBrowser?: string;
   };
+  primaryColor?: string;
 }
 
-export type WalletRegistry = Record<string, WalletRegistryItem>;
+export type WalletRegistry = { others: Record<string, WalletRegistryItem>; default: Record<string, WalletRegistryItem> };
 
 export function storageAvailable(type: "sessionStorage" | "localStorage"): boolean {
   let storageExists = false;

packages/base/src/wallet/index.ts

@@ -30,5 +30,5 @@ export const ADAPTER_NAMES = {
   [MULTI_CHAIN_ADAPTERS.SFA]: "SFA",
   [SOLANA_ADAPTERS.TORUS_SOLANA]: "Torus",
   [EVM_ADAPTERS.TORUS_EVM]: "Torus",
-  [EVM_ADAPTERS.COINBASE]: "Coinbase",
+  [EVM_ADAPTERS.COINBASE]: "Coinbase Smart Wallet",
 };

packages/modal/src/modalManager.ts

@@ -2,6 +2,7 @@ import { AuthAdapter, AuthOptions, getAuthDefaultOptions, LOGIN_PROVIDER, LoginC
 import {
   ADAPTER_CATEGORY,
   ADAPTER_EVENTS,
+  ADAPTER_NAMES,
   ADAPTER_STATUS,
   BaseAdapterConfig,
   cloneDeep,
@@ -85,7 +86,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = getUserLanguage(this.options.uiConfig.defaultLanguage);
     if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
 
-    let walletRegistry: WalletRegistry = {};
+    let walletRegistry: WalletRegistry = { others: {}, default: {} };
     try {
       walletRegistry = await fetchWalletRegistry(walletRegistryUrl);
     } catch (e) {
@@ -126,7 +127,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     const adapterConfigurationPromises = allAdapters.map(async (adapterName) => {
       // start with the default config of adapter.
       let adapterConfig = this.modalConfig.adapters?.[adapterName] || {
-        label: adapterName.split("-").map(capitalizeFirstLetter).join(" "),
+        label: ADAPTER_NAMES[adapterName] || adapterName.split("-").map(capitalizeFirstLetter).join(" "),
         showOnModal: true,
         showOnMobile: true,
         showOnDesktop: true,

packages/ui/src/components/Button/styles.css

@@ -41,7 +41,7 @@ a.t-btn:not(.t-btn-text) {
 }
 #w3a-modal .size-xl {
   height: 52px;
-  @apply px-6 py-3.5 text-base;
+  @apply px-4 py-3.5 text-base;
 }
 /* #w3a-modal .icon {
   @apply rounded-full;
@@ -160,14 +160,14 @@ a.t-btn:not(.t-btn-text) {
 #w3a-modal .btn-link {
   @apply no-underline;
 }
-#w3a-modal button.t-btn:hover>.hover-icon {
+#w3a-modal button.t-btn:hover > .hover-icon {
   display: block;
   transition: display 150ms;
   transition-timing-function: cubic-bezier(0, 0.54, 0.63, 0.99);
 }
 
-#w3a-modal button.t-btn:hover>.image-icon {
+#w3a-modal button.t-btn:hover > .image-icon {
   display: none;
   transition: display 150ms;
   transition-timing-function: cubic-bezier(0, 0.54, 0.63, 0.99);
-}
+}

packages/ui/src/components/ExternalWallet/ExternalWalletButton.tsx

@@ -1,4 +1,3 @@
-import { BaseAdapterConfig } from "@web3auth/base";
 import { useTranslation } from "react-i18next";
 
 import { ExternalButton } from "../../interfaces";
@@ -8,25 +7,24 @@ import Image from "../Image";
 
 interface ExternalWalletButtonProps {
   button: ExternalButton;
-  adapterConfig?: BaseAdapterConfig;
   handleWalletClick: (button: ExternalButton) => void;
 }
 
 export default function ExternalWalletButton(props: ExternalWalletButtonProps) {
-  const { adapterConfig, button, handleWalletClick } = props;
+  const { button, handleWalletClick } = props;
   const [t] = useTranslation(undefined, { i18n });
 
   return (
     <Button
       variant="tertiary"
       type="button"
       onClick={() => handleWalletClick(button)}
-      className="w-full rounded-xl size-xl flex !justify-between items-center bg-app-gray-100 hover:bg-app-gray-200 dark:bg-app-gray-700 dark:hover:bg-app-gray-800 !px-2"
-      title={adapterConfig?.label || button.name}
+      className="w-full rounded-xl size-xl flex !justify-between items-center wallet-btn"
+      title={button.name}
     >
       <div className="flex items-center">
-        <Image imageId={`login-${button.name}`} hoverImageId={`login-${button.name}`} fallbackImageId="wallet" height="30" width="30" isButton />
-        <p className="ml-2 text-left">{adapterConfig?.label || button.displayName}</p>
+        <Image imageId={`login-${button.name}`} hoverImageId={`login-${button.name}`} fallbackImageId="wallet" height="24" width="24" isButton />
+        <p className="ml-2 text-left text-sm">{button.displayName}</p>
       </div>
       {button.hasInjectedWallet && (
         <span className="inline-flex items-center rounded-lg px-2 py-1 text-xs font-medium bg-app-primary-100 text-app-primary-800">

packages/ui/src/components/ExternalWallet/ExternalWalletConnect.tsx

@@ -42,12 +42,16 @@ export default function ExternalWalletConnect(props: ExternalWalletConnectProps)
           {!walletConnectUri ? (
             <Loader modalStatus={MODAL_STATUS.CONNECTING} canEmit={false} />
           ) : (
-            <WalletConnect walletConnectUri={walletConnectUri} logoImage={`https://images.web3auth.io/login-${connectButton.name}.svg`} />
+            <WalletConnect
+              walletConnectUri={walletConnectUri}
+              logoImage={`https://images.web3auth.io/login-${connectButton.name}.svg`}
+              primaryColor={connectButton.walletRegistryItem.primaryColor}
+            />
           )}
 
           {/* Install links */}
           {connectButton.hasInstallLinks && (
-            <div className="flex flex-row items-center justify-between gap-2 bg-app-gray-50 dark:bg-app-gray-700 text-app-gray-900 dark:text-app-white px-3 py-2 rounded-xl mt-3">
+            <div className="flex flex-row items-center justify-between gap-2 bg-app-gray-50 dark:bg-app-gray-700 text-app-gray-900 dark:text-app-white px-3 py-2 rounded-xl">
               <span className="text-sm truncate flex-grow-0">
                 {t("modal.external.dont-have")} <span>{connectButton.displayName}</span>?
               </span>

packages/ui/src/components/ExternalWallet/ExternalWalletDetails.tsx

@@ -0,0 +1,26 @@
+import { ExternalButton } from "../../interfaces";
+import ExternalWalletConnect from "./ExternalWalletConnect";
+import ExternalWalletInstall from "./ExternalWalletInstall";
+
+interface ExternalWalletDetailProps {
+  connectButton: ExternalButton;
+  walletConnectUri: string;
+  goBack: () => void;
+  closeModal: () => void;
+}
+
+export default function ExternalWalletDetail(props: ExternalWalletDetailProps) {
+  const { connectButton, walletConnectUri, goBack, closeModal } = props;
+
+  return (
+    <div>
+      {connectButton.hasWalletConnect ? (
+        // Wallet Connect
+        <ExternalWalletConnect connectButton={connectButton} walletConnectUri={walletConnectUri} goBack={goBack} closeModal={closeModal} />
+      ) : (
+        // Download wallets
+        <ExternalWalletInstall connectButton={connectButton} goBack={goBack} closeModal={closeModal} />
+      )}
+    </div>
+  );
+}