UI/UX when no wallet is connected (#40)

* navigation bar conditional renders on connected and credit accounts

* remove address requirement from allowed coins fetch

* fix: credit accounts positions when no wallet connected

* remove unnecessary comments

components/Navigation.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react'
 import Link from 'next/link'
+import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { Popover } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
@@ -17,6 +18,7 @@ import useAccountStats from 'hooks/useAccountStats'
 import SemiCircleProgress from './SemiCircleProgress'
 import useWalletStore from 'stores/useWalletStore'
 import ArrowRightLine from 'components/Icons/arrow-right-line.svg'
+import Button from './Button'
 
 // TODO: will require some tweaks depending on how lower viewport mocks pans out
 const MAX_VISIBLE_CREDIT_ACCOUNTS = 5
@@ -47,7 +49,7 @@ const Navigation = () => {
   const setSelectedAccount = useCreditManagerStore((s) => s.actions.setSelectedAccount)
   const toggleCreditManager = useCreditManagerStore((s) => s.actions.toggleCreditManager)
 
-  const { data: creditAccountsList } = useCreditAccounts()
+  const { data: creditAccountsList, isLoading: isLoadingCreditAccounts } = useCreditAccounts()
   const { mutate: createCreditAccount, isLoading: isLoadingCreate } = useCreateCreditAccount()
   const { mutate: deleteCreditAccount, isLoading: isLoadingDelete } = useDeleteCreditAccount(
     selectedAccount || ''
@@ -62,13 +64,51 @@ const Navigation = () => {
     }
   }, [creditAccountsList])
 
+  const isConnected = !!address
+  const hasCreditAccounts = creditAccountsList && creditAccountsList.length > 0
+
+  const rightSideContent = () => {
+    if ((!isConnected && !hasCreditAccounts) || isLoadingCreditAccounts) {
+      return null
+    }
+
+    if (!hasCreditAccounts) {
+      return <Button onClick={() => createCreditAccount()}>Create Credit Account</Button>
+    }
+
+    return (
+      <div className="flex items-center gap-4">
+        {accountStats && (
+          <>
+            <p>{formatCurrency(accountStats.netWorth)}</p>
+            {/* TOOLTIP */}
+            <div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}>
+              <SemiCircleProgress
+                value={accountStats.currentLeverage / accountStats.maxLeverage}
+                label="Lvg"
+              />
+            </div>
+            <SemiCircleProgress value={accountStats.risk} label="Risk" />
+            <ProgressBar value={accountStats.health} />
+          </>
+        )}
+        <div
+          className="flex w-16 cursor-pointer justify-center hover:text-white"
+          onClick={toggleCreditManager}
+        >
+          <ArrowRightLine />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div>
       {/* Main navigation bar */}
       <div className="flex items-center justify-between border-b border-white/20 px-6 py-3">
         <Link href="/" passHref>
           <a>
-            <img src="/logo.svg" alt="mars" />
+            <Image src="/logo.svg" alt="mars" width={123} height={40} />
           </a>
         </Link>
         <div className="flex gap-5 px-12 text-white/40">
@@ -81,10 +121,11 @@ const Navigation = () => {
         <Wallet />
       </div>
       {/* Sub navigation bar */}
-      {address && (
-        <div className="flex justify-between border-b border-white/20 px-6 py-3 text-sm text-white/40">
+      <div className="flex items-center justify-between border-b border-white/20 px-6 py-3 text-sm text-white/40">
         <div className="flex items-center">
           <SearchInput />
+          {isConnected && hasCreditAccounts && (
+            <>
               {firstCreditAccounts.map((account) => (
                 <div
                   key={account}
@@ -165,33 +206,13 @@ const Navigation = () => {
                   )}
                 </Popover.Panel>
               </Popover>
-          </div>
-          <div className="flex items-center gap-4">
-            {accountStats && (
-              <>
-                <p>{formatCurrency(accountStats.netWorth)}</p>
-                {/* TOOLTIP */}
-                <div title={`${String(accountStats.currentLeverage.toFixed(1))}x`}>
-                  <SemiCircleProgress
-                    value={accountStats.currentLeverage / accountStats.maxLeverage}
-                    label="Lvg"
-                  />
-                </div>
-                <SemiCircleProgress value={accountStats.risk} label="Risk" />
-                <ProgressBar value={accountStats.health} />
             </>
           )}
-            <div
-              className="flex w-16 cursor-pointer justify-center hover:text-white"
-              onClick={toggleCreditManager}
-            >
-              <ArrowRightLine />
         </div>
+        {rightSideContent()}
       </div>
-        </div>
-      )}
       {(isLoadingCreate || isLoadingDelete) && (
-        <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+        <div className="absolute inset-0 z-40 grid place-items-center bg-black/50">
           <Spinner />
         </div>
       )}

components/Wallet.tsx

@@ -32,12 +32,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
                 <span className="ml-1 text-lg font-semibold">{data?.toFixed(2)}</span>
               </p>
             </div>
-            <Button
-              className=" bg-[#524bb1] hover:bg-[#6962cc]"
-              onClick={() => actions.disconnect()}
-            >
-              Disconnect
-            </Button>
+            <Button onClick={() => actions.disconnect()}>Disconnect</Button>
           </div>
           <p className="mb-6 text-sm">{address}</p>
           <button

hooks/useAllowedCoins.tsx

@@ -11,14 +11,13 @@ const queryMsg = {
 }
 
 const useAllowedCoins = () => {
-  const address = useWalletStore((s) => s.address)
   const client = useWalletStore((s) => s.client)
 
   const result = useQuery<Result>(
     queryKeys.allowedCoins(),
     async () => client?.queryContractSmart(contractAddresses.creditManager, queryMsg),
     {
-      enabled: !!address && !!client,
+      enabled: !!client,
       staleTime: Infinity,
     }
   )

hooks/useCreditAccountPositions.tsx

@@ -46,8 +46,10 @@ const useCreditAccountPositions = (accountId: string) => {
   return {
     ...result,
     data: useMemo(() => {
+      if (!address) return
+
       return result?.data && { ...result.data }
-    }, [result.data]),
+    }, [result.data, address]),
   }
 }