@bosonprotocol/react-kit 0.29.0-alpha.2 → 0.29.0-alpha.21

package/src/components/widgets/commit/CommitWidgetProviders.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useCallback } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { CONFIG } from "../../../lib/config/config";
 import ChatProvider from "../../chat/ChatProvider/ChatProvider";
@@ -15,43 +15,84 @@ import WalletConnectionProvider, {
 import ConvertionRateProvider, {
   ConvertionRateProviderProps
 } from "../finance/convertion-rate/ConvertionRateProvider";
-import { Updaters } from "../../../state/updaters";
+import { Updaters, UpdatersProps } from "../../../state/updaters";
 import { Provider } from "react-redux";
 import store from "../../../state";
+import { ReduxCCDummyContext } from "../../../state/reduxContext";
+import { useIsWindowVisible } from "../../../hooks/uniswap/useIsWindowVisible";
+import { useProvider } from "../../../hooks/connection/connection";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 export type CommitWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
   ConvertionRateProviderProps &
   Omit<WalletConnectionProviderProps, "children" | "envName"> & {
     children: ReactNode;
+    withReduxProvider: boolean;
   };
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
 const { infuraKey, magicLinkKey } = CONFIG;
-
-export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> = ({
-  children,
-  ...props
+export const CommitWidgetReduxProvider = ({
+  children
+}: {
+  children: ReactNode;
 }) => {
   return (
-    <Provider store={store}>
-      <ConfigProvider
-        magicLinkKey={magicLinkKey}
-        infuraKey={infuraKey}
-        {...props}
-      >
-        <MagicProvider>
-          <QueryClientProvider client={queryClient}>
+    // it doesnt matter what the initial value of the context is, hence the any cast
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <Provider store={store} context={ReduxCCDummyContext as any}>
+      {children}
+    </Provider>
+  );
+};
+export const CommitWidgetReduxUpdaters = ({
+  children,
+  ...rest
+}: UpdatersProps) => {
+  return <Updaters {...rest}>{children}</Updaters>;
+};
+
+export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> =
+  withQueryClientProvider(({ children, withReduxProvider, ...props }) => {
+    const isWindowVisible = useIsWindowVisible();
+    const WithReduxProvider = useCallback(
+      ({ children: providersChildren }: { children: ReactNode }) => {
+        return withReduxProvider ? (
+          <CommitWidgetReduxProvider>
+            {providersChildren}
+          </CommitWidgetReduxProvider>
+        ) : (
+          <>{providersChildren}</>
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      },
+      [withReduxProvider]
+    );
+    const WithUpdaters = useCallback(
+      ({ children: updatersChildren }: { children: ReactNode }) => {
+        return withReduxProvider ? (
+          <UpdatersWrapper isWindowVisible={isWindowVisible}>
+            {updatersChildren}
+          </UpdatersWrapper>
+        ) : (
+          <>{updatersChildren}</>
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      },
+      [withReduxProvider, isWindowVisible]
+    );
+    return (
+      <WithReduxProvider>
+        <ConfigProvider
+          magicLinkKey={magicLinkKey}
+          infuraKey={infuraKey}
+          {...props}
+        >
+          <MagicProvider>
             <WalletConnectionProvider
               walletConnectProjectId={props.walletConnectProjectId}
             >
-              <Updaters>
+              <WithUpdaters>
                 <ChatProvider>
                   <IpfsProvider {...props}>
                     <ConvertionRateProvider>
@@ -59,11 +100,25 @@ export const CommitWidgetProviders: React.FC<CommitWidgetProvidersProps> = ({
                     </ConvertionRateProvider>
                   </IpfsProvider>
                 </ChatProvider>
-              </Updaters>
+              </WithUpdaters>
             </WalletConnectionProvider>
-          </QueryClientProvider>
-        </MagicProvider>
-      </ConfigProvider>
-    </Provider>
+          </MagicProvider>
+        </ConfigProvider>
+      </WithReduxProvider>
+    );
+  });
+
+function UpdatersWrapper({
+  children,
+  isWindowVisible
+}: {
+  children: ReactNode;
+  isWindowVisible: boolean;
+}) {
+  const provider = useProvider();
+  return (
+    <Updaters isWindowVisible={isWindowVisible} provider={provider}>
+      {children}
+    </Updaters>
   );
-};
+}

package/src/components/widgets/finance/FinanceWidget.tsx

@@ -3,36 +3,24 @@ import isBetween from "dayjs/plugin/isBetween";
 
 import { ethers } from "ethers";
 import React, { useEffect, useMemo, useRef } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
 import styled from "styled-components";
 import { useAccount } from "../../../hooks/connection/connection";
 import { useDisconnect } from "../../../hooks/connection/useDisconnect";
 import { useCurrentSellers } from "../../../hooks/useCurrentSellers";
-import { CONFIG } from "../../../lib/config/config";
-import {
-  ConfigProvider,
-  ConfigProviderProps
-} from "../../config/ConfigProvider";
-import { MagicProvider } from "../../magicLink/MagicProvider";
-import ModalProvider from "../../modal/ModalProvider";
-import { SignerProvider } from "../../signer/SignerProvider";
-import GlobalStyle from "../../styles/GlobalStyle";
 import { Grid } from "../../ui/Grid";
 import Loading from "../../ui/loading/Loading";
 import ConnectButton from "../../wallet/ConnectButton";
-import WalletConnectionProvider from "../../wallet/WalletConnectionProvider";
-import { getParentWindowOrigin } from "../common";
-import { CommonWidgetTypes } from "../types";
 import Finance, { Props } from "./Finance";
-import ConvertionRateProvider, {
-  ConvertionRateProviderProps
-} from "./convertion-rate/ConvertionRateProvider";
 import { useConvertionRate } from "./convertion-rate/useConvertionRate";
 import { useExchangeTokens } from "./exchange-tokens/useExchangeTokens";
 import useFunds from "./useFunds";
 import { useOffersBacked } from "./useOffersBacked";
 import { useSellerDeposit } from "./useSellerDeposit";
 import { useSellerRoles } from "./useSellerRoles";
+import {
+  FinanceWidgetProviders,
+  FinanceWidgetProvidersProps
+} from "./FinanceWidgetProviders";
 dayjs.extend(isBetween);
 
 const StyledConnectButton = styled(ConnectButton)`
@@ -146,59 +134,20 @@ function WithSellerData(WrappedComponent: React.ComponentType<Props>) {
 }
 
 const Component = WithSellerData(Finance);
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
-
-type FinanceWidgetProps = {
-  walletConnectProjectId: string;
-} & Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
-  CommonWidgetTypes &
-  ConvertionRateProviderProps & {
-    sellerId: string | null | undefined;
-  };
-
-const { infuraKey, magicLinkKey } = CONFIG;
+type FinanceWidgetProps = FinanceWidgetProvidersProps & {
+  sellerId: string | null | undefined;
+};
 
 export function FinanceWidget(props: FinanceWidgetProps) {
-  const parentOrigin = getParentWindowOrigin();
-  const { walletConnectProjectId, sellerId, withExternalSigner } = props;
+  const { sellerId, withExternalSigner } = props;
   return (
-    <ConfigProvider
-      magicLinkKey={magicLinkKey}
-      infuraKey={infuraKey}
-      {...props}
-    >
-      <GlobalStyle />
-      <SignerProvider
-        parentOrigin={parentOrigin}
-        withExternalSigner={withExternalSigner}
-      >
-        <MagicProvider>
-          <WalletConnectionProvider
-            walletConnectProjectId={walletConnectProjectId}
-          >
-            <QueryClientProvider client={queryClient}>
-              <ConvertionRateProvider>
-                <ModalProvider>
-                  {!withExternalSigner && (
-                    <Grid justifyContent="flex-end">
-                      <StyledConnectButton showChangeWallet />
-                    </Grid>
-                  )}
-                  <Component sellerId={sellerId ?? undefined} />
-                </ModalProvider>
-              </ConvertionRateProvider>
-            </QueryClientProvider>
-          </WalletConnectionProvider>
-        </MagicProvider>
-      </SignerProvider>
-    </ConfigProvider>
+    <FinanceWidgetProviders {...props}>
+      {!withExternalSigner && (
+        <Grid justifyContent="flex-end">
+          <StyledConnectButton showChangeWallet />
+        </Grid>
+      )}
+      <Component sellerId={sellerId ?? undefined} />
+    </FinanceWidgetProviders>
   );
 }
-
-export default FinanceWidget;

package/src/components/widgets/finance/FinanceWidgetProviders.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import { CONFIG } from "../../../lib/config/config";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import { Omit } from "utility-types";
+import { CommonWidgetTypes } from "../types";
+import { SignerProvider } from "../../signer/SignerProvider";
+import GlobalStyle from "../../styles/GlobalStyle";
+import {
+  ConfigProvider,
+  ConfigProviderProps
+} from "../../config/ConfigProvider";
+import ConvertionRateProvider, {
+  ConvertionRateProviderProps
+} from "./convertion-rate/ConvertionRateProvider";
+import WalletConnectionProvider, {
+  WalletConnectionProviderProps
+} from "../../wallet/WalletConnectionProvider";
+import ModalProvider from "../../modal/ModalProvider";
+import { MagicProvider } from "../../magicLink/MagicProvider";
+import { getParentWindowOrigin } from "../common";
+
+export type FinanceWidgetProvidersProps = Omit<
+  WalletConnectionProviderProps,
+  "children" | "envName"
+> &
+  Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
+  CommonWidgetTypes &
+  ConvertionRateProviderProps & {
+    children: ReactNode;
+  };
+
+const { infuraKey, magicLinkKey } = CONFIG;
+
+export const FinanceWidgetProviders: React.FC<FinanceWidgetProvidersProps> =
+  withQueryClientProvider(({ children, ...props }) => {
+    const parentOrigin = getParentWindowOrigin();
+    return (
+      <ConfigProvider
+        magicLinkKey={magicLinkKey}
+        infuraKey={infuraKey}
+        {...props}
+      >
+        <GlobalStyle />
+        <SignerProvider
+          parentOrigin={parentOrigin}
+          withExternalSigner={props.withExternalSigner}
+        >
+          <MagicProvider>
+            <WalletConnectionProvider
+              walletConnectProjectId={props.walletConnectProjectId}
+            >
+              <ConvertionRateProvider>
+                <ModalProvider>{children}</ModalProvider>
+              </ConvertionRateProvider>
+            </WalletConnectionProvider>
+          </MagicProvider>
+        </SignerProvider>
+      </ConfigProvider>
+    );
+  });

package/src/components/widgets/redemption/RedemptionWidgetProviders.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
 import { CONFIG } from "../../../lib/config/config";
 import ChatProvider from "../../chat/ChatProvider/ChatProvider";
 import {
@@ -21,6 +20,7 @@ import ConvertionRateProvider, {
 import { CommonWidgetTypes } from "../types";
 import { RedemptionContextProps } from "./provider/RedemptionContext";
 import { RedemptionProvider } from "./provider/RedemptionProvider";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 export type RedemptionWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
@@ -33,32 +33,23 @@ export type RedemptionWidgetProvidersProps = IpfsProviderProps &
     children: ReactNode;
   };
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
 const { infuraKey, magicLinkKey } = CONFIG;
 
-export const RedemptionWidgetProviders: React.FC<
-  RedemptionWidgetProvidersProps
-> = ({ children, ...props }) => {
-  const parentOrigin = getParentWindowOrigin();
-  return (
-    <ConfigProvider
-      magicLinkKey={magicLinkKey}
-      infuraKey={infuraKey}
-      {...props}
-    >
-      <GlobalStyle />
-      <SignerProvider
-        parentOrigin={parentOrigin}
-        withExternalSigner={props.withExternalSigner}
+export const RedemptionWidgetProviders: React.FC<RedemptionWidgetProvidersProps> =
+  withQueryClientProvider(({ children, ...props }) => {
+    const parentOrigin = getParentWindowOrigin();
+    return (
+      <ConfigProvider
+        magicLinkKey={magicLinkKey}
+        infuraKey={infuraKey}
+        {...props}
       >
-        <MagicProvider>
-          <QueryClientProvider client={queryClient}>
+        <GlobalStyle />
+        <SignerProvider
+          parentOrigin={parentOrigin}
+          withExternalSigner={props.withExternalSigner}
+        >
+          <MagicProvider>
             <WalletConnectionProvider
               walletConnectProjectId={props.walletConnectProjectId}
             >
@@ -74,9 +65,8 @@ export const RedemptionWidgetProviders: React.FC<
                 </IpfsProvider>
               </ChatProvider>
             </WalletConnectionProvider>
-          </QueryClientProvider>
-        </MagicProvider>
-      </SignerProvider>
-    </ConfigProvider>
-  );
-};
+          </MagicProvider>
+        </SignerProvider>
+      </ConfigProvider>
+    );
+  });

package/src/hooks/index.ts

@@ -16,3 +16,4 @@ export * from "./contracts/erc721/useErc721Name";
 export * from "./contracts/erc721/useErc721OwnerOf";
 export * from "./contracts/erc1155/useErc1155Name";
 export * from "./contracts/erc1155/useErc1155Uri";
+export * from "./uniswap/useIsWindowVisible";

package/src/hooks/uniswap/useIsWindowVisible.ts

@@ -11,7 +11,7 @@ function isWindowVisible() {
 /**
  * Returns whether the window is currently visible to the user.
  */
-export default function useIsWindowVisible(): boolean {
+export function useIsWindowVisible(): boolean {
   const [focused, setFocused] = useState<boolean>(false);
   const listener = useCallback(() => {
     setFocused(isWindowVisible());

package/src/hooks/useCtaClickHandler.ts

@@ -135,9 +135,14 @@ export function useCtaClickHandler<T>({
         onSuccess?.(receipt as providers.TransactionReceipt, payload);
       }
     } catch (error) {
-      onError?.(error as Error, {
-        txResponse: txResponse as providers.TransactionResponse
-      });
+      onError?.(
+        typeof error === "object"
+          ? (coreSdk.parseError(error as object) as Error)
+          : (error as Error),
+        {
+          txResponse: txResponse as providers.TransactionResponse
+        }
+      );
     } finally {
       setIsLoading(false);
     }

package/src/hooks/useCurrentSellers.ts

@@ -360,7 +360,9 @@ export function useCurrentSellers(
       resultByAddress.data
         ? resultByAddress.data.sellers.map((seller) => seller.id)
         : sellerAddressType === "SELLER_IDS"
-        ? [sellerAddress]
+        ? Array.isArray(sellerAddress)
+          ? sellerAddress
+          : [sellerAddress]
         : []
     ).filter((sellerId) => !!sellerId) as string[];
   }, [resultByAddress.data, sellerAddress, sellerAddressType]);

package/src/hooks/useSignerAddress.tsx

@@ -1,35 +1,26 @@
 import { Web3LibAdapter } from "@bosonprotocol/common";
 
-import { useEffect, useState } from "react";
+import { useQuery } from "react-query";
 
 export function useSignerAddress(web3Lib: Web3LibAdapter | undefined) {
-  const [signerAddress, setSignerAddress] = useState<string | undefined>();
-  const [signerContract, setSignerContract] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (web3Lib?.getSignerAddress) {
-      web3Lib
-        .getSignerAddress()
-        .then((address) => {
-          setSignerAddress(address);
-        })
-        .catch((e) => {
-          console.error(e);
-          setSignerAddress(undefined);
-        });
-      web3Lib
-        .isSignerContract()
-        .then((isSignerContract) => {
-          setSignerContract(isSignerContract);
-        })
-        .catch((e) => {
-          console.error(e);
-          setSignerContract(false);
-        });
+  const { data: signerAddress } = useQuery(
+    ["useSignerAddress-signerAddress", web3Lib?.uuid],
+    () => {
+      return web3Lib?.getSignerAddress();
+    },
+    {
+      enabled: !!web3Lib?.getSignerAddress
     }
-
-    return () => setSignerAddress(undefined);
-  }, [web3Lib]);
+  );
+  const { data: signerContract } = useQuery(
+    ["useSignerAddress-signerContract", web3Lib?.uuid],
+    () => {
+      return web3Lib?.isSignerContract();
+    },
+    {
+      enabled: !!web3Lib?.getSignerAddress
+    }
+  );
 
   return { signerAddress, signerContract };
 }

package/src/index.tsx

@@ -6,6 +6,7 @@ export { default as ThemedButton, IButton } from "./components/ui/ThemedButton";
 export * from "./components/ui/zIndex";
 export * from "./components/ui/buttonSize";
 export * from "./components/buttons/Button";
+export * from "./components/buttons/CommitButtonView";
 export * from "./components/cta/exchange/BatchCompleteButton";
 export * from "./components/cta/exchange/CancelButton";
 export * from "./components/cta/exchange/CompleteButton";
@@ -49,11 +50,13 @@ export * from "./components/magicLink/MagicProvider";
 export * from "./components/magicLink/UserContext";
 export * from "./components/modal/components/common/OfferFullDescription/ExternalOfferFullDescription";
 export * from "./components/modal/components/common/detail/useGetOfferDetailData";
+export * from "./components/modal/components/PurchaseOverview/PurchaseOverview";
 export * from "./components/modal/components/Commit/DetailView/ExternalCommitDetailView";
 export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeDetailView";
 export * from "./components/ui/Grid";
 export * from "./components/ui/GridContainer";
 export * from "./components/ui/Typography";
+export * from "./components/ui/MuteButton";
 export * from "./lib/magicLink/logout";
 export * from "./lib/magicLink/provider";
 export * from "./lib/const/networks";

package/src/lib/const/chainInfo.ts

@@ -62,14 +62,14 @@ const CHAIN_INFO: ChainInfoMap = {
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 }
   },
-  [ChainId.GOERLI]: {
+  [ChainId.SEPOLIA]: {
     networkType: NetworkType.L1,
     docs: "https://docs.uniswap.org/",
-    explorer: "https://goerli.etherscan.io/",
+    explorer: "https://sepolia.etherscan.io/",
     infoLink: "https://info.uniswap.org/#/",
-    label: "Görli",
+    label: "Sepolia",
     logoUrl: ethereumLogoUrl,
-    nativeCurrency: { name: "Görli Ether", symbol: "görETH", decimals: 18 }
+    nativeCurrency: { name: "Sepolia Ether", symbol: "sETH", decimals: 18 }
   },
   [ChainId.POLYGON]: {
     networkType: NetworkType.L1,

package/src/lib/const/chains.ts

@@ -22,8 +22,8 @@ export const CHAIN_IDS_TO_NAMES = {
  */
 export const L1_CHAIN_IDS = [
   ChainId.MAINNET,
-  ChainId.GOERLI,
-  // ChainId.SEPOLIA,
+  // ChainId.GOERLI,
+  ChainId.SEPOLIA,
   ChainId.POLYGON,
   ChainId.POLYGON_MUMBAI
   // LocalChainId

package/src/lib/const/lists.ts

@@ -9,16 +9,16 @@ const BA_LIST =
 // TODO(WEB-2282): Re-enable CMC list once we have a better solution for handling large lists.
 // const CMC_ALL_LIST = 'https://s3.coinmarketcap.com/generated/dex/tokens/eth-tokens-all.json'
 const COINGECKO_LIST = "https://tokens.coingecko.com/uniswap/all.json";
-const COINGECKO_BNB_LIST =
-  "https://tokens.coingecko.com/binance-smart-chain/all.json";
-const COINGECKO_ARBITRUM_LIST =
-  "https://tokens.coingecko.com/arbitrum-one/all.json";
-const COINGECKO_OPTIMISM_LIST =
-  "https://tokens.coingecko.com/optimistic-ethereum/all.json";
-const COINGECKO_CELO_LIST = "https://tokens.coingecko.com/celo/all.json";
+// const COINGECKO_BNB_LIST =
+//   "https://tokens.coingecko.com/binance-smart-chain/all.json";
+// const COINGECKO_ARBITRUM_LIST =
+//   "https://tokens.coingecko.com/arbitrum-one/all.json";
+// const COINGECKO_OPTIMISM_LIST =
+//   "https://tokens.coingecko.com/optimistic-ethereum/all.json";
+// const COINGECKO_CELO_LIST = "https://tokens.coingecko.com/celo/all.json";
 const COINGECKO_POLYGON_LIST =
   "https://tokens.coingecko.com/polygon-pos/all.json";
-const COINGECKO_AVAX_LIST = "https://tokens.coingecko.com/avalanche/all.json";
+// const COINGECKO_AVAX_LIST = "https://tokens.coingecko.com/avalanche/all.json";
 const COMPOUND_LIST =
   "https://raw.githubusercontent.com/compound-finance/token-list/master/compound.tokenlist.json";
 const GEMINI_LIST = "https://www.gemini.com/uniswap/manifest.json";
@@ -49,20 +49,20 @@ export const DEFAULT_INACTIVE_LIST_URLS: string[] = [
   AAVE_LIST,
   //  CMC_ALL_LIST,
   COINGECKO_LIST,
-  COINGECKO_BNB_LIST,
-  COINGECKO_ARBITRUM_LIST,
-  COINGECKO_OPTIMISM_LIST,
-  COINGECKO_CELO_LIST,
+  // COINGECKO_BNB_LIST,
+  // COINGECKO_ARBITRUM_LIST,
+  // COINGECKO_OPTIMISM_LIST,
+  // COINGECKO_CELO_LIST,
   COINGECKO_POLYGON_LIST,
-  COINGECKO_AVAX_LIST,
+  // COINGECKO_AVAX_LIST,
   KLEROS_LIST,
   GEMINI_LIST,
   WRAPPED_LIST,
   SET_LIST,
   ARBITRUM_LIST,
   OPTIMISM_LIST,
-  CELO_LIST,
-  PLASMA_BNB_LIST,
+  // CELO_LIST,
+  // PLASMA_BNB_LIST,
   AVALANCHE_LIST,
   BASE_LIST,
   ...UNSUPPORTED_LIST_URLS

package/src/lib/errors/eth-revert-reason.ts

@@ -45,7 +45,7 @@ async function validateInputPreProvider(txHash: string, network: string) {
   ) {
     throw new Error("Invalid transaction hash");
   }
-  const networks = ["mainnet", "kovan", "goerli", "ropsten", "rinkeby"];
+  const networks = ["mainnet", "sepolia"];
   if (!networks.includes(network)) {
     throw new Error("Not a valid network");
   }

package/src/lib/numbers/numbers.ts

@@ -1,23 +1,17 @@
-import { BigNumber } from "ethers";
+import { utils } from "ethers";
 
 export const getNumberWithoutDecimals = (
   value: string,
   decimals: string
 ): string => {
-  const valueAsNumber = Number(value);
-  if (!Number.isInteger(valueAsNumber)) {
-    return Math.floor(valueAsNumber * 10 ** Number(decimals)).toString();
-  }
-  return BigNumber.from(valueAsNumber + "")
-    .mul(BigNumber.from(10).pow(BigNumber.from(decimals)))
-    .toString();
+  return utils.parseUnits(value, decimals).toString();
 };
 
 export const getNumberWithDecimals = (
   value: string,
   decimals: string
 ): number => {
-  return Number(value) * 10 ** -Number(decimals);
+  return Number(utils.formatUnits(value, decimals));
 };
 
 /**

package/src/lib/opensea/getOpenSeaUrl.ts

@@ -12,9 +12,9 @@ const openSeaUrlMap = new Map([
           `https://testnets.opensea.io/assets/mumbai/${contractAddress}/${tokenId}`
       ],
       [
-        "testing-5-0",
+        "testing-11155111-0",
         (tokenId: string, contractAddress: string) =>
-          `https://testnets.opensea.io/assets/goerli/${contractAddress}/${tokenId}`
+          `https://testnets.opensea.io/assets/sepolia/${contractAddress}/${tokenId}`
       ]
     ])
   ],
@@ -27,9 +27,9 @@ const openSeaUrlMap = new Map([
           `https://testnets.opensea.io/assets/mumbai/${contractAddress}/${tokenId}`
       ],
       [
-        "staging-5-0",
+        "staging-11155111-0",
         (tokenId: string, contractAddress: string) =>
-          `https://testnets.opensea.io/assets/goerli/${contractAddress}/${tokenId}`
+          `https://testnets.opensea.io/assets/sepolia/${contractAddress}/${tokenId}`
       ]
     ])
   ],