Merge remote-tracking branch 'origin/main' into main

components/AccountsModal.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useEffect, useState } from 'react'
 import { RadioGroup } from '@headlessui/react'
 import { CheckCircleIcon } from '@heroicons/react/solid'
-import { ChevronLeftIcon, PlusCircleIcon } from '@heroicons/react/outline'
+import { PlusCircleIcon } from '@heroicons/react/outline'
 import useMangoStore from '../stores/useMangoStore'
 import {
   MangoAccount,
@@ -9,7 +9,7 @@ import {
   MangoGroup,
   // ZERO_I80F48,
 } from '@blockworks-foundation/mango-client'
-import { abbreviateAddress } from '../utils'
+import { abbreviateAddress, formatUsdValue } from '../utils'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import Modal from './Modal'
 import { ElementTitle } from './styles'
@@ -157,11 +157,10 @@ const AccountsModal: FunctionComponent<AccountsModalProps> = ({
           <>
             <NewAccount onAccountCreation={handleNewAccountCreation} />
             <LinkButton
-              className="flex items-center mt-4 text-th-fgd-3"
+              className="flex justify-center mt-4 text-th-fgd-3 w-full"
               onClick={() => setShowNewAccountForm(false)}
             >
-              <ChevronLeftIcon className="h-5 w-5 mr-1" />
+              Cancel
-              Back
             </LinkButton>
           </>
         )
@@ -192,7 +191,7 @@ const AccountInfo = ({
 
   return (
     <div className="text-th-fgd-3 text-xs">
-      ${accountEquity.toFixed(2)}
+      {formatUsdValue(accountEquity)}
       {/* <span className="px-1.5 text-th-fgd-4">|</span>
       <span
         className={

components/MarketsModal.tsx

@@ -5,6 +5,7 @@ import { EyeIcon, EyeOffIcon } from '@heroicons/react/outline'
 import Modal from './Modal'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import useMangoStore from '../stores/useMangoStore'
+import { formatUsdValue } from '../utils'
 import { LinkButton } from './Button'
 
 const StyledColumnHeader = styled.span`
@@ -107,7 +108,7 @@ const MarketsModal = ({
                 </Link>
                 <div className="flex justify-between">
                   <span className="text-th-fgd-2 text-right w-20">
-                    ${mangoGroup.getPrice(index, mangoCache).toFixed(2)}
+                    {formatUsdValue(mangoGroup.getPrice(index, mangoCache))}
                   </span>
                   {/* <span className="text-th-green text-right w-20">+2.44%</span>
                   <span className="text-th-fgd-3 text-right w-20">$233m</span> */}

components/NewAccount.tsx

@@ -27,12 +27,11 @@ interface NewAccountProps {
 const NewAccount: FunctionComponent<NewAccountProps> = ({
   onAccountCreation,
 }) => {
-  const [inputAmount, setInputAmount] = useState(0)
+  const [inputAmount, setInputAmount] = useState(null)
   const [submitting, setSubmitting] = useState(false)
   const [invalidAmountMessage, setInvalidAmountMessage] = useState('')
   const [sliderPercentage, setSliderPercentage] = useState(0)
   const [maxButtonTransition, setMaxButtonTransition] = useState(false)
-  const [showNewAccountName, setShowNewAccountName] = useState(true)
   const [invalidNameMessage, setInvalidNameMessage] = useState('')
   const [name, setName] = useState('')
   const walletTokens = useMangoStore((s) => s.wallet.tokens)
@@ -142,18 +141,14 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
 
   return (
     <>
-      <ElementTitle noMarignBottom>New Account</ElementTitle>
+      <ElementTitle className="pb-2">New Account</ElementTitle>
-      {showNewAccountName ? (
+      <div className="pb-4">
-        <>
+        <div className="flex items-center pb-2 text-th-fgd-1">
-          <div className="flex items-center justify-center text-th-fgd-3 pb-4 pt-2">
+          Account Name <span className="ml-1 text-th-fgd-3">(Optional)</span>
-            Create a public nickname for your account
           <Tooltip content="Account names are stored on-chain">
             <InformationCircleIcon className="h-5 w-5 ml-2 text-th-primary" />
           </Tooltip>
         </div>
-          <div className="pb-2 text-th-fgd-1">
-            Account Name <span className="text-th-fgd-3">(Optional)</span>
-          </div>
         <Input
           type="text"
           className={`border border-th-fgd-4 flex-grow`}
@@ -169,18 +164,6 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
             {invalidNameMessage}
           </div>
         ) : null}
-          <Button
-            onClick={() => setShowNewAccountName(false)}
-            disabled={name.length >= 33}
-            className="mt-4 w-full"
-          >
-            Next
-          </Button>
-        </>
-      ) : (
-        <>
-          <div className="text-th-fgd-3 text-center pb-4 pt-2">
-            Make a deposit to initialize your new account
       </div>
       <AccountSelect
         accounts={walletTokens}
@@ -204,7 +187,7 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
           placeholder="0.00"
           error={!!invalidAmountMessage}
           onBlur={(e) => validateAmountInput(e.target.value)}
-              value={inputAmount}
+          value={inputAmount || ''}
           onChange={(e) => onChangeAmountInput(e.target.value)}
           suffix={symbol}
         />
@@ -225,9 +208,7 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
       </div>
       <div className={`pt-8 flex justify-center`}>
         <Button
-              disabled={
+          disabled={inputAmount <= 0 || inputAmount > selectedAccount.uiBalance}
-                inputAmount <= 0 || inputAmount > selectedAccount.uiBalance
-              }
           onClick={handleNewAccountDeposit}
           className="w-full"
         >
@@ -238,8 +219,6 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
         </Button>
       </div>
     </>
-      )}
-    </>
   )
 }
 

components/TopBar.tsx

@@ -66,7 +66,9 @@ const TopBar = () => {
                     <div className="font-normal text-th-primary tiny-text">
                       Account
                     </div>
-                    {abbreviateAddress(mangoAccount.publicKey)}
+                    {mangoAccount.name
+                      ? mangoAccount.name
+                      : abbreviateAddress(mangoAccount.publicKey)}
                   </button>
                 </div>
               ) : null}