Merge branch 'main' into feature/modals

# Conflicts: # src/modals/SearchableTokenListModal.tsx
bancorprotocol · Oct 19, 2022 · 078aaf1 · 078aaf1
2 parents aea2cfa + d990110
commit 078aaf1
Show file tree

Hide file tree

Showing 19 changed files with 259 additions and 79 deletions.
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -17,7 +17,7 @@ export const Page = ({
     <div className="page">
       {title && (
         <div className="flex gap-10">
-          <h1>{title}</h1>
+          <h1 className={'leading-10'}>{title}</h1>
           {trailingTitle}
         </div>
       )}

diff --git a/src/elements/fiat/FiatBox.tsx b/src/elements/fiat/FiatBox.tsx
@@ -51,7 +51,7 @@ export const FiatBox = ({ fiat }: { fiat: Fiat }) => {
   const fiatOut = fiat.operations.includes(Operations.fiatOut);
 
   return (
-    <div className="flex flex-col items-between bg-white dark:bg-charcoal [h-360px] p-30 shadow hover:shadow-lg rounded-20 text-grey dark:text-white">
+    <div className="content-block flex flex-col items-between [h-360px] p-30 transition duration-300 hover:shadow-lg rounded-20">
       <fiat.logo className="h-40 w-140 self-start text-black dark:text-white" />
       <div className="flex items-center my-20 font-medium">
         Available Operations
@@ -66,7 +66,7 @@ export const FiatBox = ({ fiat }: { fiat: Fiat }) => {
           </div>
         )}
       </div>
-      {fiat.text}
+      <p className={'text-secondary'}>{fiat.text}</p>
       <div className="flex justify-between items-center my-20 max-w-[280px]">
         {fiatIn && (
           <Button

diff --git a/src/elements/walletConnect/WalletConnectButton.tsx b/src/elements/walletConnect/WalletConnectButton.tsx
@@ -6,6 +6,12 @@ import { ReactNode } from 'react';
 import { Image } from 'components/image/Image';
 import { shortenString } from 'utils/pureFunctions';
 import { ReactComponent as IconWallet } from 'assets/icons/wallet.svg';
+import { useWeb3React } from '@web3-react/core';
+import {
+  isUnsupportedNetwork,
+  requestSwitchChain,
+} from 'utils/helperFunctions';
+import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
 
 const LoginButton = ({
   loggedIn,
@@ -35,6 +41,8 @@ export const WalletConnectButton = ({
   selectedWallet,
 }: UseWalletConnect) => {
   const loggedIn = !!selectedWallet && !!account;
+  const { chainId } = useWeb3React();
+  const unsupportedNetwork = isUnsupportedNetwork(chainId);
 
   return loggedIn ? (
     <PopoverV3
@@ -43,8 +51,18 @@ export const WalletConnectButton = ({
       showArrow={false}
       buttonElement={() => (
         <LoginButton loggedIn>
-          <Image src={selectedWallet.icon} alt="Wallet Logo" className="w-20" />
-          <span className="mx-10">{shortenString(account)}</span>
+          {unsupportedNetwork ? (
+            <WarningIcon className="w-15 h-15 text-error" />
+          ) : (
+            <Image
+              src={selectedWallet.icon}
+              alt="Wallet Logo"
+              className="w-20"
+            />
+          )}
+          <span className="mx-10">
+            {unsupportedNetwork ? 'Wrong Network' : shortenString(account)}
+          </span>
         </LoginButton>
       )}
       options={{
@@ -60,7 +78,13 @@ export const WalletConnectButton = ({
       }}
     >
       <div>
-        Ethereum Network
+        {unsupportedNetwork ? (
+          <button className="text-error" onClick={() => requestSwitchChain()}>
+            Switch network →
+          </button>
+        ) : (
+          'Ethereum Network'
+        )}
         <hr className="border-silver dark:border-grey my-15" />
         <button
           onClick={() => handleWalletButtonClick()}

diff --git a/src/elements/walletConnect/useWalletConnect.ts b/src/elements/walletConnect/useWalletConnect.ts
@@ -15,6 +15,7 @@ import { useDispatch } from 'react-redux';
 import { openNewTab, wait } from 'utils/pureFunctions';
 import { setUser } from 'services/observables/user';
 import { isForkAvailable } from 'services/web3/config';
+import { requestSwitchChain } from 'utils/helperFunctions';
 
 export interface UseWalletConnect {
   isOpen: boolean;
@@ -94,6 +95,7 @@ export const useWalletConnect = (): UseWalletConnect => {
           );
           await wait(500);
           setIsPending(false);
+          requestSwitchChain();
         } catch (e: any) {
           console.error('failed to connect wallet. ', e.message);
           setIsError(true);

diff --git a/src/modals/DepositV3Modal.tsx b/src/modals/DepositV3Modal.tsx
@@ -281,26 +281,28 @@ export const DepositV3Modal = () => {
                   <div className="flex justify-between items-center">
                     <div className="flex items-center gap-5">
                       Compounding {pool.reserveToken.symbol} Returns
-                      <PopoverV3
-                        buttonElement={() => (
-                          <IconGift className="w-10 h-10 text-secondary" />
-                        )}
-                      >
-                        <div className="w-[126px]">
-                          <div className="flex justify-between items-center">
-                            Fees
-                            <span>
-                              {prettifyNumber(pool.apr7d.tradingFees)}%
-                            </span>
-                          </div>
-                          <div className="flex justify-between items-center">
-                            Rewards
-                            <span>
-                              {prettifyNumber(pool.apr7d.autoCompounding)}%
-                            </span>
+                      {!toBigNumber(pool.apr7d.autoCompounding).isZero() && (
+                        <PopoverV3
+                          buttonElement={() => (
+                            <IconGift className="w-10 h-10 text-secondary" />
+                          )}
+                        >
+                          <div className="w-[126px]">
+                            <div className="flex justify-between items-center">
+                              Fees
+                              <span>
+                                {prettifyNumber(pool.apr7d.tradingFees)}%
+                              </span>
+                            </div>
+                            <div className="flex justify-between items-center">
+                              Rewards
+                              <span>
+                                {prettifyNumber(pool.apr7d.autoCompounding)}%
+                              </span>
+                            </div>
                           </div>
-                        </div>
-                      </PopoverV3>
+                        </PopoverV3>
+                      )}
                     </div>
                     <span>
                       {prettifyNumber(

diff --git a/src/pages/Fiat.tsx b/src/pages/Fiat.tsx
@@ -8,6 +8,7 @@ import { ReactComponent as junoLogo } from 'assets/logos/juno.svg';
 import { ReactComponent as transakLogo } from 'assets/logos/transak.svg';
 import { ReactComponent as binanceLogo } from 'assets/logos/binance.svg';
 import { ReactComponent as IconInfo } from 'assets/icons/info.svg';
+import { Page } from 'components/Page';
 
 const fiats = [
   {
@@ -141,32 +142,31 @@ const fiats = [
 
 export const Fiat = () => {
   return (
-    <div className="grid md:grid-cols-2 gap-40 text-charcoal dark:text-white text-14 max-w-[1140px] pt-80 mb-20 mx-10 md:mx-auto">
-      <div className="mt-20 mx-16 md:ml-5">
-        <div className="font-medium text-2xl md:font-semibold md:text-3xl mb-20">
-          Fiat Gateway Providers
+    <Page title={'Fiat Gateway Providers'}>
+      <div className="grid md:grid-cols-2 gap-40">
+        <div className="mt-20 text-secondary">
+          <p>Below is a list of popular fiat gateways.</p>
+          <p>
+            It can be used to buy or sell crypto with a credit card, bank
+            transfer & more.
+          </p>
         </div>
-        <div>
-          <div>Below is a list of popular fiat gateways.</div>
-          It can be used to buy or sell crypto with a credit card, bank transfer
-          & more.
+        <div className="bg-white shadow dark:shadow-none hover:shadow-lg dark:bg-charcoal px-20 py-16 rounded-20 text-12">
+          <div className="flex items-center mb-8 text-16">
+            <IconInfo className="w-15 h-15 mr-10" />
+            Fiat Services
+          </div>
+          <div className="text-secondary">
+            Fiat services on Bancor are provided by third-parties. Bancor is not
+            associated with, responsible or liable for the performance of these
+            third-party services. Any claims & questions should be addressed
+            with the selected provider directly.
+          </div>
         </div>
+        {fiats.map((fiat) => (
+          <FiatBox key={fiat.name} fiat={fiat} />
+        ))}
       </div>
-      <div className="bg-white shadow dark:shadow-none hover:shadow-lg dark:bg-charcoal px-20 py-16 rounded-20 text-12">
-        <div className="flex items-center mb-8 text-16">
-          <IconInfo className="w-15 h-15 mr-10" />
-          Fiat Services
-        </div>
-        <div className="dark:text-graphite">
-          Fiat services on Bancor are provided by third-parties. Bancor is not
-          associated with, responsible or liable for the performance of these
-          third-party services. Any claims & questions should be addressed with
-          the selected provider directly.
-        </div>
-      </div>
-      {fiats.map((fiat) => (
-        <FiatBox key={fiat.name} fiat={fiat} />
-      ))}
-    </div>
+    </Page>
   );
 };
diff --git a/src/pages/Swap.tsx b/src/pages/Swap.tsx
@@ -9,7 +9,7 @@ export const Swap = () => {
   const query = useQuery();
 
   return (
-    <div className="pt-60 md:pt-[120px]">
+    <div className="pt-[120px] px-10">
       <SwapWidget
         isLimit={isLimit}
         setIsLimit={setIsLimit}

diff --git a/src/pages/UnsupportedNetwork.tsx b/src/pages/UnsupportedNetwork.tsx
@@ -1,9 +1,40 @@
-import { DisabledWarning } from 'components/disabledWarning/DisabledWarning';
-
-const title = 'Unsupported network';
-const description =
-  'In order to proceed, please change your wallets network settings to Ethereum Mainnet.';
+import { Navigate } from 'components/navigate/Navigate';
+import { Button, ButtonSize, ButtonVariant } from 'components/button/Button';
+import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
+import { ReactComponent as IconSearch } from 'assets/icons/search.svg';
+import { requestSwitchChain } from 'utils/helperFunctions';
+import { isMobile } from 'react-device-detect';
 
 export const UnsupportedNetwork = () => {
-  return <DisabledWarning title={title} description={description} />;
+  return (
+    <div className="flex flex-col items-center justify-center gap-15 p-15 h-screen text-center">
+      <WarningIcon className="w-40 h-40 text-error" />
+      <div className="text-[22px]">Wrong network</div>
+      <div className="text-secondary mb-36">
+        Please connect to a supported network in the dropdown menu or in your
+        wallet
+      </div>
+      <div className="flex items-center gap-15">
+        <Button
+          variant={ButtonVariant.Secondary}
+          size={isMobile ? ButtonSize.Small : ButtonSize.Meduim}
+        >
+          <Navigate
+            to="https://support.bancor.network/hc/en-us/articles/5463892405010-MetaMask-Setup-Guide"
+            className="flex items-center justify-center gap-12"
+          >
+            <IconSearch className="w-20 h-20" />
+            Learn How
+          </Navigate>
+        </Button>
+        <Button
+          variant={ButtonVariant.Primary}
+          size={isMobile ? ButtonSize.Small : ButtonSize.Meduim}
+          onClick={() => requestSwitchChain()}
+        >
+          Switch Network
+        </Button>
+      </div>
+    </div>
+  );
 };
diff --git a/src/services/observables/apiData.ts b/src/services/observables/apiData.ts
@@ -17,7 +17,7 @@ export const apiData$ = combineLatest([oneMinute$]).pipe(
   shareReplay(1)
 );
 
-export const apiTokens$ = apiData$.pipe(
+export const apiTokensV2$ = apiData$.pipe(
   pluck('tokens'),
   distinctUntilChanged<WelcomeData['tokens']>(isEqual),
   shareReplay(1)

diff --git a/src/services/observables/pools.ts b/src/services/observables/pools.ts
@@ -1,4 +1,9 @@
-import { allTokensV2$, Token, tokensV3$ } from 'services/observables/tokens';
+import {
+  allTokensV2$,
+  allTokensV3$,
+  Token,
+  tokensV3$,
+} from 'services/observables/tokens';
 import BigNumber from 'bignumber.js';
 import { combineLatest } from 'rxjs';
 import { switchMapIgnoreThrow } from 'services/observables/customOperators';
@@ -263,7 +268,6 @@ const buildPoolV3Object = (
     .minus(1)
     .times(100)
     .toString();
-
   return {
     ...apiPool,
     liquidity,
@@ -396,3 +400,49 @@ export const poolsV3$ = combineLatest([
   distinctUntilChanged<PoolV3[]>(isEqual),
   shareReplay(1)
 );
+
+export const allpoolsV3$ = combineLatest([
+  apiPoolsV3$,
+  allTokensV3$,
+  standardRewardPrograms$,
+]).pipe(
+  switchMapIgnoreThrow(
+    async ([apiPoolsV3, allTokens, standardRewardPrograms]) => {
+      const tokensMap = new Map(allTokens.map((t) => [t.address, t]));
+      const poolIds = apiPoolsV3.map((pool) => pool.poolDltId);
+
+      const [
+        latestProgramIds,
+        masterVaultBalances,
+        extVaultBalances,
+        extVaultIsPaused,
+      ] = await Promise.all([
+        fetchLatestProgramIdsMulticall(apiPoolsV3),
+        fetchTokenBalanceMulticall(poolIds, bancorMasterVault),
+        fetchTokenBalanceMulticall(
+          poolIds,
+          ContractsApi.ExternalProtectionVault.contractAddress
+        ),
+        ContractsApi.ExternalProtectionVault.read.isPaused(),
+      ]);
+
+      const pools = await Promise.all(
+        apiPoolsV3.map(
+          async (pool) =>
+            await buildPoolV3Object(
+              tokensMap,
+              pool,
+              tokensMap.get(pool.poolDltId),
+              latestProgramIds,
+              standardRewardPrograms,
+              masterVaultBalances,
+              !extVaultIsPaused ? extVaultBalances : undefined
+            )
+        )
+      );
+      return pools.filter((pool) => !!pool) as PoolV3[];
+    }
+  ),
+  distinctUntilChanged<PoolV3[]>(isEqual),
+  shareReplay(1)
+);
diff --git a/src/services/observables/portfolio.ts b/src/services/observables/portfolio.ts
@@ -11,7 +11,7 @@ import { WithdrawalSettings } from 'store/portfolio/v3Portfolio.types';
 import { fetchStandardRewardsByUser } from 'services/web3/v3/portfolio/standardStaking';
 import { oneMinute$ } from 'services/observables/timers';
 import { apiPoolsV3$ } from 'services/observables/apiData';
-import { poolsV3$ } from 'services/observables/pools';
+import { allpoolsV3$ } from 'services/observables/pools';
 
 export const portfolioHoldings$ = combineLatest([
   apiPoolsV3$,
@@ -28,7 +28,7 @@ export const portfolioHoldings$ = combineLatest([
 
 export const portfolioStandardRewards$ = combineLatest([
   user$,
-  poolsV3$,
+  allpoolsV3$,
   oneMinute$,
 ]).pipe(
   switchMapIgnoreThrow(async ([user, poolsV3]) => {