From 36412879737dcb0ed1545bea5b9e960fdcbb9e54 Mon Sep 17 00:00:00 2001
From: michael sulistio <michaelsulistio@gmail.com>
Date: Thu, 25 Jul 2024 12:42:51 -0700
Subject: [PATCH] Refactor default Mobile Wallet Adapter button UI

---
 packages/ui/react-ui/src/WalletModal.tsx | 52 +++++++++++++++++++-----
 packages/ui/react-ui/styles.css          | 22 ++++++++++
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/packages/ui/react-ui/src/WalletModal.tsx b/packages/ui/react-ui/src/WalletModal.tsx
index c4853af72..983cf2521 100644
--- a/packages/ui/react-ui/src/WalletModal.tsx
+++ b/packages/ui/react-ui/src/WalletModal.tsx
@@ -9,6 +9,8 @@ import { Collapse } from './Collapse.js';
 import { WalletListItem } from './WalletListItem.js';
 import { WalletSVG } from './WalletSVG.js';
 import { useWalletModal } from './useWalletModal.js';
+import { SolanaMobileWalletAdapterWalletName } from '@solana-mobile/wallet-adapter-mobile';
+import { Button } from './Button.js';
 
 export interface WalletModalProps {
     className?: string;
@@ -23,19 +25,23 @@ export const WalletModal: FC<WalletModalProps> = ({ className = '', container =
     const [fadeIn, setFadeIn] = useState(false);
     const [portal, setPortal] = useState<Element | null>(null);
 
-    const [listedWallets, collapsedWallets] = useMemo(() => {
+    const [listedWallets, collapsedWallets, mobileWalletAdapter] = useMemo(() => {
         const installed: Wallet[] = [];
         const notInstalled: Wallet[] = [];
-
+        let mobileWalletAdapter;
         for (const wallet of wallets) {
-            if (wallet.readyState === WalletReadyState.Installed) {
+            if (wallet.adapter.name === SolanaMobileWalletAdapterWalletName) {
+                mobileWalletAdapter = wallet;
+            } else if (wallet.readyState === WalletReadyState.Installed) {
                 installed.push(wallet);
             } else {
                 notInstalled.push(wallet);
             }
         }
 
-        return installed.length ? [installed, notInstalled] : [notInstalled, []];
+        return installed.length
+            ? [installed, notInstalled, mobileWalletAdapter]
+            : [notInstalled, [], mobileWalletAdapter];
     }, [wallets]);
 
     const hideModal = useCallback(() => {
@@ -137,16 +143,40 @@ export const WalletModal: FC<WalletModalProps> = ({ className = '', container =
                         {listedWallets.length ? (
                             <>
                                 <h1 className="wallet-adapter-modal-title">Connect a wallet on Solana to continue</h1>
+                                {mobileWalletAdapter && (
+                                    <>
+                                        <h2 className="wallet-adapter-modal-header">On your phone: </h2>
+                                        <Button
+                                            className="mobile-wallet-adapter-button"
+                                            onClick={(event) =>
+                                                handleWalletClick(event, mobileWalletAdapter.adapter.name)
+                                            }
+                                        >
+                                            <span>Use an installed wallet</span>
+                                        </Button>
+                                    </>
+                                )}
                                 <ul className="wallet-adapter-modal-list">
-                                    {listedWallets.map((wallet) => (
-                                        <WalletListItem
-                                            key={wallet.adapter.name}
-                                            handleClick={(event) => handleWalletClick(event, wallet.adapter.name)}
-                                            wallet={wallet}
-                                        />
-                                    ))}
+                                    {mobileWalletAdapter && !collapsedWallets.length && (
+                                        <h2 className="wallet-adapter-modal-header">Other wallets: </h2>
+                                    )}
+                                    {listedWallets.map((wallet) => {
+                                        if (wallet.adapter.name === SolanaMobileWalletAdapterWalletName) {
+                                            return;
+                                        }
+                                        return (
+                                            <WalletListItem
+                                                key={wallet.adapter.name}
+                                                handleClick={(event) => handleWalletClick(event, wallet.adapter.name)}
+                                                wallet={wallet}
+                                            />
+                                        );
+                                    })}
                                     {collapsedWallets.length ? (
                                         <Collapse expanded={expanded} id="wallet-adapter-modal-collapse">
+                                            {mobileWalletAdapter && listedWallets.length === 1 && (
+                                                <h2 className="wallet-adapter-modal-header">Other wallets: </h2>
+                                            )}
                                             {collapsedWallets.map((wallet) => (
                                                 <WalletListItem
                                                     key={wallet.adapter.name}
diff --git a/packages/ui/react-ui/styles.css b/packages/ui/react-ui/styles.css
index 10c54b196..31ca04100 100644
--- a/packages/ui/react-ui/styles.css
+++ b/packages/ui/react-ui/styles.css
@@ -218,6 +218,28 @@
     color: #fff;
 }
 
+.wallet-adapter-modal-header {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 16px;
+    margin: 0;
+    padding: 0px 24px 8px 24px;
+    text-align: left;
+    align-self: flex-start;
+    color: #fff;
+}
+
+.mobile-wallet-adapter-button {
+    background-color: #512da8;
+    font-weight: 400;
+    max-width: 85%;
+    border-radius: 16px;
+    margin: 12px 12px 36px 12px;
+    font-size: 18px;
+    justify-content: center;
+}
+
+
 @media (max-width: 374px) {
     .wallet-adapter-modal-title {
         font-size: 18px;