added modals

galacticcouncil · Jan 30, 2024 · 5254451 · 5254451
1 parent ba33fea
commit 5254451
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 43 deletions.
diff --git a/src/jsx/jsx-sx-convert.ts b/src/jsx/jsx-sx-convert.ts
@@ -222,7 +222,8 @@ const isSxProp = (prop: string): prop is PropName =>
   sxPropNames.includes(prop as PropName)
 
 const isMuiSxPropValue = (value: any) =>
-  typeof value === "object" && !Array.isArray(value)
+  typeof value === "function" ||
+  (typeof value === "object" && !Array.isArray(value))
 
 const isSxPropsValid = (sx: SxProps) =>
   typeof sx === "object" &&

diff --git a/src/sections/lending/components/WalletConnection/ConnectWalletButton.tsx b/src/sections/lending/components/WalletConnection/ConnectWalletButton.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@mui/material"
-import React, { lazy } from "react"
+import React, { lazy, Suspense } from "react"
 import { useWalletModalContext } from "sections/lending/hooks/useWalletModal"
 
 const WalletModal = lazy(async () => ({
@@ -25,7 +25,9 @@ export const ConnectWalletButton: React.FC<ConnectWalletProps> = ({
       >
         <span>Connect wallet</span>
       </Button>
-      <WalletModal />
+      <Suspense>
+        <WalletModal />
+      </Suspense>
     </>
   )
 }
diff --git a/src/sections/lending/components/WalletConnection/WalletSelector.tsx b/src/sections/lending/components/WalletConnection/WalletSelector.tsx
@@ -32,7 +32,7 @@ const WalletRow = ({ walletName, walletType }: WalletRowProps) => {
       case WalletType.INJECTED:
         return (
           <img
-            src={`/icons/wallets/browserWallet.svg`}
+            src={`https://app.aave.com/icons/wallets/browserWallet.svg`}
             width="24px"
             height="24px"
             alt={`browser wallet icon`}
@@ -41,7 +41,7 @@ const WalletRow = ({ walletName, walletType }: WalletRowProps) => {
       case WalletType.WALLET_CONNECT:
         return (
           <img
-            src={`/icons/wallets/walletConnect.svg`}
+            src={`https://app.aave.com/icons/wallets/walletConnect.svg`}
             width="24px"
             height="24px"
             alt={`browser wallet icon`}
@@ -50,7 +50,7 @@ const WalletRow = ({ walletName, walletType }: WalletRowProps) => {
       case WalletType.WALLET_LINK:
         return (
           <img
-            src={`/icons/wallets/coinbase.svg`}
+            src={`https://app.aave.com/icons/wallets/coinbase.svg`}
             width="24px"
             height="24px"
             alt={`browser wallet icon`}
@@ -59,7 +59,7 @@ const WalletRow = ({ walletName, walletType }: WalletRowProps) => {
       case WalletType.TORUS:
         return (
           <img
-            src={`/icons/wallets/torus.svg`}
+            src={`https://app.aave.com/icons/wallets/torus.svg`}
             width="24px"
             height="24px"
             alt={`browser wallet icon`}
@@ -68,7 +68,7 @@ const WalletRow = ({ walletName, walletType }: WalletRowProps) => {
       // case WalletType.FRAME:
       //   return (
       //     <img
-      //       src={`/icons/wallets/frame.svg`}
+      //       src={`https://app.aave.com/icons/wallets/frame.svg`}
       //       width="24px"
       //       height="24px"
       //       alt={`browser wallet icon`}

diff --git a/src/sections/lending/components/primitives/Link.tsx b/src/sections/lending/components/primitives/Link.tsx
@@ -1,11 +1,11 @@
 import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material"
-import { Link as RouterLink } from "@tanstack/react-location"
 import { SxProps as MuiSxProps } from "@mui/system"
-import * as React from "react"
+import { Link as RouterLink } from "@tanstack/react-location"
+import { forwardRef } from "react"
 import { CustomMarket } from "sections/lending/ui-config/marketsConfig"
 import { withoutHexPrefix } from "sections/lending/utils/utils"
 
-const RouterLinkComposed = React.forwardRef<HTMLAnchorElement, MuiLinkProps>(
+const RouterLinkComposed = forwardRef<HTMLAnchorElement, MuiLinkProps>(
   (props, ref) => (
     <RouterLink
       _ref={ref}
@@ -20,18 +20,40 @@ const RouterLinkComposed = React.forwardRef<HTMLAnchorElement, MuiLinkProps>(
 
 export type LinkProps = MuiLinkProps
 
-export const Link = React.forwardRef<HTMLAnchorElement, MuiLinkProps>(
+export const Link = forwardRef<HTMLAnchorElement, MuiLinkProps>(
   function Link(props, ref) {
-    const { className, children, sx, ...other } = props
+    const { className, children, href, sx, ...other } = props
+
+    const isExternal =
+      typeof href === "string" &&
+      (href.indexOf("http") === 0 || href.indexOf("mailto:") === 0)
+
+    if (isExternal) {
+      return (
+        <MuiLink
+          ref={ref}
+          href={href}
+          className={className}
+          target="_blank"
+          rel="noopener"
+          sx={sx as MuiSxProps}
+          underline="none"
+          {...other}
+        >
+          {children}
+        </MuiLink>
+      )
+    }
 
     return (
       <MuiLink
+        ref={ref}
+        href={href}
         className={className}
         component={RouterLinkComposed}
+        sx={sx as MuiSxProps}
         underline="none"
         {...other}
-        sx={sx as MuiSxProps}
-        ref={ref}
       >
         {children}
       </MuiLink>

diff --git a/src/sections/lending/components/primitives/TokenIcon.tsx b/src/sections/lending/components/primitives/TokenIcon.tsx
@@ -84,7 +84,7 @@ export function Base64Token({
         style={{ opacity: 1 }}
         ref={ref}
         id="svg"
-        data={`/icons/tokens/${symbol.toLowerCase()}.svg`}
+        data={`https://app.aave.com/icons/tokens/${symbol.toLowerCase()}.svg`}
         onLoad={() => setLoading(false)}
       />
       {aToken && <ATokenIcon ref={aRef} />}
@@ -139,7 +139,7 @@ export const ATokenIcon = forwardRef<SVGSVGElement, ATokenIconProps>(
             <image
               x="25"
               y="25"
-              href={`/icons/tokens/${symbol.toLowerCase()}.svg`}
+              href={`https://app.aave.com/icons/tokens/${symbol.toLowerCase()}.svg`}
               width="206"
               height="206"
             />

diff --git a/src/sections/lending/components/transactions/DebtSwitch/DebtSwitchActions.tsx b/src/sections/lending/components/transactions/DebtSwitch/DebtSwitchActions.tsx
@@ -7,7 +7,6 @@ import { SignatureLike } from "@ethersproject/bytes"
 
 import { BoxProps } from "@mui/material"
 import { parseUnits } from "ethers/lib/utils"
-import { queryClient } from "pages/_app.page"
 import { useCallback, useEffect, useState } from "react"
 import { MOCK_SIGNED_HASH } from "sections/lending/helpers/useTransactionHandler"
 import { useBackgroundDataProvider } from "sections/lending/hooks/app-data-provider/BackgroundDataProvider"
@@ -31,6 +30,7 @@ import {
   APPROVE_DELEGATION_GAS_LIMIT,
   checkRequiresApproval,
 } from "sections/lending/components/transactions/utils"
+import { useQueryClient } from "@tanstack/react-query"
 
 interface DebtSwitchBaseProps extends BoxProps {
   amountToSwap: string
@@ -73,6 +73,7 @@ export const DebtSwitchActions = ({
 }: DebtSwitchBaseProps & {
   buildTxFn: () => Promise<SwapTransactionParams>
 }) => {
+  const queryClient = useQueryClient()
   const [
     getCreditDelegationApprovedAmount,
     currentMarketData,
@@ -181,7 +182,7 @@ export const DebtSwitchActions = ({
       }
     } catch (error) {
       const parsedError = getErrorTextFromError(
-        error,
+        error as Error,
         TxAction.GAS_ESTIMATION,
         false,
       )
@@ -241,7 +242,7 @@ export const DebtSwitchActions = ({
       refetchIncentiveData && refetchIncentiveData()
     } catch (error) {
       const parsedError = getErrorTextFromError(
-        error,
+        error as Error,
         TxAction.GAS_ESTIMATION,
         false,
       )

diff --git a/src/sections/lending/components/transactions/Repay/RepayActions.tsx b/src/sections/lending/components/transactions/Repay/RepayActions.tsx
@@ -7,7 +7,6 @@ import { TransactionResponse } from "@ethersproject/providers"
 
 import { BoxProps } from "@mui/material"
 import { parseUnits } from "ethers/lib/utils"
-import { queryClient } from "pages/_app.page"
 import { useEffect, useState } from "react"
 import { useBackgroundDataProvider } from "sections/lending/hooks/app-data-provider/BackgroundDataProvider"
 import { ComputedReserveData } from "sections/lending/hooks/app-data-provider/useAppDataProvider"
@@ -31,6 +30,7 @@ import {
   APPROVAL_GAS_LIMIT,
   checkRequiresApproval,
 } from "sections/lending/components/transactions/utils"
+import { useQueryClient } from "@tanstack/react-query"
 
 export interface RepayActionProps extends BoxProps {
   amountToRepay: string
@@ -58,6 +58,7 @@ export const RepayActions = ({
   maxApproveNeeded,
   ...props
 }: RepayActionProps) => {
+  const queryClient = useQueryClient()
   const [
     repay,
     repayWithPermit,
@@ -226,7 +227,7 @@ export const RepayActions = ({
       refetchGhoData && refetchGhoData()
     } catch (error) {
       const parsedError = getErrorTextFromError(
-        error,
+        error as Error,
         TxAction.GAS_ESTIMATION,
         false,
       )

diff --git a/src/sections/lending/components/transactions/Supply/SupplyActions.tsx b/src/sections/lending/components/transactions/Supply/SupplyActions.tsx
@@ -3,7 +3,6 @@ import { TransactionResponse } from "@ethersproject/providers"
 
 import { BoxProps } from "@mui/material"
 import { parseUnits } from "ethers/lib/utils"
-import { queryClient } from "pages/_app.page"
 import React, { useEffect, useState } from "react"
 import { useBackgroundDataProvider } from "sections/lending/hooks/app-data-provider/BackgroundDataProvider"
 import {
@@ -21,6 +20,7 @@ import {
 } from "sections/lending/ui-config/errorMapping"
 import { queryKeysFactory } from "sections/lending/ui-config/queries"
 
+import { useQueryClient } from "@tanstack/react-query"
 import { TxActionsWrapper } from "sections/lending/components/transactions/TxActionsWrapper"
 import {
   APPROVAL_GAS_LIMIT,
@@ -50,6 +50,7 @@ export const SupplyActions = React.memo(
     isWrappedBaseAsset,
     ...props
   }: SupplyActionProps) => {
+    const queryClient = useQueryClient()
     const [
       tryPermit,
       supply,
@@ -208,7 +209,7 @@ export const SupplyActions = React.memo(
         refetchGhoData && refetchGhoData()
       } catch (error) {
         const parsedError = getErrorTextFromError(
-          error,
+          error as Error,
           TxAction.GAS_ESTIMATION,
           false,
         )

diff --git a/src/sections/lending/components/transactions/Supply/SupplyModalContent.tsx b/src/sections/lending/components/transactions/Supply/SupplyModalContent.tsx
@@ -16,10 +16,8 @@ import { ERC20TokenType } from "sections/lending/libs/web3-data-provider/Web3Pro
 import { useRootStore } from "sections/lending/store/root"
 import { getMaxAmountAvailableToSupply } from "sections/lending/utils/getMaxAmountAvailableToSupply"
 import { isFeatureEnabled } from "sections/lending/utils/marketsAndNetworksConfig"
-import { GENERAL } from "sections/lending/utils/mixPanelEvents"
 import { roundToTokenDecimals } from "sections/lending/utils/utils"
 
-import { useAppDataContext } from "sections/lending/hooks/app-data-provider/useAppDataProvider"
 import { CapType } from "sections/lending/components/caps/helper"
 import { AssetInput } from "sections/lending/components/transactions/AssetInput"
 import { GasEstimationError } from "sections/lending/components/transactions/FlowCommons/GasEstimationError"
@@ -36,7 +34,9 @@ import { getAssetCollateralType } from "sections/lending/components/transactions
 import { AAVEWarning } from "sections/lending/components/transactions/Warnings/AAVEWarning"
 import { IsolationModeWarning } from "sections/lending/components/transactions/Warnings/IsolationModeWarning"
 import { SNXWarning } from "sections/lending/components/transactions/Warnings/SNXWarning"
+import { useAppDataContext } from "sections/lending/hooks/app-data-provider/useAppDataProvider"
 import { SupplyActions } from "./SupplyActions"
+import { PROCESS_MOCK } from "sections/lending/utils/marketsAndNetworksConfig"
 
 export enum ErrorType {
   CAP_REACHED,
@@ -239,7 +239,7 @@ export const SupplyModalContent = React.memo(
             <AMPLWarning />
           </Warning>
         )}
-        {process.env.NEXT_PUBLIC_ENABLE_STAKING === "true" &&
+        {PROCESS_MOCK.env.NEXT_PUBLIC_ENABLE_STAKING === "true" &&
           poolReserve.symbol === "AAVE" &&
           isFeatureEnabled.staking(currentMarketData) && <AAVEWarning />}
         {poolReserve.symbol === "SNX" && maxAmountToSupply !== "0" && (

diff --git a/src/sections/lending/components/transactions/Switch/SwitchActions.tsx b/src/sections/lending/components/transactions/Switch/SwitchActions.tsx
@@ -6,7 +6,6 @@ import {
 
 import { OptimalRate } from "@paraswap/sdk"
 import { defaultAbiCoder, formatUnits, splitSignature } from "ethers/lib/utils"
-import { queryClient } from "pages/_app.page"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { MOCK_SIGNED_HASH } from "sections/lending/helpers/useTransactionHandler"
 import { calculateSignedAmount } from "sections/lending/hooks/paraswap/common"
@@ -28,6 +27,7 @@ import {
 
 import { TxActionsWrapper } from "sections/lending/components/transactions/TxActionsWrapper"
 import { APPROVAL_GAS_LIMIT } from "sections/lending/components/transactions/utils"
+import { useQueryClient } from "@tanstack/react-query"
 
 interface SwithProps {
   inputAmount: string
@@ -63,6 +63,7 @@ export const SwitchActions = ({
   chainId,
   route,
 }: SwithProps) => {
+  const queryClient = useQueryClient()
   const [
     user,
     generateApproval,
@@ -172,7 +173,7 @@ export const SwitchActions = ({
           })
         } catch (error) {
           const parsedError = getErrorTextFromError(
-            error,
+            error as Error,
             TxAction.MAIN_ACTION,
             false,
           )
@@ -194,7 +195,7 @@ export const SwitchActions = ({
         }
       } catch (error) {
         const parsedError = getErrorTextFromError(
-          error,
+          error as Error,
           TxAction.GAS_ESTIMATION,
           false,
         )
@@ -280,7 +281,7 @@ export const SwitchActions = ({
         }
       } catch (error) {
         const parsedError = getErrorTextFromError(
-          error,
+          error as Error,
           TxAction.GAS_ESTIMATION,
           false,
         )