Updates onConnect call and adds featured wallets

components/ConnectWalletButton.tsx

@@ -1,4 +1,10 @@
-import React, { Fragment, useCallback, useState, useMemo } from 'react'
+import React, {
+  Fragment,
+  useCallback,
+  useState,
+  useMemo,
+  useEffect,
+} from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { useWallet, Wallet } from '@solana/wallet-adapter-react'
 import { WalletReadyState } from '@solana/wallet-adapter-base'
@@ -13,44 +19,64 @@ import useMangoStore from 'stores/useMangoStore'
 import { ProfileIcon, WalletIcon } from './icons'
 import { useTranslation } from 'next-i18next'
 import { WalletSelect } from 'components/WalletSelect'
-import { WalletSuggestionModal } from 'components'
 import AccountsModal from './AccountsModal'
+import { uniqBy } from 'lodash'
+
+export const handleWalletConnect = (wallet: Wallet) => {
+  if (wallet.readyState === WalletReadyState.NotDetected) {
+    window.open(wallet.adapter.url, '_blank')
+  } else {
+    wallet?.adapter?.connect().catch((e) => {
+      if (e.name.includes('WalletLoadError')) {
+        notify({
+          title: `${wallet.adapter.name} Error`,
+          type: 'error',
+          description: `Please install ${wallet.adapter.name} and then reload this page.`,
+        })
+      }
+    })
+  }
+}
 
 export const ConnectWalletButton: React.FC = () => {
-  const { connected, publicKey, wallet, wallets } = useWallet()
+  const { connected, publicKey, wallet, wallets, select } = useWallet()
   const { t } = useTranslation('common')
   const pfp = useMangoStore((s) => s.wallet.pfp)
   const set = useMangoStore((s) => s.set)
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const [showAccountsModal, setShowAccountsModal] = useState(false)
-  const [showWalletSuggestionModal, setShowWalletSuggestionModal] =
-    useState(false)
 
-  const [installedWallets] = useMemo(() => {
+  const defaultWallets = useMemo(() => {
+    return ['Phantom', 'Solflare', 'Sollet']
+  }, [])
+
+  const installedWallets = useMemo(() => {
     const installed: Wallet[] = []
-    const notDetected: Wallet[] = []
-    const loadable: Wallet[] = []
 
     for (const wallet of wallets) {
-      if (wallet.readyState === WalletReadyState.NotDetected) {
-        notDetected.push(wallet)
-      } else if (wallet.readyState === WalletReadyState.Loadable) {
-        loadable.push(wallet)
-      } else if (wallet.readyState === WalletReadyState.Installed) {
+      if (wallet.readyState === WalletReadyState.Installed) {
         installed.push(wallet)
       }
     }
 
-    return [installed, [...loadable, ...notDetected]]
+    return installed
   }, [wallets])
 
+  const displayedWallets = useMemo(() => {
+    return uniqBy(
+      [
+        ...installedWallets,
+        ...wallets.filter((w) => defaultWallets.includes(w.adapter.name)),
+      ],
+      (w) => {
+        return w.adapter.name
+      }
+    )
+  }, [wallets, installedWallets, defaultWallets])
+
   const handleConnect = useCallback(() => {
-    if (!installedWallets?.length) {
-      setShowWalletSuggestionModal(true)
-    } else {
-      wallet?.adapter?.connect().catch(() => {})
-    }
-  }, [installedWallets, setShowWalletSuggestionModal, wallet])
+    handleWalletConnect(wallet)
+  }, [wallet])
 
   const handleCloseAccounts = useCallback(() => {
     setShowAccountsModal(false)
@@ -70,6 +96,14 @@ export const ConnectWalletButton: React.FC = () => {
     })
   }, [wallet, set, t])
 
+  useEffect(() => {
+    if (!wallet && displayedWallets?.length) {
+      select(displayedWallets[0].adapter.name)
+    }
+  }, [wallet, displayedWallets, select])
+
+  console.log('wallet', wallet)
+
   return (
     <>
       {connected && publicKey ? (
@@ -157,7 +191,7 @@ export const ConnectWalletButton: React.FC = () => {
             </div>
           </button>
           <div className="relative">
-            <WalletSelect installedWallets={installedWallets} />
+            <WalletSelect wallets={displayedWallets} />
           </div>
         </div>
       )}
@@ -167,12 +201,6 @@ export const ConnectWalletButton: React.FC = () => {
           isOpen={showAccountsModal}
         />
       )}
-      {showWalletSuggestionModal && (
-        <WalletSuggestionModal
-          onClose={() => setShowWalletSuggestionModal(false)}
-          isOpen={showWalletSuggestionModal}
-        />
-      )}
     </>
   )
 }

components/FloatingElement.tsx

