@bosonprotocol/react-kit 0.36.0-alpha.9 → 0.36.1-alpha.0

package/src/hooks/contracts/useBlockNumber.tsx

@@ -1,27 +1,5 @@
-import React from "react";
-import { ChainId } from "@uniswap/sdk-core";
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState
-} from "react";
-import { useIsWindowVisible } from "../uniswap/useIsWindowVisible";
-import { RPC_PROVIDERS } from "../../lib/const/providers";
-import { useChainId, useProvider } from "../connection/connection";
-
-const MISSING_PROVIDER = Symbol();
-const BlockNumberContext = createContext<
-  | {
-      fastForward(block: number): void;
-      block?: number;
-      mainnetBlock?: number;
-    }
-  | typeof MISSING_PROVIDER
->(MISSING_PROVIDER);
+import { useContext } from "react";
+import { BlockNumberContext, MISSING_PROVIDER } from "./BlockNumberProvider";
 
 function useBlockNumberContext() {
   const blockNumber = useContext(BlockNumberContext);
@@ -41,106 +19,3 @@ export function useBlockNumber(): number | undefined {
 export function useMainnetBlockNumber(): number | undefined {
   return useBlockNumberContext().mainnetBlock;
 }
-
-export function BlockNumberProvider({ children }: { children: ReactNode }) {
-  const activeChainId = useChainId();
-  const provider = useProvider();
-
-  const [{ chainId, block, mainnetBlock }, setChainBlock] = useState<{
-    chainId?: number;
-    block?: number;
-    mainnetBlock?: number;
-  }>({
-    chainId: activeChainId
-  });
-
-  const onChainBlock = useCallback((chainId: number, block: number) => {
-    setChainBlock((chainBlock) => {
-      if (chainBlock.chainId === chainId) {
-        if (!chainBlock.block || chainBlock.block < block) {
-          return {
-            chainId,
-            block,
-            mainnetBlock:
-              chainId === ChainId.MAINNET ? block : chainBlock.mainnetBlock
-          };
-        }
-      } else if (chainId === ChainId.MAINNET) {
-        if (!chainBlock.mainnetBlock || chainBlock.mainnetBlock < block) {
-          return { ...chainBlock, mainnetBlock: block };
-        }
-      }
-      return chainBlock;
-    });
-  }, []);
-
-  const windowVisible = useIsWindowVisible();
-  useEffect(() => {
-    let stale = false;
-
-    if (provider && activeChainId && windowVisible) {
-      // If chainId hasn't changed, don't clear the block. This prevents re-fetching still valid data.
-      setChainBlock((chainBlock) =>
-        chainBlock.chainId === activeChainId
-          ? chainBlock
-          : { chainId: activeChainId, mainnetBlock: chainBlock.mainnetBlock }
-      );
-
-      provider
-        .getBlockNumber()
-        .then((block) => {
-          if (!stale) onChainBlock(activeChainId, block);
-        })
-        .catch((error) => {
-          console.error(
-            `Failed to get block number for chainId ${activeChainId}`,
-            error
-          );
-        });
-
-      const onBlock = (block: number) => onChainBlock(activeChainId, block);
-      provider.on("block", onBlock);
-      return () => {
-        stale = true;
-        provider.removeListener("block", onBlock);
-      };
-    }
-
-    return void 0;
-  }, [activeChainId, provider, windowVisible, onChainBlock]);
-
-  useEffect(() => {
-    if (mainnetBlock === undefined) {
-      RPC_PROVIDERS[ChainId.MAINNET]
-        .getBlockNumber()
-        .then((block) => {
-          onChainBlock(ChainId.MAINNET, block);
-        })
-        // swallow errors - it's ok if this fails, as we'll try again if we activate mainnet
-        .catch(() => undefined);
-    }
-  }, [mainnetBlock, onChainBlock]);
-
-  const value = useMemo(
-    () => ({
-      fastForward: (update: number) => {
-        if (block && update > block) {
-          setChainBlock({
-            chainId: activeChainId,
-            block: update,
-            mainnetBlock:
-              activeChainId === ChainId.MAINNET ? update : mainnetBlock
-          });
-        }
-      },
-      block: chainId === activeChainId ? block : undefined,
-      mainnetBlock
-    }),
-    [activeChainId, block, chainId, mainnetBlock]
-  );
-  return (
-    <BlockNumberContext.Provider value={value}>
-      {children}
-    </BlockNumberContext.Provider>
-  );
-}

package/src/index.tsx

@@ -82,6 +82,7 @@ export * from "./lib/bundle/const";
 export * from "./lib/bundle/filter";
 export * from "./lib/bytes/bytesToSize";
 export * from "./lib/const/networks";
+export * from "./lib/copy/copyToClipboard";
 export * from "./lib/errors/transactions";
 export * from "./lib/ipfs/ipfs";
 export * from "./lib/magicLink/logout";
@@ -92,6 +93,7 @@ export * from "./lib/opensea/getOpenSeaUrl";
 export * from "./lib/promises/promises";
 export * from "./lib/url/url";
 export * from "./theme";
+export * from "./colors";
 export * from "./types/helpers";
 export { AuthTokenType } from "@bosonprotocol/common";
 export * from "@bosonprotocol/core-sdk";

package/src/lib/chains/getNativeLogoURI.ts

@@ -1,6 +1,7 @@
 import { ChainId } from "@uniswap/sdk-core";
 import EthereumLogo from "../../assets/svg/ethereum_square_logo.svg";
 import MaticLogo from "../../assets/svg/matic-token-icon.svg";
+import { ChainId_POLYGON_AMOY } from "../const/chains";
 
 export function getNativeLogoURI(
   chainId: ChainId | number = ChainId.MAINNET
@@ -8,7 +9,7 @@ export function getNativeLogoURI(
   switch (chainId) {
     case ChainId.POLYGON:
     case ChainId.POLYGON_MUMBAI:
-    case 80002:
+    case ChainId_POLYGON_AMOY:
       return MaticLogo;
     default:
       return EthereumLogo;

package/src/lib/const/chainInfo.ts

@@ -5,7 +5,13 @@ import polygonMaticLogo from "../../assets/svg/polygon-matic-logo.svg";
 import polygonSquareLogoUrl from "../../assets/svg/polygon_square_logo.svg";
 import ms from "ms";
 
-import { LocalChainId, SupportedL1ChainId, SupportedL2ChainId } from "./chains";
+import {
+  LocalChainId,
+  SupportedL1ChainId,
+  SupportedL2ChainId,
+  ChainId_POLYGON_AMOY,
+  ChainId_BASE_SEPOLIA
+} from "./chains";
 
 export const AVERAGE_L1_BLOCK_TIME = ms(`12s`);
 
@@ -99,7 +105,7 @@ const CHAIN_INFO: ChainInfoMap = {
       decimals: 18
     }
   },
-  80002: {
+  [ChainId_POLYGON_AMOY]: {
     networkType: NetworkType.L1,
     blockWaitMsBeforeWarning: ms(`10m`),
     bridge: "https://wallet.polygon.technology/polygon/bridge/deposit",
@@ -130,7 +136,7 @@ const CHAIN_INFO: ChainInfoMap = {
     },
     defaultListUrl: ""
   },
-  84532: {
+  [ChainId_BASE_SEPOLIA]: {
     networkType: NetworkType.L2,
     blockWaitMsBeforeWarning: ms(`10m`),
     bridge: "https://testnets.superbridge.app/base-sepolia",

package/src/lib/const/networks.ts

@@ -1,4 +1,5 @@
 import { ChainId } from "@uniswap/sdk-core";
+import { ChainId_BASE_SEPOLIA, ChainId_POLYGON_AMOY } from "./chains";
 
 // TODO: comment out?
 // const QUICKNODE_BNB_RPC_URL = process.env.REACT_APP_BNB_RPC_URL;
@@ -71,7 +72,7 @@ export const FALLBACK_URLS = {
     "https://rpc-mumbai.maticvigil.com",
     "https://matic-testnet-archive-rpc.bwarelabs.com"
   ],
-  80002: [
+  [ChainId_POLYGON_AMOY]: [
     // "Safe" URLs
     "https://rpc-amoy.polygon.technology"
   ],
@@ -136,7 +137,7 @@ export const FALLBACK_URLS = {
     "https://base-goerli.blastapi.io/b5a802d8-151d-4443-90a7-699108dc4e01",
     "https://svc.blockdaemon.com/base/testnet/native?apiKey=zpka_1334e7c450464d06b6e33a972a7a4e57_75320f43"
   ],
-  84532: [
+  [ChainId_BASE_SEPOLIA]: [
     // "Safe" URLs
     "https://sepolia.base.org"
   ]
@@ -183,10 +184,10 @@ export const getRpcUrls = (infuraKey: string) => ({
     `https://polygon-mumbai.infura.io/v3/${infuraKey}`,
     ...FALLBACK_URLS[ChainId.POLYGON_MUMBAI]
   ],
-  80002: [
+  [ChainId_POLYGON_AMOY]: [
     // AMOY
     `https://polygon-amoy.infura.io/v3/${infuraKey}`,
-    ...FALLBACK_URLS[80002]
+    ...FALLBACK_URLS[ChainId_POLYGON_AMOY]
   ],
   [ChainId.CELO]: FALLBACK_URLS[ChainId.CELO],
   [ChainId.CELO_ALFAJORES]: FALLBACK_URLS[ChainId.CELO_ALFAJORES],
@@ -205,10 +206,10 @@ export const getRpcUrls = (infuraKey: string) => ({
     `https://base-goerli.infura.io/v3/${infuraKey}`,
     ...FALLBACK_URLS[ChainId.BASE_GOERLI]
   ],
-  84532: [
+  [ChainId_BASE_SEPOLIA]: [
     // BASE_SEPOLIA
     `https://base-sepolia.infura.io/v3/${infuraKey}`,
-    ...FALLBACK_URLS[84532]
+    ...FALLBACK_URLS[ChainId_BASE_SEPOLIA]
   ],
   31337: [
     `https://mainnet.infura.io/v3/${infuraKey}`,

package/src/lib/const/providers.ts

@@ -3,10 +3,15 @@ import { deepCopy } from "@ethersproject/properties";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { StaticJsonRpcProvider } from "@ethersproject/providers";
 import { isPlain } from "@reduxjs/toolkit";
-import { ChainId, SupportedChainsType } from "@uniswap/sdk-core";
+import { ChainId } from "@uniswap/sdk-core";
 
 import { AVERAGE_L1_BLOCK_TIME } from "./chainInfo";
-import { CHAIN_IDS_TO_NAMES } from "./chains";
+import {
+  CHAIN_IDS_TO_NAMES,
+  ChainId_BASE_SEPOLIA,
+  ChainId_POLYGON_AMOY,
+  SupportedChainsType
+} from "./chains";
 import { CONFIG } from "../config/config";
 const RPC_URLS = CONFIG.rpcUrls;
 
@@ -81,10 +86,12 @@ export const RPC_PROVIDERS: {
   [ChainId.ARBITRUM_GOERLI]: new AppJsonRpcProvider(ChainId.ARBITRUM_GOERLI),
   [ChainId.POLYGON]: new AppJsonRpcProvider(ChainId.POLYGON),
   [ChainId.POLYGON_MUMBAI]: new AppJsonRpcProvider(ChainId.POLYGON_MUMBAI),
+  [ChainId_POLYGON_AMOY]: new AppJsonRpcProvider(ChainId_POLYGON_AMOY),
   [ChainId.CELO]: new AppJsonRpcProvider(ChainId.CELO),
   [ChainId.CELO_ALFAJORES]: new AppJsonRpcProvider(ChainId.CELO_ALFAJORES),
   [ChainId.BNB]: new AppJsonRpcProvider(ChainId.BNB),
   [ChainId.AVALANCHE]: new AppJsonRpcProvider(ChainId.AVALANCHE),
   [ChainId.BASE]: new AppJsonRpcProvider(ChainId.BASE),
-  [ChainId.BASE_GOERLI]: new AppJsonRpcProvider(ChainId.BASE_GOERLI)
+  [ChainId.BASE_GOERLI]: new AppJsonRpcProvider(ChainId.BASE_GOERLI),
+  [ChainId_BASE_SEPOLIA]: new AppJsonRpcProvider(ChainId_BASE_SEPOLIA)
 };

package/src/lib/const/routing.ts

@@ -42,8 +42,10 @@ import {
   WETH_AVALANCHE,
   WETH_POLYGON,
   WETH_POLYGON_MUMBAI,
-  WRAPPED_NATIVE_CURRENCY
+  WRAPPED_NATIVE_CURRENCY,
+  WETH_POLYGON_AMOY
 } from "./tokens";
+import { ChainId_BASE_SEPOLIA, ChainId_POLYGON_AMOY } from "./chains";
 
 type ChainTokenList = {
   readonly [chainId: number]: Token[];
@@ -111,6 +113,10 @@ export const COMMON_BASES: ChainCurrencyList = {
     nativeOnChain(ChainId.BASE_GOERLI),
     WRAPPED_NATIVE_CURRENCY[ChainId.BASE_GOERLI] as Token
   ],
+  [ChainId_BASE_SEPOLIA]: [
+    nativeOnChain(ChainId_BASE_SEPOLIA),
+    WRAPPED_NATIVE_CURRENCY[ChainId_BASE_SEPOLIA] as Token
+  ],
   [ChainId.POLYGON]: [
     nativeOnChain(ChainId.POLYGON),
     WETH_POLYGON,
@@ -124,6 +130,11 @@ export const COMMON_BASES: ChainCurrencyList = {
     WRAPPED_NATIVE_CURRENCY[ChainId.POLYGON_MUMBAI] as Token,
     WETH_POLYGON_MUMBAI
   ],
+  [ChainId_POLYGON_AMOY]: [
+    nativeOnChain(ChainId_POLYGON_AMOY),
+    WRAPPED_NATIVE_CURRENCY[ChainId_POLYGON_AMOY] as Token,
+    WETH_POLYGON_AMOY
+  ],
 
   [ChainId.CELO]: [
     nativeOnChain(ChainId.CELO),

package/src/lib/const/tokens.ts

@@ -7,6 +7,7 @@ import {
   WETH9
 } from "@uniswap/sdk-core";
 import invariant from "tiny-invariant";
+import { ChainId_BASE_SEPOLIA, ChainId_POLYGON_AMOY } from "./chains";
 
 export const NATIVE_CHAIN_ID = "NATIVE";
 
@@ -193,6 +194,14 @@ export const WETH_POLYGON_MUMBAI = new Token(
   "Wrapped Ether"
 );
 
+export const WETH_POLYGON_AMOY = new Token(
+  ChainId_POLYGON_AMOY,
+  "0x52eF3d68BaB452a294342DC3e5f464d7f610f72E",
+  18,
+  "WETH",
+  "Wrapped Ether"
+);
+
 export const WETH_POLYGON = new Token(
   ChainId.POLYGON,
   "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619",
@@ -376,6 +385,13 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
       "WETH",
       "Wrapped Ether"
     ),
+    [ChainId_BASE_SEPOLIA]: new Token(
+      ChainId_BASE_SEPOLIA,
+      "0x4200000000000000000000000000000000000006",
+      18,
+      "WETH",
+      "Wrapped Ether"
+    ),
     [ChainId.ARBITRUM_ONE]: new Token(
       ChainId.ARBITRUM_ONE,
       "0x82aF49447D8a07e3bd95BD0d56f35241523fBab1",
@@ -411,9 +427,9 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
       "WMATIC",
       "Wrapped MATIC"
     ),
-    80002: new Token(
-      80002,
-      "0x52eF3d68BaB452a294342DC3e5f464d7f610f72E",
+    [ChainId_POLYGON_AMOY]: new Token(
+      ChainId_POLYGON_AMOY,
+      "0x778f1b662a461695633791d03a77d992c24b588a",
       18,
       "WMATIC",
       "Wrapped MATIC"
@@ -465,15 +481,16 @@ function getCeloNativeCurrency(chainId: number) {
   }
 }
 
-type NewType = 80002;
-
 export function isMatic(
   chainId: number
-): chainId is ChainId.POLYGON | ChainId.POLYGON_MUMBAI | NewType {
+): chainId is
+  | ChainId.POLYGON
+  | ChainId.POLYGON_MUMBAI
+  | typeof ChainId_POLYGON_AMOY {
   return (
     chainId === ChainId.POLYGON_MUMBAI ||
     chainId === ChainId.POLYGON ||
-    chainId === 80002
+    chainId === ChainId_POLYGON_AMOY
   );
 }
 

package/src/stories/ConnectWallet.stories.tsx

@@ -20,7 +20,7 @@ import { bosonButtonThemeKeys } from "../components/ui/ThemedButton";
 import { CSSProperties, createGlobalStyle } from "styled-components";
 import { Wallet } from "phosphor-react";
 import { ReduxProvider } from "../components/widgets/ReduxProvider";
-import { BlockNumberProvider } from "../hooks/contracts/useBlockNumber";
+import { BlockNumberProvider } from "../hooks/contracts/BlockNumberProvider";
 
 const successButtonTheme: ConnectWalletProps["connectWalletButtonTheme"] =
   bosonButtonThemes()["primary"];

package/src/stories/buttons/Upload.stories.tsx

@@ -70,7 +70,14 @@ const BASE_ARGS = {
   name,
   placeholder: "",
   withEditor: false,
-  saveButtonTheme: undefined
+  saveButtonTheme: undefined,
+  theme: {
+    triggerTheme: {
+      media: {
+        objectFit: "cover"
+      }
+    }
+  }
 } as const satisfies UploadProps;
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args