feat: add loading state + switch default to 1Y chart (#299)

SwingbyProtocol · Aug 8, 2023 · 675396d · 675396d · vercel · Aug 8, 2023
1 parent 5d1c50f
commit 675396d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 25 deletions.
diff --git a/src/modules/scenes/Main/Explorer/StatsInfo/index.tsx b/src/modules/scenes/Main/Explorer/StatsInfo/index.tsx
@@ -50,7 +50,7 @@ export const StatsInfo = () => {
   const stats = useSelector(statsSelector);
   const usd = useSelector(usdPricesSelector);
   const isLoading = useSelector(explorerLoadingSelector);
-  const [volumeType, setVolumeType] = useState<VolumeType>('1W');
+  const [volumeType, setVolumeType] = useState<VolumeType>('1Y');
 
   const { bridge, defaultBridge, reward, isLoading: isLoadingMetanode } = useToggleMetanode(
     PATH.EXPLORER,

diff --git a/src/modules/scenes/Main/Liquidity/AddLiquidity/index.tsx b/src/modules/scenes/Main/Liquidity/AddLiquidity/index.tsx
@@ -1,8 +1,7 @@
 import { Dropdown, Icon } from '@swingby-protocol/pulsar';
-import { estimateAmountReceiving } from '@swingby-protocol/sdk';
 import { createWidget, openPopup } from '@swingby-protocol/widget';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import { PulseLoader } from 'react-spinners';
 import { useTheme } from 'styled-components';
@@ -19,7 +18,6 @@ import {
 import { useGetPoolApr, usePoolWithdrawCoin, useToggleBridge } from '../../../../hooks';
 import { useOnboard } from '../../../../onboard';
 import { IWithdrawAmountValidation } from '../../../../pool';
-import { useSdkContext } from '../../../../sdk-context';
 import { useThemeSettings } from '../../../../store/settings';
 import { ButtonScale, TextChosenFilter } from '../../../Common';
 import { mode, PATH } from '../../../../env';
@@ -154,14 +152,16 @@ export const AddLiquidity = (props: Props) => {
             {aprLoading ? (
               <PulseLoader margin={3} size={4} color={theme.pulsar.color.text.normal} />
             ) : (
-              <LiquidityAPRValue>
-                <FormattedNumber
-                  value={bridge && apr[bridge].total}
-                  maximumFractionDigits={2}
-                  minimumFractionDigits={2}
-                />
-                %
-              </LiquidityAPRValue>
+              <a href="https://dune.com/swingby/skybridge" target="_blank" rel="noreferrer">
+                <LiquidityAPRValue>
+                  <FormattedNumber
+                    value={bridge && apr[bridge].total}
+                    maximumFractionDigits={2}
+                    minimumFractionDigits={2}
+                  />
+                  %
+                </LiquidityAPRValue>
+              </a>
             )}
           </LiquidityAPR>
         </LiquidityInfo>

diff --git a/src/modules/scenes/Main/Liquidity/AddLiquidity/styled.tsx b/src/modules/scenes/Main/Liquidity/AddLiquidity/styled.tsx
@@ -223,7 +223,6 @@ export const LiquidityAPR = styled.div`
 
 export const LiquidityAPRValue = styled(Text)`
   color: ${({ theme }) => theme.pulsar.color.primary.normal};
-  margin-left;; ${({ theme }) => rem(theme.pulsar.size.room)};
   font-weight: bold;
 `;
 

diff --git a/src/modules/scenes/Main/Liquidity/Withdraw/index.tsx b/src/modules/scenes/Main/Liquidity/Withdraw/index.tsx
@@ -1,11 +1,12 @@
 import { Dropdown, Icon } from '@swingby-protocol/pulsar';
-import { estimateAmountReceiving, getMinimumWithdrawal } from '@swingby-protocol/sdk';
+import { getMinimumWithdrawal } from '@swingby-protocol/sdk';
 import { createWidget, openPopup } from '@swingby-protocol/widget';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'styled-components';
+import { PulseLoader } from 'react-spinners';
 
 import { AccountId } from '../../../../../components/AccountId';
 import { CoinSymbol, getBridgeSbBtc, TBtcCurrency, swingbyTextDisplay } from '../../../../coins';
@@ -72,7 +73,7 @@ export const Withdraw = (props: Props) => {
   const theme = useTheme();
   const [themeMode] = useThemeSettings();
 
-  const { balance } = useGetSbBtcBal();
+  const { balance, isLoading } = useGetSbBtcBal();
   const minimumWithdrawAmount = useSelector(poolMinimumWithdrawAmountSelector);
   const transactionFees = useSelector(transactionFeesSelector);
   const { locale } = useRouter();
@@ -213,11 +214,15 @@ export const Withdraw = (props: Props) => {
                   <FormattedMessage id="liquidity.sbbtc-holding" />
                 </span>
                 <span>
-                  <FormattedNumber
-                    value={Number(maxAmount)}
-                    maximumFractionDigits={18}
-                    minimumFractionDigits={0}
-                  />
+                  {isLoading ? (
+                    <PulseLoader margin={3} size={4} color={theme.pulsar.color.text.normal} />
+                  ) : (
+                    <FormattedNumber
+                      value={Number(maxAmount)}
+                      maximumFractionDigits={18}
+                      minimumFractionDigits={0}
+                    />
+                  )}
                 </span>
               </AccountIdSbBtcBalanceContainer>
             </>

diff --git a/src/modules/scenes/Main/Swap/BrowserSwap/index.tsx b/src/modules/scenes/Main/Swap/BrowserSwap/index.tsx
@@ -3,6 +3,8 @@ import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { createWidget, getHtml } from '@swingby-protocol/widget';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
+import { PulseLoader } from 'react-spinners';
+import { useTheme } from 'styled-components';
 
 import { useGetNetworkData } from '../../../../hooks';
 import { networkInfoSelector } from '../../../../store';
@@ -34,25 +36,28 @@ interface IBridgeData {
 export const BrowserSwap = () => {
   const { locale } = useRouter();
   const affiliateCode = useAffiliateCode();
-  const [theme] = useThemeSettings();
+  const [themeMode] = useThemeSettings();
+  const theme = useTheme();
 
   const swapForm = useMemo(
     () =>
       createWidget({
         resource: 'swap',
         mode,
         size: 'big',
-        theme,
+        theme: themeMode,
         locale,
         affiliateCode,
       }),
-    [theme, locale, affiliateCode],
+    [themeMode, locale, affiliateCode],
   );
 
   useGetNetworkData();
   const networkInfos = useSelector(networkInfoSelector);
   const { floatBalances } = networkInfos;
 
+  const isLoading = floatBalances.btcSkypool === 0 && floatBalances.wbtcSkypool === 0;
+
   const dataSkypoolBridge = [
     {
       coin: CoinSymbol.BTC,
@@ -81,7 +86,11 @@ export const BrowserSwap = () => {
                       <Coin symbol={coin.coin} />
                       <CoinName>{coin.name}</CoinName>
                       <b>
-                        <FormattedNumber value={Number(coin.float)} />
+                        {isLoading ? (
+                          <PulseLoader margin={3} size={4} color={theme.pulsar.color.text.normal} />
+                        ) : (
+                          <FormattedNumber value={Number(coin.float)} />
+                        )}
                       </b>
                     </CoinInfo>
                   );