@@ -1,10 +1,11 @@
-import React, { FunctionComponent } from 'react'
+import React, { FunctionComponent, useCallback } from 'react'
 import { LinkIcon } from '@heroicons/react/outline'
 import useMangoStore from '../stores/useMangoStore'
 import { MoveIcon } from './icons'
 import EmptyState from './EmptyState'
 import { useTranslation } from 'next-i18next'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { handleWalletConnect } from 'components/ConnectWalletButton'
 
 interface FloatingElementProps {
   className?: string
@@ -22,6 +23,10 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const connected = useMangoStore((s) => s.wallet.connected)
 
+  const handleConnect = useCallback(() => {
+    handleWalletConnect(wallet)
+  }, [wallet])
+
   return (
     <div
       className={`thin-scroll relative overflow-auto overflow-x-hidden rounded-lg bg-th-bkg-2 p-2.5 md:p-4 ${className}`}
@@ -33,7 +38,7 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
               disabled={!wallet || !mangoGroup}
               buttonText={t('connect')}
               icon={<LinkIcon />}
-              onClickButton={() => wallet?.adapter?.connect().catch(() => {})}
+              onClickButton={handleConnect}
               title={t('connect-wallet')}
             />
           </div>

components/JupiterForm.tsx

@@ -46,6 +46,7 @@ import { useTranslation } from 'next-i18next'
 import Tabs from './Tabs'
 import SwapTokenInsights from './SwapTokenInsights'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { handleWalletConnect } from 'components/ConnectWalletButton'
 
 const TABS = ['Market Data', 'Performance Insights']
 
@@ -236,6 +237,10 @@ const JupiterForm: FunctionComponent = () => {
     }
   }, [routeMap, tokens, formValue.inputMint])
 
+  const handleConnect = useCallback(() => {
+    handleWalletConnect(wallet)
+  }, [wallet])
+
   const inputWalletBalance = () => {
     if (walletTokens.length) {
       const walletToken = walletTokens.filter((t) => {
@@ -945,7 +950,7 @@ const JupiterForm: FunctionComponent = () => {
                   disabled={swapDisabled}
                   onClick={async () => {
                     if (!connected && zeroKey !== publicKey) {
-                      wallet?.adapter?.connect().catch(() => {})
+                      handleConnect()
                     } else if (!loading && selectedRoute && connected) {
                       setSwapping(true)
                       let txCount = 1

components/WalletSelect.tsx

@@ -3,12 +3,10 @@ import { Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/solid'
 import { useWallet, Wallet } from '@solana/wallet-adapter-react'
 
-export const WalletSelect: React.FC<{ installedWallets: Wallet[] }> = ({
-  installedWallets,
-}) => {
+export const WalletSelect: React.FC<{ wallets: Wallet[] }> = ({ wallets }) => {
   const { select } = useWallet()
 
-  if (!installedWallets?.length) {
+  if (!wallets?.length) {
     return null
   }
 
@@ -37,7 +35,7 @@ export const WalletSelect: React.FC<{ installedWallets: Wallet[] }> = ({
             leaveTo="opacity-0"
           >
             <Menu.Items className="absolute right-0 z-20 w-44 rounded-b-md bg-th-bkg-3 px-4 py-2.5 outline-none">
-              {installedWallets?.map((wallet, index) => (
+              {wallets?.map((wallet, index) => (
                 <Menu.Item key={index}>
                   <button
                     className="flex w-full flex-row items-center justify-between rounded-none py-1.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"

pages/account.tsx

@@ -53,6 +53,7 @@ import { copyToClipboard } from 'utils'
 import DelegateModal from 'components/DelegateModal'
 import { Menu, Transition } from '@headlessui/react'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { handleWalletConnect } from 'components/ConnectWalletButton'
 
 export async function getStaticProps({ locale }) {
   return {
@@ -117,6 +118,10 @@ export default function Account() {
     setShowDelegateModal(false)
   }, [])
 
+  const handleConnect = useCallback(() => {
+    handleWalletConnect(wallet)
+  }, [wallet])
+
   useEffect(() => {
     async function loadUnownedMangoAccount() {
       try {
@@ -444,7 +449,7 @@ export default function Account() {
               desc={t('connect-view')}
               disabled={!wallet || !mangoGroup}
               icon={<LinkIcon />}
-              onClickButton={() => wallet?.adapter?.connect().catch(() => {})}
+              onClickButton={handleConnect}
               title={t('connect-wallet')}
             />
           )}

pages/referral.tsx

@@ -36,6 +36,7 @@ import Input, { Label } from '../components/Input'
 import InlineNotification from '../components/InlineNotification'
 import useMangoAccount from '../hooks/useMangoAccount'
 import { useWallet } from '@solana/wallet-adapter-react'
+import { handleWalletConnect } from 'components/ConnectWalletButton'
 
 export async function getStaticProps({ locale }) {
   return {
@@ -153,6 +154,10 @@ export default function Referral() {
     }
   }
 
+  const handleConnect = useCallback(() => {
+    handleWalletConnect(wallet)
+  }, [wallet])
+
   const submitRefLink = async () => {
     let encodedRefLink: string
     try {
@@ -537,9 +542,7 @@ export default function Referral() {
                   buttonText={t('connect')}
                   disabled={!wallet || !mangoGroup}
                   icon={<LinkIcon />}
-                  onClickButton={() =>
-                    wallet?.adapter?.connect().catch(() => {})
-                  }
+                  onClickButton={handleConnect}
                   title={t('connect-wallet')}
                 />
               </div>