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

2021-08-19 09:56:07 -04:00 · 2021-08-19 09:56:07 -04:00 · d0abf9be6a
parent 56b590589e afaa6b85ec
commit d0abf9be6a
4 changed files with 86 additions and 105 deletions
--- 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<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" />
-              Back
+              Cancel
            </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={
--- a/components/MarketsModal.tsx
+++ b/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> */}
--- a/components/NewAccount.tsx
+++ b/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,103 +141,83 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({

  return (
    <>
-      <ElementTitle noMarignBottom>New Account</ElementTitle>
-      {showNewAccountName ? (
-        <>
-          <div className="flex items-center justify-center text-th-fgd-3 pb-4 pt-2">
-            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>
+      <ElementTitle className="pb-2">New Account</ElementTitle>
+      <div className="pb-4">
+        <div className="flex items-center pb-2 text-th-fgd-1">
+          Account Name <span className="ml-1 text-th-fgd-3">(Optional)</span>
+          <Tooltip content="Account names are stored on-chain">
+            <InformationCircleIcon className="h-5 w-5 ml-2 text-th-primary" />
+          </Tooltip>
+        </div>
+        <Input
+          type="text"
+          className={`border border-th-fgd-4 flex-grow`}
+          error={!!invalidNameMessage}
+          placeholder="e.g. Calypso"
+          value={name}
+          onBlur={validateNameInput}
+          onChange={(e) => onChangeNameInput(e.target.value)}
+        />
+        {invalidNameMessage ? (
+          <div className="flex items-center pt-1.5 text-th-red">
+            <ExclamationCircleIcon className="h-4 w-4 mr-1.5" />
+            {invalidNameMessage}
          </div>
-          <div className="pb-2 text-th-fgd-1">
-            Account Name <span className="text-th-fgd-3">(Optional)</span>
+        ) : null}
+      </div>
+      <AccountSelect
+        accounts={walletTokens}
+        selectedAccount={selectedAccount}
+        onSelectAccount={handleAccountSelect}
+      />
+      <div className="flex justify-between pb-2 pt-4">
+        <div className={`text-th-fgd-1`}>Amount</div>
+        <div
+          className="text-th-fgd-1 underline cursor-pointer default-transition hover:text-th-primary hover:no-underline"
+          onClick={setMaxForSelectedAccount}
+        >
+          Max
+        </div>
+      </div>
+      <div className="flex">
+        <Input
+          type="number"
+          min="0"
+          className={`border border-th-fgd-4 flex-grow pr-11`}
+          placeholder="0.00"
+          error={!!invalidAmountMessage}
+          onBlur={(e) => validateAmountInput(e.target.value)}
+          value={inputAmount || ''}
+          onChange={(e) => onChangeAmountInput(e.target.value)}
+          suffix={symbol}
+        />
+      </div>
+      {invalidAmountMessage ? (
+        <div className="flex items-center pt-1.5 text-th-red">
+          <ExclamationCircleIcon className="h-4 w-4 mr-1.5" />
+          {invalidAmountMessage}
+        </div>
+      ) : null}
+      <div className="pt-3 pb-4">
+        <Slider
+          value={sliderPercentage}
+          onChange={(v) => onChangeSlider(v)}
+          step={1}
+          maxButtonTransition={maxButtonTransition}
+        />
+      </div>
+      <div className={`pt-8 flex justify-center`}>
+        <Button
+          disabled={inputAmount <= 0 || inputAmount > selectedAccount.uiBalance}
+          onClick={handleNewAccountDeposit}
+          className="w-full"
+        >
+          <div className={`flex items-center justify-center`}>
+            {submitting && <Loading className="-ml-1 mr-3" />}
+            Create New Account
          </div>
-          <Input
-            type="text"
-            className={`border border-th-fgd-4 flex-grow`}
-            error={!!invalidNameMessage}
-            placeholder="e.g. Calypso"
-            value={name}
-            onBlur={validateNameInput}
-            onChange={(e) => onChangeNameInput(e.target.value)}
-          />
-          {invalidNameMessage ? (
-            <div className="flex items-center pt-1.5 text-th-red">
-              <ExclamationCircleIcon className="h-4 w-4 mr-1.5" />
-              {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}
-            selectedAccount={selectedAccount}
-            onSelectAccount={handleAccountSelect}
-          />
-          <div className="flex justify-between pb-2 pt-4">
-            <div className={`text-th-fgd-1`}>Amount</div>
-            <div
-              className="text-th-fgd-1 underline cursor-pointer default-transition hover:text-th-primary hover:no-underline"
-              onClick={setMaxForSelectedAccount}
-            >
-              Max
-            </div>
-          </div>
-          <div className="flex">
-            <Input
-              type="number"
-              min="0"
-              className={`border border-th-fgd-4 flex-grow pr-11`}
-              placeholder="0.00"
-              error={!!invalidAmountMessage}
-              onBlur={(e) => validateAmountInput(e.target.value)}
-              value={inputAmount}
-              onChange={(e) => onChangeAmountInput(e.target.value)}
-              suffix={symbol}
-            />
-          </div>
-          {invalidAmountMessage ? (
-            <div className="flex items-center pt-1.5 text-th-red">
-              <ExclamationCircleIcon className="h-4 w-4 mr-1.5" />
-              {invalidAmountMessage}
-            </div>
-          ) : null}
-          <div className="pt-3 pb-4">
-            <Slider
-              value={sliderPercentage}
-              onChange={(v) => onChangeSlider(v)}
-              step={1}
-              maxButtonTransition={maxButtonTransition}
-            />
-          </div>
-          <div className={`pt-8 flex justify-center`}>
-            <Button
-              disabled={
-                inputAmount <= 0 || inputAmount > selectedAccount.uiBalance
-              }
-              onClick={handleNewAccountDeposit}
-              className="w-full"
-            >
-              <div className={`flex items-center justify-center`}>
-                {submitting && <Loading className="-ml-1 mr-3" />}
-                Create New Account
-              </div>
-            </Button>
-          </div>
-        </>
-      )}
+        </Button>
+      </div>
    </>
  )
 }
--- a/components/TopBar.tsx
+++ b/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}