pre-onboarding button

components/Layout.tsx

@@ -20,6 +20,7 @@ import UserSetupModal from './modals/UserSetupModal'
 import { ConnectWalletButton } from './wallet/ConnectWalletButton'
 import ConnectedMenu from './wallet/ConnectedMenu'
 import Button from './shared/Button'
+import WalletIcon from './icons/WalletIcon'
 
 export const IS_ONBOARDED_KEY = 'isOnboarded'
 
@@ -109,9 +110,13 @@ const Layout = ({ children }: { children: ReactNode }) => {
                   <ConnectWalletButton />
                 )
               ) : (
-                <Button highlightButton onClick={handleShowModal}>
-                  Join Mango
-                </Button>
+                <button
+                  className="relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
+                  onClick={handleShowModal}
+                >
+                  <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+                  {t('connect')}
+                </button>
               )}
             </div>
           </div>

components/icons/WalletIcon.tsx

@@ -0,0 +1,18 @@
+const WalletIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.999 3c1.103 0 2 .897 2 2v2c1.103 0 2 .897 2 2v10c0 1.103-.897 2-2 2h-15c-1.206 0-3-.799-3-3V6c0-1.654 1.346-3 3-3h13Zm0 2h-13a1.001 1.001 0 0 0 0 2h13V5Zm-1.001 7a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-1-1Z"
+      />
+    </svg>
+  )
+}
+
+export default WalletIcon

components/modals/UserSetupModal.tsx

@@ -21,7 +21,7 @@ import { EnterRightExitLeft } from '../shared/Transitions'
 
 const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation()
-  const { connected, wallet } = useWallet()
+  const { connected, select, wallet, wallets } = useWallet()
   const mangoAccount = mangoStore((s) => s.mangoAccount)
   const [profileName, setProfileName] = useState('')
   const [accountName, setAccountName] = useState('')
@@ -141,8 +141,32 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
           <div className="flex h-full flex-col justify-between">
             <div>
               <h2 className="mb-4">Choose Wallet</h2>
-              <div className="thin-scroll max-h-56 overflow-y-auto">
-                <WalletSelect />
+              <div className="thin-scroll max-h-56 space-y-2 overflow-y-auto">
+                {wallets?.map((w) => (
+                  <button
+                    className={`flex w-full flex-row items-center justify-between rounded-md border py-3 px-4 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
+                      w.adapter.name === wallet?.adapter.name
+                        ? 'border-th-primary md:hover:border-th-primary'
+                        : 'border-th-bkg-4'
+                    }`}
+                    onClick={() => {
+                      select(w.adapter.name)
+                    }}
+                    key={w.adapter.name}
+                  >
+                    <div className="flex items-center">
+                      <img
+                        src={w.adapter.icon}
+                        className="mr-2 h-5 w-5"
+                        alt={`${w.adapter.name} icon`}
+                      />
+                      {w.adapter.name}
+                    </div>
+                    {w.adapter.name === wallet?.adapter.name ? (
+                      <CheckCircleIcon className="h-5 w-5 text-th-primary" />
+                    ) : null}
+                  </button>
+                ))}
               </div>
             </div>
             <Button className="w-full" onClick={connectWallet} size="large">

components/shared/ProfileImage.tsx

@@ -37,7 +37,7 @@ const ProfileImage = ({
       }
       getProfilePic()
     }
-  }, [publicKey])
+  }, [publicKey, connection])
 
   const isLoading =
     (connected && !publicKey) ||

components/wallet/ConnectWalletButton.tsx

@@ -151,7 +151,7 @@ export const ConnectWalletButton: React.FC = () => {
         </Menu>
       ) : (
         <div className="relative">
-          <div className="relative flex h-16 w-44 divide-x divide-th-bkg-3 bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
+          <div className="relative flex h-16 w-44 bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
             <button
               onClick={handleConnect}
               // disabled={!mangoGroup}