diff --git a/components/AccountsModal.tsx b/components/AccountsModal.tsx index d55afe8b..86fb6c72 100644 --- a/components/AccountsModal.tsx +++ b/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 = ({ <> setShowNewAccountForm(false)} > - - Back + Cancel ) @@ -192,7 +191,7 @@ const AccountInfo = ({ return (
- ${accountEquity.toFixed(2)} + {formatUsdValue(accountEquity)} {/* |
- ${mangoGroup.getPrice(index, mangoCache).toFixed(2)} + {formatUsdValue(mangoGroup.getPrice(index, mangoCache))} {/* +2.44% $233m */} diff --git a/components/NewAccount.tsx b/components/NewAccount.tsx index 5c8f110b..28817da7 100644 --- a/components/NewAccount.tsx +++ b/components/NewAccount.tsx @@ -27,12 +27,11 @@ interface NewAccountProps { const NewAccount: FunctionComponent = ({ 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,103 +141,83 @@ const NewAccount: FunctionComponent = ({ return ( <> - New Account - {showNewAccountName ? ( - <> -
- Create a public nickname for your account - - - + New Account +
+
+ Account Name (Optional) + + + +
+ onChangeNameInput(e.target.value)} + /> + {invalidNameMessage ? ( +
+ + {invalidNameMessage}
-
- Account Name (Optional) + ) : null} +
+ +
+
Amount
+
+ Max +
+
+
+ validateAmountInput(e.target.value)} + value={inputAmount || ''} + onChange={(e) => onChangeAmountInput(e.target.value)} + suffix={symbol} + /> +
+ {invalidAmountMessage ? ( +
+ + {invalidAmountMessage} +
+ ) : null} +
+ onChangeSlider(v)} + step={1} + maxButtonTransition={maxButtonTransition} + /> +
+
+ - - ) : ( - <> -
- Make a deposit to initialize your new account -
- -
-
Amount
-
- Max -
-
-
- validateAmountInput(e.target.value)} - value={inputAmount} - onChange={(e) => onChangeAmountInput(e.target.value)} - suffix={symbol} - /> -
- {invalidAmountMessage ? ( -
- - {invalidAmountMessage} -
- ) : null} -
- onChangeSlider(v)} - step={1} - maxButtonTransition={maxButtonTransition} - /> -
-
- -
- - )} + +
) } diff --git a/components/TopBar.tsx b/components/TopBar.tsx index 71a38242..4a8f3000 100644 --- a/components/TopBar.tsx +++ b/components/TopBar.tsx @@ -66,7 +66,9 @@ const TopBar = () => {
Account
- {abbreviateAddress(mangoAccount.publicKey)} + {mangoAccount.name + ? mangoAccount.name + : abbreviateAddress(mangoAccount.publicKey)}
) : null}