From 3f5224c1190c15f0179de921eda771c7a1ddd478 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Tue, 26 Sep 2023 23:15:36 +1000
Subject: [PATCH] logo animation

---
 components/BoostLogo.tsx          |   5 +-
 components/StakeForm.tsx          | 483 ++++++++++++++----------------
 components/SunburstBackground.tsx |   2 +-
 store/mangoStore.ts               |   2 +
 styles/globals.css                |  10 +-
 tailwind.config.js                |   2 +-
 6 files changed, 241 insertions(+), 263 deletions(-)

diff --git a/components/BoostLogo.tsx b/components/BoostLogo.tsx
index 0f29563..7b5897e 100644
--- a/components/BoostLogo.tsx
+++ b/components/BoostLogo.tsx
@@ -1,7 +1,10 @@
+import mangoStore from '@store/mangoStore'
+
 const BoostLogo = ({ className }: { className?: string }) => {
+  const submittingBoost = mangoStore((s) => s.submittingBoost)
   return (
     <svg
-      className={`${className}`}
+      className={`${className} ${submittingBoost ? 'animate-shake' : ''}`}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 48 37"
       fill="currentColor"
diff --git a/components/StakeForm.tsx b/components/StakeForm.tsx
index f66fcc2..675ec01 100644
--- a/components/StakeForm.tsx
+++ b/components/StakeForm.tsx
@@ -8,31 +8,22 @@ import { useTranslation } from 'next-i18next'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import NumberFormat, { NumberFormatValues } from 'react-number-format'
 import mangoStore from '@store/mangoStore'
-import {
-  ACCOUNT_ACTION_MODAL_INNER_HEIGHT,
-  // INPUT_TOKEN_DEFAULT,
-} from '../utils/constants'
 import { notify } from '../utils/notifications'
 import { TokenAccount, formatTokenSymbol } from '../utils/tokens'
-// import ActionTokenList from './account/ActionTokenList'
 import Label from './forms/Label'
 import Button, { IconButton } from './shared/Button'
 import Loading from './shared/Loading'
-import { EnterBottomExitBottom, FadeInFadeOut } from './shared/Transitions'
 import MaxAmountButton from '@components/shared/MaxAmountButton'
 import Tooltip from '@components/shared/Tooltip'
 import SolBalanceWarnings from '@components/shared/SolBalanceWarnings'
 import useSolBalance from 'hooks/useSolBalance'
 import { floorToDecimal, withValueLimit } from 'utils/numbers'
-// import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { isMangoError } from 'types'
-// import TokenListButton from './shared/TokenListButton'
 import TokenLogo from './shared/TokenLogo'
 import SecondaryConnectButton from './shared/SecondaryConnectButton'
 import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
 import InlineNotification from './shared/InlineNotification'
 import Link from 'next/link'
-import BackButton from './swap/BackButton'
 import LeverageSlider from './shared/LeverageSlider'
 import useMangoGroup from 'hooks/useMangoGroup'
 import FormatNumericValue from './shared/FormatNumericValue'
@@ -90,15 +81,10 @@ const getNextAccountNumber = (accounts: MangoAccount[]): number => {
 function StakeForm({ token: selectedToken }: StakeFormProps) {
   const { t } = useTranslation(['common', 'account'])
   const [inputAmount, setInputAmount] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-  // const [selectedToken, setSelectedToken] = useState(
-  //   token || INPUT_TOKEN_DEFAULT,
-  // )
+  const submitting = mangoStore((s) => s.submittingBoost)
   const [leverage, setLeverage] = useState(1)
-  const [showTokenList, setShowTokenList] = useState(false)
   const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
   const { maxSolDeposit } = useSolBalance()
-  // const banks = useBanksWithBalances('walletBalance')
   const { usedTokens, totalTokens } = useMangoAccountAccounts()
   const { group } = useMangoGroup()
   const groupLoaded = mangoStore((s) => s.groupLoaded)
@@ -166,7 +152,9 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
 
     if (!group || !stakeBank || !publicKey) return
 
-    setSubmitting(true)
+    set((state) => {
+      state.submittingBoost = true
+    })
     try {
       const newAccountNum = getNextAccountNumber(mangoAccounts)
       const { signature: tx, slot } = await stakeAndCreate(
@@ -190,11 +178,15 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
       }
       await actions.reloadMangoAccount(slot)
       await actions.fetchWalletTokens(publicKey)
-      setSubmitting(false)
+      set((state) => {
+        state.submittingBoost = false
+      })
       setInputAmount('')
     } catch (e) {
       console.error('Error depositing:', e)
-      setSubmitting(false)
+      set((state) => {
+        state.submittingBoost = false
+      })
       if (!isMangoError(e)) return
       notify({
         title: 'Transaction failed',
@@ -222,259 +214,236 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
 
   return (
     <>
-      <EnterBottomExitBottom
-        className={`absolute bottom-0 left-0 z-20 h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] w-full overflow-auto rounded-lg bg-th-bkg-1 p-6`}
-        show={showTokenList}
-      >
-        <BackButton onClick={() => setShowTokenList(false)} />
-        <h2 className="mb-4 text-center text-lg">Select token to stake</h2>
-        <div className="flex items-center px-4 pb-2">
-          <div className="w-1/2 text-left">
-            <p className="text-xs">{t('token')}</p>
-          </div>
-          <div className="w-1/2 text-right">
-            <p className="whitespace-nowrap text-xs">{t('wallet-balance')}</p>
-          </div>
-        </div>
-        {/* <ActionTokenList
-          banks={banks}
-          onSelect={handleSelectToken}
-          showDepositRates
-          valueKey="walletBalance"
-        /> */}
-      </EnterBottomExitBottom>
-      <FadeInFadeOut show={!showTokenList}>
-        <div className="flex flex-col justify-between">
-          <div className="pb-8">
-            <SolBalanceWarnings
-              amount={inputAmount}
-              className="mb-4"
-              setAmount={setInputAmount}
-              selectedToken={selectedToken}
-            />
-            <div className="grid grid-cols-2">
-              <div className="col-span-2 flex justify-between">
-                <Label text="Amount" />
-                <div className="mb-2 flex items-center space-x-2">
-                  <MaxAmountButton
-                    decimals={tokenMax.maxDecimals}
-                    label={t('wallet-balance')}
-                    onClick={setMax}
-                    value={tokenMax.maxAmount}
-                  />
-                  <Tooltip content={t('account:refresh-balance')}>
-                    <IconButton
-                      className={refreshingWalletTokens ? 'animate-spin' : ''}
-                      onClick={handleRefreshWalletBalances}
-                      hideBg
-                    >
-                      <ArrowPathIcon className="h-5 w-5" />
-                    </IconButton>
-                  </Tooltip>
-                </div>
+      <div className="flex flex-col justify-between">
+        <div className="pb-8">
+          <SolBalanceWarnings
+            amount={inputAmount}
+            className="mb-4"
+            setAmount={setInputAmount}
+            selectedToken={selectedToken}
+          />
+          <div className="grid grid-cols-2">
+            <div className="col-span-2 flex justify-between">
+              <Label text="Amount" />
+              <div className="mb-2 flex items-center space-x-2">
+                <MaxAmountButton
+                  decimals={tokenMax.maxDecimals}
+                  label={t('wallet-balance')}
+                  onClick={setMax}
+                  value={tokenMax.maxAmount}
+                />
+                <Tooltip content={t('account:refresh-balance')}>
+                  <IconButton
+                    className={refreshingWalletTokens ? 'animate-spin' : ''}
+                    onClick={handleRefreshWalletBalances}
+                    hideBg
+                  >
+                    <ArrowPathIcon className="h-5 w-5" />
+                  </IconButton>
+                </Tooltip>
               </div>
-              <div className="col-span-2">
-                <div className="relative">
-                  <NumberFormat
-                    name="amountIn"
-                    id="amountIn"
-                    inputMode="decimal"
-                    thousandSeparator=","
-                    allowNegative={false}
-                    isNumericString={true}
-                    decimalScale={6}
-                    className={NUMBERFORMAT_CLASSES}
-                    placeholder="0.00"
-                    value={inputAmount}
-                    onValueChange={(e: NumberFormatValues) => {
-                      setInputAmount(
-                        !Number.isNaN(Number(e.value)) ? e.value : '',
-                      )
-                    }}
-                    isAllowed={withValueLimit}
-                  />
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
-                    <TokenLogo bank={stakeBank} size={24} />
-                  </div>
-                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                    <span className="font-bold text-th-fgd-1">
-                      {formatTokenSymbol(selectedToken)}
-                    </span>
-                  </div>
+            </div>
+            <div className="col-span-2">
+              <div className="relative">
+                <NumberFormat
+                  name="amountIn"
+                  id="amountIn"
+                  inputMode="decimal"
+                  thousandSeparator=","
+                  allowNegative={false}
+                  isNumericString={true}
+                  decimalScale={6}
+                  className={NUMBERFORMAT_CLASSES}
+                  placeholder="0.00"
+                  value={inputAmount}
+                  onValueChange={(e: NumberFormatValues) => {
+                    setInputAmount(
+                      !Number.isNaN(Number(e.value)) ? e.value : '',
+                    )
+                  }}
+                  isAllowed={withValueLimit}
+                />
+                <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                  <TokenLogo bank={stakeBank} size={24} />
+                </div>
+                <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                  <span className="font-bold text-th-fgd-1">
+                    {formatTokenSymbol(selectedToken)}
+                  </span>
                 </div>
               </div>
             </div>
-            <div className="mt-4">
-              <div className="flex items-center justify-between">
-                <Label text="Leverage" />
-                <p className="mb-2 font-bold text-th-fgd-1">{leverage}x</p>
-              </div>
-              <LeverageSlider
-                leverageMax={leverageMax}
-                onChange={changeLeverage}
-                step={0.1}
-              />
+          </div>
+          <div className="mt-4">
+            <div className="flex items-center justify-between">
+              <Label text="Leverage" />
+              <p className="mb-2 font-bold text-th-fgd-1">{leverage}x</p>
             </div>
-            {stakeBank && borrowBank ? (
-              <div className="pt-8">
-                <Disclosure>
-                  {({ open }) => (
-                    <>
-                      <Disclosure.Button
-                        className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
-                          open ? 'rounded-b-none border-b-0' : ''
-                        }`}
-                      >
-                        <div className="flex items-center justify-between">
-                          <p className="font-medium">Est. Net APY</p>
-                          <div className="flex items-center space-x-2">
-                            <span className="text-lg font-bold text-th-success">
-                              {estimatedNetAPY >= 0
-                                ? '+'
-                                : estimatedNetAPY === 0
-                                ? ''
-                                : '-'}
-                              <FormatNumericValue
-                                value={estimatedNetAPY}
-                                decimals={2}
-                              />
-                              %
-                            </span>
-                            <ChevronDownIcon
-                              className={`${
-                                open ? 'rotate-180' : 'rotate-360'
-                              } h-6 w-6 flex-shrink-0 text-th-fgd-1`}
-                            />
-                          </div>
-                        </div>
-                      </Disclosure.Button>
-                      <Disclosure.Panel className="space-y-2 rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 pb-3">
-                        <div className="flex justify-between">
-                          <p className="text-th-fgd-4">
-                            {formatTokenSymbol(selectedToken)} Leveraged APY
-                          </p>
-                          <span className="font-bold text-th-success">
-                            {leveragedAPY > 0.01 ? '+' : ''}
-                            <FormatNumericValue
-                              value={leveragedAPY}
-                              decimals={2}
-                            />
-                            %
-                          </span>
-                        </div>
-                        <div className="flex justify-between">
-                          <p className="text-th-fgd-4">
-                            {formatTokenSymbol(selectedToken)} Deposit Rate
-                          </p>
-                          <span
-                            className={`font-bold ${
-                              stakeBankDepositRate > 0.01
-                                ? 'text-th-success'
-                                : 'text-th-bkg-4'
-                            }`}
-                          >
-                            {stakeBankDepositRate > 0.01 ? '+' : ''}
+            <LeverageSlider
+              leverageMax={leverageMax}
+              onChange={changeLeverage}
+              step={0.1}
+            />
+          </div>
+          {stakeBank && borrowBank ? (
+            <div className="pt-8">
+              <Disclosure>
+                {({ open }) => (
+                  <>
+                    <Disclosure.Button
+                      className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
+                        open ? 'rounded-b-none border-b-0' : ''
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <p className="font-medium">Est. Net APY</p>
+                        <div className="flex items-center space-x-2">
+                          <span className="text-lg font-bold text-th-success">
+                            {estimatedNetAPY >= 0
+                              ? '+'
+                              : estimatedNetAPY === 0
+                              ? ''
+                              : '-'}
                             <FormatNumericValue
-                              value={stakeBankDepositRate}
+                              value={estimatedNetAPY}
                               decimals={2}
                             />
                             %
                           </span>
+                          <ChevronDownIcon
+                            className={`${
+                              open ? 'rotate-180' : 'rotate-360'
+                            } h-6 w-6 flex-shrink-0 text-th-fgd-1`}
+                          />
                         </div>
-                        {borrowBank ? (
-                          <>
-                            <div className="flex justify-between">
-                              <p className="text-th-fgd-4">{`${borrowBank.name} Borrow Rate`}</p>
-                              <span
-                                className={`font-bold ${
-                                  borrowBankBorrowRate > 0.01
-                                    ? 'text-th-error'
-                                    : 'text-th-bkg-4'
-                                }`}
-                              >
-                                -
-                                <FormatNumericValue
-                                  value={borrowBankBorrowRate}
-                                  decimals={2}
-                                />
-                                %
-                              </span>
-                            </div>
-                            <div className="flex justify-between">
-                              <p className="text-th-fgd-4">{`${borrowBank.name} Borrowed`}</p>
-                              <span
-                                className={`font-bold ${
-                                  amountToBorrow > 0.001
-                                    ? 'text-th-fgd-1'
-                                    : 'text-th-bkg-4'
-                                }`}
-                              >
-                                <FormatNumericValue
-                                  value={amountToBorrow}
-                                  decimals={3}
-                                />
-                                <span className="font-body text-th-fgd-4">
-                                  {' '}
-                                  {borrowBank.name}
-                                </span>
+                      </div>
+                    </Disclosure.Button>
+                    <Disclosure.Panel className="space-y-2 rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 pb-3">
+                      <div className="flex justify-between">
+                        <p className="text-th-fgd-4">
+                          {formatTokenSymbol(selectedToken)} Leveraged APY
+                        </p>
+                        <span className="font-bold text-th-success">
+                          {leveragedAPY > 0.01 ? '+' : ''}
+                          <FormatNumericValue
+                            value={leveragedAPY}
+                            decimals={2}
+                          />
+                          %
+                        </span>
+                      </div>
+                      <div className="flex justify-between">
+                        <p className="text-th-fgd-4">
+                          {formatTokenSymbol(selectedToken)} Deposit Rate
+                        </p>
+                        <span
+                          className={`font-bold ${
+                            stakeBankDepositRate > 0.01
+                              ? 'text-th-success'
+                              : 'text-th-bkg-4'
+                          }`}
+                        >
+                          {stakeBankDepositRate > 0.01 ? '+' : ''}
+                          <FormatNumericValue
+                            value={stakeBankDepositRate}
+                            decimals={2}
+                          />
+                          %
+                        </span>
+                      </div>
+                      {borrowBank ? (
+                        <>
+                          <div className="flex justify-between">
+                            <p className="text-th-fgd-4">{`${borrowBank.name} Borrow Rate`}</p>
+                            <span
+                              className={`font-bold ${
+                                borrowBankBorrowRate > 0.01
+                                  ? 'text-th-error'
+                                  : 'text-th-bkg-4'
+                              }`}
+                            >
+                              -
+                              <FormatNumericValue
+                                value={borrowBankBorrowRate}
+                                decimals={2}
+                              />
+                              %
+                            </span>
+                          </div>
+                          <div className="flex justify-between">
+                            <p className="text-th-fgd-4">{`${borrowBank.name} Borrowed`}</p>
+                            <span
+                              className={`font-bold ${
+                                amountToBorrow > 0.001
+                                  ? 'text-th-fgd-1'
+                                  : 'text-th-bkg-4'
+                              }`}
+                            >
+                              <FormatNumericValue
+                                value={amountToBorrow}
+                                decimals={3}
+                              />
+                              <span className="font-body text-th-fgd-4">
+                                {' '}
+                                {borrowBank.name}
                               </span>
-                            </div>
-                          </>
-                        ) : null}
-                      </Disclosure.Panel>
-                    </>
-                  )}
-                </Disclosure>
-              </div>
-            ) : !groupLoaded ? (
-              <div className="pt-8">
-                <SheenLoader className="flex flex-1 rounded-xl">
-                  <div className="h-[56px] w-full bg-th-bkg-2" />
-                </SheenLoader>
-              </div>
-            ) : null}
-          </div>
-          {connected ? (
-            <Button
-              onClick={handleDeposit}
-              className="flex w-full items-center justify-center"
-              disabled={connected && (!inputAmount || showInsufficientBalance)}
-              size="large"
-            >
-              {submitting ? (
-                <Loading className="mr-2 h-5 w-5" />
-              ) : showInsufficientBalance ? (
-                <div className="flex items-center">
-                  <ExclamationCircleIcon className="icon-shadow mr-2 h-5 w-5 flex-shrink-0" />
-                  {t('swap:insufficient-balance', {
-                    symbol: selectedToken,
-                  })}
-                </div>
-              ) : (
-                `Boost! ${inputAmount} ${formatTokenSymbol(selectedToken)}`
-              )}
-            </Button>
-          ) : (
-            <SecondaryConnectButton
-              className="flex w-full items-center justify-center"
-              isLarge
-            />
-          )}
-          {tokenPositionsFull ? (
-            <InlineNotification
-              type="error"
-              desc={
-                <>
-                  {t('error-token-positions-full')}{' '}
-                  <Link href="/settings" shallow>
-                    {t('manage')}
-                  </Link>
-                </>
-              }
-            />
+                            </span>
+                          </div>
+                        </>
+                      ) : null}
+                    </Disclosure.Panel>
+                  </>
+                )}
+              </Disclosure>
+            </div>
+          ) : !groupLoaded ? (
+            <div className="pt-8">
+              <SheenLoader className="flex flex-1 rounded-xl">
+                <div className="h-[56px] w-full bg-th-bkg-2" />
+              </SheenLoader>
+            </div>
           ) : null}
         </div>
-      </FadeInFadeOut>
+        {connected ? (
+          <Button
+            onClick={handleDeposit}
+            className="flex w-full items-center justify-center"
+            disabled={connected && (!inputAmount || showInsufficientBalance)}
+            size="large"
+          >
+            {submitting ? (
+              <Loading className="mr-2 h-5 w-5" />
+            ) : showInsufficientBalance ? (
+              <div className="flex items-center">
+                <ExclamationCircleIcon className="icon-shadow mr-2 h-5 w-5 flex-shrink-0" />
+                {t('swap:insufficient-balance', {
+                  symbol: selectedToken,
+                })}
+              </div>
+            ) : (
+              `Boost! ${inputAmount} ${formatTokenSymbol(selectedToken)}`
+            )}
+          </Button>
+        ) : (
+          <SecondaryConnectButton
+            className="flex w-full items-center justify-center"
+            isLarge
+          />
+        )}
+        {tokenPositionsFull ? (
+          <InlineNotification
+            type="error"
+            desc={
+              <>
+                {t('error-token-positions-full')}{' '}
+                <Link href="/settings" shallow>
+                  {t('manage')}
+                </Link>
+              </>
+            }
+          />
+        ) : null}
+      </div>
     </>
   )
 }
diff --git a/components/SunburstBackground.tsx b/components/SunburstBackground.tsx
index 2560b2b..5820734 100644
--- a/components/SunburstBackground.tsx
+++ b/components/SunburstBackground.tsx
@@ -2,7 +2,7 @@ const SunburstBackground = ({ className }: { className?: string }) => {
   return (
     <div className="fixed inset-0 flex w-[200%] -translate-x-1/4 items-center justify-center overflow-hidden">
       <svg
-        className={`${className} rotate-bg`}
+        className={`${className} rotate-bg-slow`}
         height="3000"
         width="3000"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/store/mangoStore.ts b/store/mangoStore.ts
index 9303c9a..2cd06b7 100644
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@@ -144,6 +144,7 @@ export type MangoStore = {
   estimatedMaxAPY: {
     current: number
   }
+  submittingBoost: boolean
   //end
   activityFeed: {
     feed: Array<ActivityFeed>
@@ -311,6 +312,7 @@ const mangoStore = create<MangoStore>()(
       estimatedMaxAPY: {
         current: 0,
       },
+      submittingBoost: false,
       //end
       activityFeed: {
         feed: [],
diff --git a/styles/globals.css b/styles/globals.css
index 13f0940..f0f2f92 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -295,7 +295,7 @@ table p {
 }
 
 #range-slider-gradient .range-slider__thumb[data-upper] {
-  @apply h-7 w-4 rounded-full border border-th-primary-3 bg-th-primary-1 shadow-[inset_0_-3px_0px_rgba(0,0,0,0.15)];
+  @apply border-th-primary-3 bg-th-primary-1 h-7 w-4 rounded-full border shadow-[inset_0_-3px_0px_rgba(0,0,0,0.15)];
 }
 
 #range-slider-gradient .range-slider__range {
@@ -372,7 +372,7 @@ table p {
 }
 
 .raised-button-primary {
-  @apply relative bg-th-primary-1 transition-none;
+  @apply bg-th-primary-1 relative transition-none;
   box-shadow: 0 4px var(--primary-3);
 }
 
@@ -443,6 +443,10 @@ table p {
   }
 }
 
-.rotate-bg {
+.rotate-bg-fast {
+  animation: rotate-bg 25s linear infinite;
+}
+
+.rotate-bg-slow {
   animation: rotate-bg 720s linear infinite;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 9f4e73b..b3f3448 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
     },
     extend: {
       animation: {
-        shake: 'shake 0.4s linear 4',
+        shake: 'shake 0.2s linear infinite',
         'spin-fast': 'spin 0.5s linear infinite',
       },
       colors: {