@bosonprotocol/react-kit 0.36.0-alpha.0 → 0.36.0-alpha.10

package/src/lib/config/config.ts

@@ -23,5 +23,11 @@ if (!infuraKey) {
 export const CONFIG = {
   magicLinkKey,
   infuraKey,
-  rpcUrls: getRpcUrls(infuraKey)
+  rpcUrls: getRpcUrls(infuraKey),
+  defaultDisputeResolutionPeriodDays: 15,
+  minimumDisputePeriodInDays: 30,
+  roblox: {
+    getItemDetailsWebsite: ({ itemId }: { itemId: string }) =>
+      `https://www.roblox.com/catalog/${itemId}/`
+  }
 } as const;

package/src/lib/const/chainInfo.ts

@@ -114,6 +114,38 @@ const CHAIN_INFO: ChainInfoMap = {
       decimals: 18
     }
   },
+  [ChainId.BASE]: {
+    networkType: NetworkType.L2,
+    blockWaitMsBeforeWarning: ms(`10m`),
+    bridge: "https://superbridge.app/base",
+    docs: "https://www.base.org",
+    explorer: "https://basescan.org/",
+    infoLink: "https://info.uniswap.org/#/base/",
+    label: "Base",
+    logoUrl: ethereumLogoUrl,
+    nativeCurrency: {
+      name: "Ether",
+      symbol: "ETH",
+      decimals: 18
+    },
+    defaultListUrl: ""
+  },
+  84532: {
+    networkType: NetworkType.L2,
+    blockWaitMsBeforeWarning: ms(`10m`),
+    bridge: "https://testnets.superbridge.app/base-sepolia",
+    docs: "https://www.base.org",
+    explorer: "https://sepolia.basescan.org/",
+    infoLink: "https://info.uniswap.org/#/base-sepolia/",
+    label: "Base Sepolia",
+    logoUrl: ethereumLogoUrl,
+    nativeCurrency: {
+      name: "Ether",
+      symbol: "ETH",
+      decimals: 18
+    },
+    defaultListUrl: ""
+  },
   [LocalChainId]: {
     networkType: NetworkType.L1,
     docs: "https://docs.uniswap.org/",
@@ -162,10 +194,10 @@ export function getChainInfo(
 /**
  * Overloaded method for returning ChainInfo given a chainID
  * Return type varies depending on input type:
- * number | undefined -> returns chaininfo | undefined
- * ChainId -> returns L1ChainInfo | L2ChainInfo
- * SupportedL1ChainId -> returns L1ChainInfo
- * SupportedL2ChainId -> returns L2ChainInfo
+ * number | undefined -\> returns chaininfo | undefined
+ * ChainId -\> returns L1ChainInfo | L2ChainInfo
+ * SupportedL1ChainId -\> returns L1ChainInfo
+ * SupportedL2ChainId -\> returns L2ChainInfo
  */
 export function getChainInfo(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/lib/const/chains.ts

@@ -7,13 +7,14 @@ import { EnvironmentType } from "@bosonprotocol/core-sdk";
 
 export const LocalChainId = 31337;
 export const ChainId_POLYGON_AMOY = 80002;
+export const ChainId_BASE_SEPOLIA = 84532;
 
 export const UniWalletSupportedChains = [
   ChainId.MAINNET,
   // ChainId.ARBITRUM_ONE,
   // ChainId.OPTIMISM,
-  ChainId.POLYGON
-  // ChainId.BASE
+  ChainId.POLYGON,
+  ChainId.BASE
 ];
 
 export const CHAIN_IDS_TO_NAMES = {
@@ -33,6 +34,7 @@ export const CHAIN_IDS_TO_NAMES = {
   [ChainId.AVALANCHE]: "avalanche",
   [ChainId.BASE]: "base",
   [ChainId.BASE_GOERLI]: "base_goerli",
+  [ChainId_BASE_SEPOLIA]: "base_sepolia",
   [LocalChainId]: "local"
 } as const;
 
@@ -53,12 +55,14 @@ export const CHAIN_IDS_TO_FRIENDLY_NAMES = {
   [ChainId.AVALANCHE]: "Avalanche",
   [ChainId.BASE]: "Base",
   [ChainId.BASE_GOERLI]: "Base Goerli",
+  [ChainId_BASE_SEPOLIA]: "Base Sepolia",
   [LocalChainId]: "Local Hardhat"
 } as const;
 
 const SUPPORTED_CHAINS = [
   LocalChainId,
   ChainId_POLYGON_AMOY,
+  ChainId_BASE_SEPOLIA,
   ..._SUPPORTED_CHAINS
 ] as const;
 export declare type SupportedChainsType = (typeof SUPPORTED_CHAINS)[number];
@@ -94,6 +98,7 @@ export const TESTNET_CHAIN_IDS = [
   ChainId.SEPOLIA,
   ChainId.POLYGON_MUMBAI,
   ChainId_POLYGON_AMOY,
+  ChainId_BASE_SEPOLIA,
   LocalChainId
   // ChainId.ARBITRUM_GOERLI,
   // ChainId.OPTIMISM_GOERLI,
@@ -129,7 +134,8 @@ export const L2_CHAIN_IDS = [
   // ChainId.ARBITRUM_GOERLI,
   // ChainId.OPTIMISM,
   // ChainId.OPTIMISM_GOERLI
-  // ChainId.BASE,
+  ChainId.BASE,
+  ChainId_BASE_SEPOLIA
   // ChainId.BASE_GOERLI
 ] as const;
 
@@ -137,8 +143,8 @@ export type SupportedL2ChainId = (typeof L2_CHAIN_IDS)[number];
 
 /**
  * Get the priority of a chainId based on its relevance to the user.
- * @param {ChainId} chainId - The chainId to determine the priority for.
- * @returns {number} The priority of the chainId, the lower the priority, the earlier it should be displayed, with base of MAINNET=0.
+ * @param ChainId - chainId - The chainId to determine the priority for.
+ * @returns number The priority of the chainId, the lower the priority, the earlier it should be displayed, with base of MAINNET=0.
  */
 export function getChainPriority(chainId: number): number {
   switch (chainId) {
@@ -148,7 +154,9 @@ export function getChainPriority(chainId: number): number {
       return 0;
     case ChainId.POLYGON:
     case ChainId.POLYGON_MUMBAI:
-    case 80002:
+    case ChainId_POLYGON_AMOY:
+    case ChainId.BASE:
+    case ChainId_BASE_SEPOLIA:
       return 1;
     // case ChainId.ARBITRUM_ONE:
     // case ChainId.ARBITRUM_GOERLI:

package/src/lib/const/networks.ts

@@ -135,6 +135,10 @@ export const FALLBACK_URLS = {
     /*TODO:QUICKNODE_BASE_GOERLI_RPC_URL,*/
     "https://base-goerli.blastapi.io/b5a802d8-151d-4443-90a7-699108dc4e01",
     "https://svc.blockdaemon.com/base/testnet/native?apiKey=zpka_1334e7c450464d06b6e33a972a7a4e57_75320f43"
+  ],
+  84532: [
+    // "Safe" URLs
+    "https://sepolia.base.org"
   ]
 };
 
@@ -201,6 +205,11 @@ export const getRpcUrls = (infuraKey: string) => ({
     `https://base-goerli.infura.io/v3/${infuraKey}`,
     ...FALLBACK_URLS[ChainId.BASE_GOERLI]
   ],
+  84532: [
+    // BASE_SEPOLIA
+    `https://base-sepolia.infura.io/v3/${infuraKey}`,
+    ...FALLBACK_URLS[84532]
+  ],
   31337: [
     `https://mainnet.infura.io/v3/${infuraKey}`,
     ...FALLBACK_URLS[ChainId.MAINNET]

package/src/lib/const/tokenLogoLookup.ts

@@ -41,4 +41,5 @@ class TokenLogoLookupTable {
   }
 }
 
-export default new TokenLogoLookupTable();
+const tokenLogoLookupTable = new TokenLogoLookupTable();
+export default tokenLogoLookupTable;

package/src/lib/const/tokenSafetyLookup.ts

@@ -63,5 +63,5 @@ class TokenSafetyLookupTable {
     }
   }
 }
-
-export default new TokenSafetyLookupTable();
+const tokenSafetyLookupTable = new TokenSafetyLookupTable();
+export default tokenSafetyLookupTable;

package/src/lib/numbers/numbers.ts

@@ -17,11 +17,11 @@ export const getNumberWithDecimals = (
 /**
  * Given a small number, it returns its string representation without the scientific 'e' notation.
  * For example:
- *      1e-112 => 1e-112 (too small to change)
- *      1e-7   => 0.0000001
- *      0.0001 => 0.0001
- *      9e+99  => 9e+99
- * @param num
+ *      1e-112 =\> 1e-112 (too small to change)
+ *      1e-7   =\> 0.0000001
+ *      0.0001 =\> 0.0001
+ *      9e+99  =\> 9e+99
+ * @param num -
  * @returns
  */
 export const fixformattedString = (num: number): string => {
@@ -43,3 +43,7 @@ export const isNumeric = (strNumber: string) => {
     !isNaN(parseFloat(strNumber))
   ); // ...and ensure strings of whitespace fail
 };
+
+export function remToPx(rem: number, rootFontSize = 16) {
+  return rem * rootFontSize;
+}

package/src/lib/offer/getOfferDetails.ts

@@ -97,7 +97,7 @@ export const getOfferDetails = (
       (productV1ItemMetadataEntity?.shipping || isProductV1(offer)
         ? (offer.metadata as ProductV1Sub).shipping
         : undefined
-      )?.supportedJurisdictions?.map((jurisdiction: any) => ({
+      )?.supportedJurisdictions?.map((jurisdiction) => ({
         name: jurisdiction.label,
         value: jurisdiction.deliveryTime
       })) || []

package/src/lib/offer/getOfferLabel.ts

@@ -1,12 +1,11 @@
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 import { Offer } from "../../types/offer";
 import { getDateTimestamp } from "../dates/getDateTimestamp";
 import { getIsOfferExpired } from "./getIsOfferExpired";
 
-const colors = theme.colors.light;
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.tz.setDefault("Europe/Greenwich");
@@ -16,22 +15,22 @@ export const OFFER_LABEL_TYPES = {
     display: true,
     name: "HOT",
     emoji: "🔥",
-    color: colors.darkGrey,
-    background: colors.lightGrey
+    color: colors.greyDark,
+    background: colors.greyLight
   },
   COMING_SOON: {
     display: true,
     name: "COMING_SOON",
     emoji: "⏱️",
-    color: colors.darkGrey,
-    background: colors.lightGrey
+    color: colors.greyDark,
+    background: colors.greyLight
   },
   EXPIRING_SOON: {
     display: true,
     name: "EXPIRING_SOON",
     emoji: "⏱️",
-    color: colors.darkGrey,
-    background: colors.lightGrey
+    color: colors.greyDark,
+    background: colors.greyLight
   },
   EXPIRED: {
     display: true,

package/src/lib/opensea/getOpenSeaUrl.ts

@@ -15,6 +15,11 @@ const openSeaUrlMap = new Map([
         "testing-11155111-0",
         (tokenId: string, contractAddress: string) =>
           `https://testnets.opensea.io/assets/sepolia/${contractAddress}/${tokenId}`
+      ],
+      [
+        "testing-84532-0",
+        (tokenId: string, contractAddress: string) =>
+          `https://testnets.opensea.io/assets/base_sepolia/${contractAddress}/${tokenId}`
       ]
     ])
   ],
@@ -30,6 +35,11 @@ const openSeaUrlMap = new Map([
         "staging-11155111-0",
         (tokenId: string, contractAddress: string) =>
           `https://testnets.opensea.io/assets/sepolia/${contractAddress}/${tokenId}`
+      ],
+      [
+        "staging-84532-0",
+        (tokenId: string, contractAddress: string) =>
+          `https://testnets.opensea.io/assets/base_sepolia/${contractAddress}/${tokenId}`
       ]
     ])
   ],
@@ -45,6 +55,11 @@ const openSeaUrlMap = new Map([
         "production-1-0",
         (tokenId: string, contractAddress: string) =>
           `https://opensea.io/assets/ethereum/${contractAddress}/${tokenId}`
+      ],
+      [
+        "production-8453-0",
+        (tokenId: string, contractAddress: string) =>
+          `https://opensea.io/assets/base/${contractAddress}/${tokenId}`
       ]
     ])
   ]

package/src/lib/price/prices.ts

@@ -1,7 +1,7 @@
 import { BigNumber, utils } from "ethers";
 import { useCallback } from "react";
-import { Offer } from "../../types/offer";
 import { useConfigContext } from "../../components/config/ConfigContext";
+import { subgraph } from "@bosonprotocol/core-sdk";
 
 interface Options {
   fixed?: number;
@@ -81,11 +81,16 @@ interface CalcPercentage {
   formatted: string;
 }
 const MUL_VALUE = 100_000_000;
+type AllowedKeys = "buyerCancelPenalty" | "sellerDeposit";
+type OfferSubset = Pick<
+  subgraph.OfferFieldsFragment,
+  AllowedKeys | "exchangeToken" | "price"
+>;
 export const getCalcPercentage =
   (displayFloat: ReturnType<typeof useDisplayFloat>) =>
-  (offer: Offer, key: string): CalcPercentage => {
+  (offer: OfferSubset, key: AllowedKeys): CalcPercentage => {
     try {
-      const value = offer?.[key as keyof Offer] || "0";
+      const value = offer?.[key as AllowedKeys] || "0";
       const formatted = BigNumber.from(value).eq(0)
         ? "0"
         : utils.formatUnits(

package/src/lib/roblox/getIsOfferRobloxGated.ts

@@ -0,0 +1,20 @@
+import { subgraph } from "@bosonprotocol/core-sdk";
+import { isProductV1 } from "../offer/filter";
+import { filterRobloxProduct } from "@bosonprotocol/roblox-sdk";
+type GetIsOfferRobloxGatedProps = {
+  offer: subgraph.OfferFieldsFragment;
+};
+
+type RobloxAssetId = string;
+export function getIsOfferRobloxGated({
+  offer
+}: GetIsOfferRobloxGatedProps): RobloxAssetId | false {
+  if (offer.metadata && isProductV1(offer) && offer.condition) {
+    return filterRobloxProduct(
+      offer.metadata,
+      offer.condition,
+      offer.condition?.tokenAddress
+    );
+  }
+  return false;
+}

package/src/lib/signer/externalSigner.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Web3LibAdapter,
   TransactionRequest,