loading states for connect wallet

2021-08-20 23:17:02 +10:00 · 2021-08-20 23:17:02 +10:00 · 51741bc9a3
parent cbd0e0b934
commit 51741bc9a3
6 changed files with 171 additions and 101 deletions
--- a/components/AccountInfo.tsx
+++ b/components/AccountInfo.tsx
@ -24,6 +24,7 @@ export default function MarginInfo() {
  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
  const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
  const actions = useMangoStore((s) => s.actions)

  const [showDepositModal, setShowDepositModal] = useState(false)
@ -97,17 +98,28 @@ export default function MarginInfo() {
          <div>
            <div className="flex justify-between py-2">
              <div className="font-normal text-th-fgd-3 leading-4">Equity</div>
-              <div className="text-th-fgd-1">{formatUsdValue(+equity)}</div>
+              <div className="text-th-fgd-1">
+                {isLoading ? (
+                  <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+                ) : (
+                  formatUsdValue(+equity)
+                )}
+              </div>
            </div>
            <div className="flex justify-between py-2">
              <div className="font-normal text-th-fgd-3 leading-4">
                Leverage
              </div>
              <div className="text-th-fgd-1">
-                {mangoAccount
-                  ? mangoAccount.getLeverage(mangoGroup, mangoCache).toFixed(2)
-                  : '0.00'}
-                x
+                {isLoading ? (
+                  <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+                ) : mangoAccount ? (
+                  `${mangoAccount
+                    .getLeverage(mangoGroup, mangoCache)
+                    .toFixed(2)}x`
+                ) : (
+                  '0.00x'
+                )}
              </div>
            </div>
            <div className={`flex justify-between py-2`}>
@ -115,11 +127,15 @@ export default function MarginInfo() {
                Total Assets Value
              </div>
              <div className={`text-th-fgd-1`}>
-                {mangoAccount
-                  ? formatUsdValue(
-                      +mangoAccount.getAssetsVal(mangoGroup, mangoCache)
-                    )
-                  : '--'}
+                {isLoading ? (
+                  <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+                ) : mangoAccount ? (
+                  formatUsdValue(
+                    +mangoAccount.getAssetsVal(mangoGroup, mangoCache)
+                  )
+                ) : (
+                  '--'
+                )}
              </div>
            </div>
            <div className={`flex justify-between py-2`}>
@ -127,11 +143,15 @@ export default function MarginInfo() {
                Total Liabilities Value
              </div>
              <div className={`text-th-fgd-1`}>
-                {mangoAccount
-                  ? formatUsdValue(
-                      +mangoAccount.getLiabsVal(mangoGroup, mangoCache)
-                    )
-                  : '--'}
+                {isLoading ? (
+                  <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+                ) : mangoAccount ? (
+                  formatUsdValue(
+                    +mangoAccount.getLiabsVal(mangoGroup, mangoCache)
+                  )
+                ) : (
+                  '--'
+                )}
              </div>
            </div>
            <div className={`flex justify-between py-2`}>
@ -154,12 +174,16 @@ export default function MarginInfo() {
                </div>
              </Tooltip>
              <div className={`flex items-center text-th-fgd-1`}>
-                {mangoGroup
-                  ? nativeToUi(
-                      mngoAccrued.toNumber(),
-                      mangoGroup.tokens[MNGO_INDEX].decimals
-                    )
-                  : 0}
+                {isLoading ? (
+                  <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+                ) : mangoGroup ? (
+                  nativeToUi(
+                    mngoAccrued.toNumber(),
+                    mangoGroup.tokens[MNGO_INDEX].decimals
+                  )
+                ) : (
+                  0
+                )}
                <LinkButton
                  onClick={handleRedeemMngo}
                  className="ml-2 text-th-primary text-xs disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:underline"
--- a/components/MarketPosition.tsx
+++ b/components/MarketPosition.tsx
@ -84,6 +84,7 @@ export default function MarketPosition() {
  const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
  const marketConfig = useMangoStore((s) => s.selectedMarket.config)
  const connected = useMangoStore((s) => s.wallet.connected)
+  const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
  const setMangoStore = useMangoStore((s) => s.set)
  const baseSymbol = marketConfig.baseSymbol
  const marketName = marketConfig.name
@ -116,7 +117,9 @@ export default function MarketPosition() {
        <ElementTitle>Position</ElementTitle>
        <div className={`flex items-center justify-between pt-1 pb-2`}>
          <div className="font-normal text-th-fgd-3 leading-4">Side</div>
-          {perpAccount && !perpAccount.basePosition.eq(ZERO_BN) ? (
+          {isLoading ? (
+            <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+          ) : perpAccount && !perpAccount.basePosition.eq(ZERO_BN) ? (
            <SideBadge
              side={perpAccount.basePosition.gt(ZERO_BN) ? 'long' : 'short'}
            />
@ -129,10 +132,12 @@ export default function MarketPosition() {
            Position size
          </div>
          <div className={`text-th-fgd-1`}>
-            {perpAccount &&
-            Math.abs(
-              selectedMarket.baseLotsToNumber(perpAccount.basePosition)
-            ) > 0 ? (
+            {isLoading ? (
+              <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+            ) : perpAccount &&
+              Math.abs(
+                selectedMarket.baseLotsToNumber(perpAccount.basePosition)
+              ) > 0 ? (
              <span
                className="cursor-pointer underline hover:no-underline"
                onClick={() =>
@ -157,12 +162,16 @@ export default function MarketPosition() {
            Notional size
          </div>
          <div className={`text-th-fgd-1`}>
-            {perpAccount
-              ? formatUsdValue(
-                  selectedMarket.baseLotsToNumber(perpAccount.basePosition) *
-                    mangoGroup.getPrice(marketIndex, mangoGroupCache).toNumber()
-                )
-              : 0}
+            {isLoading ? (
+              <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+            ) : perpAccount ? (
+              formatUsdValue(
+                selectedMarket.baseLotsToNumber(perpAccount.basePosition) *
+                  mangoGroup.getPrice(marketIndex, mangoGroupCache).toNumber()
+              )
+            ) : (
+              0
+            )}
          </div>
        </div>
        <div className={`flex justify-between pt-2 pb-2`}>
@ -170,14 +179,18 @@ export default function MarketPosition() {
            Avg entry price
          </div>
          <div className={`text-th-fgd-1`}>
-            {perpAccount
-              ? getAvgEntryPrice(
-                  mangoAccount,
-                  perpAccount,
-                  selectedMarket,
-                  perpTradeHistory
-                )
-              : 0}
+            {isLoading ? (
+              <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+            ) : perpAccount ? (
+              getAvgEntryPrice(
+                mangoAccount,
+                perpAccount,
+                selectedMarket,
+                perpTradeHistory
+              )
+            ) : (
+              0
+            )}
          </div>
        </div>
        <div className={`flex justify-between pt-2 pb-2`}>
@ -185,14 +198,18 @@ export default function MarketPosition() {
            Break-even price
          </div>
          <div className={`text-th-fgd-1`}>
-            {perpAccount
-              ? getBreakEvenPrice(
-                  mangoAccount,
-                  perpAccount,
-                  selectedMarket,
-                  perpTradeHistory
-                )
-              : 0}
+            {isLoading ? (
+              <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+            ) : perpAccount ? (
+              getBreakEvenPrice(
+                mangoAccount,
+                perpAccount,
+                selectedMarket,
+                perpTradeHistory
+              )
+            ) : (
+              0
+            )}
          </div>
        </div>
        <div className={`flex justify-between pt-2 pb-2`}>
@ -202,17 +219,21 @@ export default function MarketPosition() {
            </Tooltip.Content>
          </Tooltip>
          <div className={`flex items-center text-th-fgd-1`}>
-            {perpAccount
-              ? formatUsdValue(
-                  +nativeI80F48ToUi(
-                    perpAccount.getPnl(
-                      mangoGroup.perpMarkets[marketIndex],
-                      mangoGroupCache.priceCache[marketIndex].price
-                    ),
-                    marketConfig.quoteDecimals
-                  )
+            {isLoading ? (
+              <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+            ) : perpAccount ? (
+              formatUsdValue(
+                +nativeI80F48ToUi(
+                  perpAccount.getPnl(
+                    mangoGroup.perpMarkets[marketIndex],
+                    mangoGroupCache.priceCache[marketIndex].price
+                  ),
+                  marketConfig.quoteDecimals
                )
-              : '0'}
+              )
+            ) : (
+              '0'
+            )}
            <LinkButton
              onClick={() => handleSettlePnl(selectedMarket, perpAccount)}
              className="ml-2 text-th-primary text-xs disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:underline"
@ -263,39 +284,43 @@ export default function MarketPosition() {
                      <div className="pb-4">
                        <div className="pb-0.5 text-th-fgd-3">Deposits</div>
                        <div className={`text-th-fgd-1`}>
-                          {mangoAccount
-                            ? floorToDecimal(
-                                mangoAccount
-                                  .getUiDeposit(
-                                    mangoGroupCache.rootBankCache[tokenIndex],
-                                    mangoGroup,
-                                    tokenIndex
-                                  )
-                                  .toNumber(),
-                                mangoGroup.tokens[tokenIndex].decimals
-                              )
-                            : (0).toFixed(
-                                mangoGroup.tokens[tokenIndex].decimals
-                              )}
+                          {isLoading ? (
+                            <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+                          ) : mangoAccount ? (
+                            floorToDecimal(
+                              mangoAccount
+                                .getUiDeposit(
+                                  mangoGroupCache.rootBankCache[tokenIndex],
+                                  mangoGroup,
+                                  tokenIndex
+                                )
+                                .toNumber(),
+                              mangoGroup.tokens[tokenIndex].decimals
+                            )
+                          ) : (
+                            (0).toFixed(mangoGroup.tokens[tokenIndex].decimals)
+                          )}
                        </div>
                      </div>
                      <div className="pb-4">
                        <div className="pb-0.5 text-th-fgd-3">Borrows</div>
                        <div className={`text-th-fgd-1`}>
-                          {mangoAccount
-                            ? ceilToDecimal(
-                                mangoAccount
-                                  .getUiBorrow(
-                                    mangoGroupCache.rootBankCache[tokenIndex],
-                                    mangoGroup,
-                                    tokenIndex
-                                  )
-                                  .toNumber(),
-                                mangoGroup.tokens[tokenIndex].decimals
-                              )
-                            : (0).toFixed(
-                                mangoGroup.tokens[tokenIndex].decimals
-                              )}
+                          {isLoading ? (
+                            <div className="animate-pulse bg-th-bkg-3 h-5 w-10 rounded-sm" />
+                          ) : mangoAccount ? (
+                            ceilToDecimal(
+                              mangoAccount
+                                .getUiBorrow(
+                                  mangoGroupCache.rootBankCache[tokenIndex],
+                                  mangoGroup,
+                                  tokenIndex
+                                )
+                                .toNumber(),
+                              mangoGroup.tokens[tokenIndex].decimals
+                            )
+                          ) : (
+                            (0).toFixed(mangoGroup.tokens[tokenIndex].decimals)
+                          )}
                        </div>
                      </div>
                      <div>
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@ -11,6 +11,7 @@ import AccountsModal from './AccountsModal'
 const TopBar = () => {
  const connected = useMangoStore((s) => s.wallet.connected)
  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
  const wallet = useMangoStore((s) => s.wallet.current)
  const [showMenu, setShowMenu] = useState(false)
  const [showAccountsModal, setShowAccountsModal] = useState(false)
@ -74,7 +75,11 @@ const TopBar = () => {
              ) : null}
              <div className="flex">
                <div className="hidden md:block pl-3">
-                  <ConnectWalletButton />
+                  {isLoading ? (
+                    <div className="animate-pulse bg-th-bkg-3 h-10 w-10 rounded-full" />
+                  ) : (
+                    <ConnectWalletButton />
+                  )}
                </div>
              </div>
              <div className={`-mr-2 ml-2 flex items-center md:hidden`}>
--- a/pages/account.tsx
+++ b/pages/account.tsx
@ -19,6 +19,7 @@ import AccountOverview from '../components/account-page/AccountOverview'
 import AccountNameModal from '../components/AccountNameModal'
 import Button from '../components/Button'
 import EmptyState from '../components/EmptyState'
+import Loading from '../components/Loading'

 const TABS = [
  'Portfolio',
@ -38,6 +39,7 @@ export default function Account() {
  const connected = useMangoStore((s) => s.wallet.connected)
  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
  const wallet = useMangoStore((s) => s.wallet.current)
+  const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)

  const handleTabChange = (tabName) => {
    setActiveTab(tabName)
@ -140,12 +142,18 @@ export default function Account() {
              <TabContent activeTab={activeTab} />
            </>
          ) : connected ? (
-            <EmptyState
-              buttonText="Create Account"
-              icon={<CurrencyDollarIcon />}
-              onClickButton={() => setShowAccountsModal(true)}
-              title="No Account Found"
-            />
+            isLoading ? (
+              <div className="flex justify-center py-10">
+                <Loading />
+              </div>
+            ) : (
+              <EmptyState
+                buttonText="Create Account"
+                icon={<CurrencyDollarIcon />}
+                onClickButton={() => setShowAccountsModal(true)}
+                title="No Account Found"
+              />
+            )
          ) : (
            <EmptyState
              buttonText="Connect"
--- a/pages/borrow.tsx
+++ b/pages/borrow.tsx
@ -6,6 +6,7 @@ import TopBar from '../components/TopBar'
 import EmptyState from '../components/EmptyState'
 import AccountsModal from '../components/AccountsModal'
 import AccountBorrows from '../components/account-page/AccountBorrows'
+import Loading from '../components/Loading'

 export default function Borrow() {
  const [showAccountsModal, setShowAccountsModal] = useState(false)
@ -14,6 +15,7 @@ export default function Borrow() {
    (s) => s.selectedMangoAccount.current
  )
  const wallet = useMangoStore((s) => s.wallet.current)
+  const isLoading = useMangoStore((s) => s.selectedMangoAccount.initialLoad)

  const handleCloseAccounts = useCallback(() => {
    setShowAccountsModal(false)
@ -32,12 +34,18 @@ export default function Borrow() {
          {selectedMangoAccount ? (
            <AccountBorrows />
          ) : connected ? (
-            <EmptyState
-              buttonText="Create Account"
-              icon={<CurrencyDollarIcon />}
-              onClickButton={() => setShowAccountsModal(true)}
-              title="No Account Found"
-            />
+            isLoading ? (
+              <div className="flex justify-center py-10">
+                <Loading />
+              </div>
+            ) : (
+              <EmptyState
+                buttonText="Create Account"
+                icon={<CurrencyDollarIcon />}
+                onClickButton={() => setShowAccountsModal(true)}
+                title="No Account Found"
+              />
+            )
          ) : (
            <EmptyState
              buttonText="Connect"
--- a/utils/index.ts
+++ b/utils/index.ts
@ -194,22 +194,22 @@ export const calculateMarketPrice = (
 export const tokenPrecision = {
  BTC: 4,
  ETH: 3,
+  MNGO: 2,
  SOL: 2,
  SRM: 2,
  USDC: 2,
  USDT: 2,
-  WUSDT: 2,
 }

 // Precision for depositing/withdrawing
 export const DECIMALS = {
  BTC: 5,
  ETH: 4,
+  MNGO: 2,
  SOL: 2,
  SRM: 2,
  USDC: 2,
  USDT: 2,
-  WUSDT: 2,
 }

 export const getSymbolForTokenMintAddress = (address: string): string => {