@bosonprotocol/react-kit 0.36.0-alpha.1 → 0.36.0-alpha.11

package/src/components/modal/components/common/StepsOverview/PurchaseOverview.tsx

@@ -1,114 +0,0 @@
-import React from "react";
-import {
-  CaretRight,
-  CurrencyCircleDollar,
-  Package,
-  ShoppingCart
-} from "phosphor-react";
-import { useBreakpoints } from "../../../../../hooks/useBreakpoints";
-import { Grid } from "../../../../ui/Grid";
-import { Typography } from "../../../../ui/Typography";
-import { LearnMore, ModalBackground } from "../detail/Detail.style";
-import { CommitStep } from "./style";
-import styled from "styled-components";
-import { breakpoint } from "../../../../../lib/ui/breakpoint";
-
-const Wrapper = styled.div`
-  p {
-    text-wrap: pretty;
-  }
-`;
-
-const CommitStepWrapper = styled.div`
-  overflow: hidden;
-  margin: 1rem 0;
-  display: grid;
-  grid-template-columns: 1fr;
-  justify-content: space-between;
-
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  grid-row-gap: 1rem;
-  grid-column-gap: 1rem;
-  ${breakpoint.m} {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  svg {
-    fill: var(--secondary);
-  }
-`;
-
-const COMMIT_STEPS = [
-  {
-    icon: ShoppingCart,
-    header: "Commit to Buy",
-    description:
-      "Commit to buy an offer to receive a Redeemable NFT (rNFT) that can be exchanged for the real-world item it represents"
-  },
-  {
-    icon: CurrencyCircleDollar,
-    header: "Hold, Trade or Transfer ",
-    description:
-      "You can  hold, transfer or easily trade your rNFT on the secondary market"
-  },
-  {
-    icon: Package,
-    header: "Redeem",
-    description:
-      "Redeem your rNFT to receive the underlying item. The rNFT will be destroyed in the process."
-  }
-];
-
-export function PurchaseOverviewInner() {
-  const { isLteXS } = useBreakpoints();
-
-  return (
-    <Wrapper>
-      <ModalBackground>
-        <Grid flexDirection={isLteXS ? "column" : "row"}>
-          <div>
-            <Typography tag="h4" style={{ margin: 0 }}>
-              <b>Backed by Boson's settlement layer</b>
-            </Typography>
-            <Typography tag="p">
-              Boson Protocol's settlement layer secures the commercial exchange
-              of on-chain value for real-world assets. You can be certain that
-              when redeeming you will either receive the physical good or your
-              money back
-            </Typography>
-            <LearnMore
-              href="https://www.bosonprotocol.io/technology/"
-              target="_blank"
-            >
-              <>
-                Learn more
-                <CaretRight size={32} />
-              </>
-            </LearnMore>
-          </div>
-        </Grid>
-      </ModalBackground>
-      <Grid flexDirection="column" alignItems="flex-start">
-        <Grid flexDirection="column" alignItems="flex-start">
-          <Typography tag="h4" style={{ margin: 0 }}>
-            <b>How does the purchase process work?</b>
-          </Typography>
-          <Typography tag="p">
-            When Committing to Buy, the item price will be transferred into
-            escrow and you will receive a redeemable NFT (rNFT) that can be
-            exchanged for the real-world item it represents.
-          </Typography>
-        </Grid>
-      </Grid>
-      <CommitStepWrapper>
-        {COMMIT_STEPS.map(({ icon: Icon, header, description }, key) => (
-          <CommitStep key={`commit_step_${key}`}>
-            <Icon size={24} />
-            <Typography tag="h6">{header}</Typography>
-            <Typography tag="p">{description}</Typography>
-          </CommitStep>
-        ))}
-      </CommitStepWrapper>
-    </Wrapper>
-  );
-}

package/src/components/modal/components/common/StepsOverview/PurchaseOverviewView.tsx

@@ -1,46 +0,0 @@
-import { ArrowLeft } from "phosphor-react";
-import React, { useEffect } from "react";
-import { PurchaseOverviewInner } from "./PurchaseOverview";
-import { useNonModalContext } from "../../../nonModal/NonModal";
-import { theme } from "../../../../../theme";
-import { Grid } from "../../../../ui/Grid";
-import { BosonLogo } from "../BosonLogo";
-
-const colors = theme.colors.light;
-type Props = {
-  onBackClick?: () => void;
-};
-export function PurchaseOverviewView({ onBackClick }: Props) {
-  const dispatch = useNonModalContext();
-  useEffect(() => {
-    dispatch({
-      payload: {
-        headerComponent: (
-          <Grid style={{ flex: "1" }} justifyContent="flex-start" gap="1rem">
-            {onBackClick && (
-              <ArrowLeft
-                onClick={() => {
-                  onBackClick();
-                }}
-                size={32}
-                style={{ cursor: "pointer", minWidth: "32px" }}
-              />
-            )}
-            <BosonLogo
-              gridProps={{ justifyContent: "flex-start" }}
-              svgImageProps={{
-                width: undefined,
-                style: { width: "min-content" }
-              }}
-            />
-          </Grid>
-        ),
-        contentStyle: {
-          background: colors.white
-        },
-        footerComponent: null
-      }
-    });
-  }, [dispatch, onBackClick]);
-  return <PurchaseOverviewInner />;
-}

package/src/components/wallet/ConnectButton.tsx

@@ -1,264 +0,0 @@
-import React, { ReactNode, createContext, useMemo } from "react";
-import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
-import * as Sentry from "@sentry/browser";
-import styled from "styled-components";
-
-import MetamaskLogo from "../../assets/metamask-logo.svg";
-import FallbackAvatar from "../avatar/fallback-avatar";
-import { Button } from "../buttons/Button";
-import ThemedButton, { bosonButtonThemes } from "../ui/ThemedButton";
-import { useBreakpoints } from "../../hooks/useBreakpoints";
-import { saveItemInStorage } from "../../hooks/storage/useBosonLocalStorage";
-import { SignOut, Wallet } from "phosphor-react";
-import { useConfigContext, useIsMagicLoggedIn } from "../../hooks";
-import { useAccount, useChainId } from "../../hooks/connection/connection";
-import { useDisconnect } from "../../hooks/connection/useDisconnect";
-import { MagicLoginButton } from "../magicLink/Login";
-import { SvgImage } from "../ui/SvgImage";
-
-const InnerContext = createContext<{
-  isMagicLoggedIn: boolean | undefined;
-  chainId: number | undefined;
-  globalAccount: string | undefined;
-  disconnect: ReturnType<typeof useDisconnect>;
-}>({
-  isMagicLoggedIn: undefined,
-  chainId: undefined,
-  globalAccount: undefined,
-  disconnect: () => Promise.resolve()
-});
-const InnerProvider = ({ children }: { children: ReactNode }) => {
-  const isMagicLoggedIn = useIsMagicLoggedIn();
-  const chainId = useChainId();
-  const { address: globalAccount } = useAccount();
-  const disconnect = useDisconnect();
-  const value = useMemo(() => {
-    return {
-      isMagicLoggedIn,
-      chainId,
-      globalAccount,
-      disconnect
-    };
-  }, [isMagicLoggedIn, chainId, globalAccount, disconnect]);
-  return (
-    <InnerContext.Provider value={value}>{children}</InnerContext.Provider>
-  );
-};
-
-const StyledMetamaskLogo = styled(SvgImage).attrs({
-  id: "metamask-logo"
-})`
-  height: 15px;
-  width: 16px;
-  &#metamask-logo path {
-    stroke: initial !important;
-  }
-`;
-
-const ENSAvatar = styled.img`
-  height: 20px;
-  width: 20px;
-  border-radius: 100%;
-`;
-
-interface Props {
-  navigationBarPosition?: string;
-  showAddress?: boolean;
-  showChangeWallet?: boolean;
-}
-const iconProps = {
-  size: 32,
-  style: {
-    cursor: "pointer"
-  } as const
-} as const;
-
-export default function ConnectButton({
-  navigationBarPosition = "",
-  showAddress = true,
-  showChangeWallet,
-  ...rest
-}: Props) {
-  const { withMagicLink } = useConfigContext();
-  const { isLteXS, isLteS } = useBreakpoints();
-  const isSideBar = ["left", "right"].includes(navigationBarPosition);
-  const buttonPadding = isSideBar ? "0.75rem 1rem" : "";
-  const justifyContent = isSideBar ? "center" : "";
-  const width = isSideBar ? "100%" : "";
-  const buttonPropsWhenSideBar = {
-    ...(buttonPadding && { padding: buttonPadding }),
-    ...(justifyContent && { justifyContent })
-  };
-  return (
-    <RainbowConnectButton.Custom>
-      {({
-        account,
-        chain,
-        openAccountModal,
-        openChainModal,
-        openConnectModal,
-        mounted
-      }) => {
-        account && Sentry.setTag("wallet_address", account?.address);
-
-        return (
-          <div
-            className="rainbow"
-            style={{ display: "flex", gap: "12px" }}
-            {...rest}
-          >
-            <InnerProvider>
-              <InnerContext.Consumer>
-                {({ isMagicLoggedIn, chainId, globalAccount, disconnect }) => {
-                  return (() => {
-                    if (
-                      !mounted ||
-                      !globalAccount ||
-                      (!chainId && !isMagicLoggedIn)
-                    ) {
-                      // reset the tag o undefined
-                      Sentry.setTag("wallet_address", undefined);
-
-                      return (
-                        <>
-                          {withMagicLink && (
-                            <MagicLoginButton
-                              buttonProps={{
-                                size: isLteXS ? "small" : "regular",
-                                theme: bosonButtonThemes({
-                                  withBosonStyle: false
-                                })["primary"]
-                              }}
-                            />
-                          )}
-                          <Button
-                            onClick={() => {
-                              saveItemInStorage(
-                                "isConnectWalletFromCommit",
-                                false
-                              );
-                              openConnectModal();
-                            }}
-                            size={isLteXS ? "small" : "regular"}
-                            variant="primaryFill"
-                            style={{
-                              whiteSpace: "pre",
-                              ...buttonPropsWhenSideBar,
-                              color: "inherit"
-                            }}
-                          >
-                            Connect Wallet
-                            {!isLteXS && (
-                              <StyledMetamaskLogo src={MetamaskLogo} />
-                            )}
-                          </Button>
-                        </>
-                      );
-                    }
-
-                    if (chain?.unsupported) {
-                      return (
-                        <ThemedButton
-                          onClick={openChainModal}
-                          themeVal="warning"
-                          size={isLteXS ? "small" : "regular"}
-                          style={{
-                            whiteSpace: "pre",
-                            ...buttonPropsWhenSideBar,
-                            color: "inherit"
-                          }}
-                        >
-                          Wrong network
-                        </ThemedButton>
-                      );
-                    }
-                    return (
-                      <div
-                        style={{
-                          display: "flex",
-                          gap: 12,
-                          flexWrap: "wrap",
-                          alignItems: "center",
-                          ...(justifyContent && {
-                            justifyContent
-                          }),
-                          ...(width && { width })
-                        }}
-                      >
-                        {showChangeWallet && !isMagicLoggedIn && (
-                          <Wallet
-                            {...iconProps}
-                            onClick={async () => {
-                              try {
-                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                await (window as any).ethereum?.request({
-                                  method: "wallet_requestPermissions",
-                                  params: [
-                                    {
-                                      eth_accounts: {}
-                                    }
-                                  ]
-                                });
-                              } catch (error) {
-                                console.error(error);
-                              }
-                            }}
-                          />
-                        )}
-                        <ThemedButton
-                          onClick={openAccountModal}
-                          themeVal="outline"
-                          size={isLteXS ? "small" : "regular"}
-                          style={{
-                            whiteSpace: "pre",
-                            ...buttonPropsWhenSideBar,
-                            color: "inherit",
-                            ...(!showAddress && {
-                              borderColor: "transparent"
-                            })
-                          }}
-                        >
-                          {account?.ensAvatar ? (
-                            <ENSAvatar src={account.ensAvatar} />
-                          ) : (
-                            <FallbackAvatar
-                              address={globalAccount ?? account?.address}
-                              size={18}
-                            />
-                          )}
-                          {showAddress && account?.displayName}
-                        </ThemedButton>
-                        {isLteS ? (
-                          <SignOut
-                            {...iconProps}
-                            onClick={() =>
-                              disconnect({
-                                isUserDisconnecting: true
-                              })
-                            }
-                          />
-                        ) : (
-                          <ThemedButton
-                            themeVal="outline"
-                            size={isLteXS ? "small" : "regular"}
-                            onClick={() =>
-                              disconnect({
-                                isUserDisconnecting: true
-                              })
-                            }
-                          >
-                            Disconnect
-                          </ThemedButton>
-                        )}
-                      </div>
-                    );
-                  })();
-                }}
-              </InnerContext.Consumer>
-            </InnerProvider>
-          </div>
-        );
-      }}
-    </RainbowConnectButton.Custom>
-  );
-}

package/src/components/wallet/WalletConnectionProvider.tsx

@@ -1,102 +0,0 @@
-import "@rainbow-me/rainbowkit/styles.css";
-
-import {
-  AvatarComponent,
-  darkTheme,
-  RainbowKitProvider,
-  Theme
-} from "@rainbow-me/rainbowkit";
-import merge from "lodash.merge";
-import React, { ReactNode } from "react";
-import { WagmiConfig } from "wagmi";
-import { theme } from "../../theme";
-import FallbackAvatar from "../avatar/fallback-avatar";
-import { useCSSVariable } from "../styles/useCSSVariable";
-import { useWagmiConfig } from "./wallet-connection";
-import { useConfigContext } from "../config/ConfigContext";
-
-export type WalletConnectionProviderProps = {
-  children: ReactNode;
-  walletConnectProjectId: string;
-};
-const colors = theme.colors.light;
-export default function WalletConnectionProvider({
-  children,
-  walletConnectProjectId
-}: WalletConnectionProviderProps) {
-  const { withExternalConnectionProps } = useConfigContext();
-
-  return withExternalConnectionProps ? (
-    <>{children}</>
-  ) : (
-    <WagmiProvider walletConnectProjectId={walletConnectProjectId}>
-      {children}
-    </WagmiProvider>
-  );
-}
-
-function WagmiProvider({
-  children,
-  walletConnectProjectId
-}: WalletConnectionProviderProps) {
-  const { wagmiConfig, chains } = useWagmiConfig(walletConnectProjectId);
-
-  return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKit chains={chains}>{children}</RainbowKit>
-    </WagmiConfig>
-  );
-}
-
-type RainbowKitProps = {
-  children: ReactNode;
-  chains: Parameters<typeof RainbowKitProvider>[0]["chains"];
-};
-
-function RainbowKit({ children, chains }: RainbowKitProps) {
-  const secondaryColor = useCSSVariable("--secondary");
-  const accentDarkColor = useCSSVariable("--accentDark");
-  const walletConnectionTheme = merge(darkTheme({ borderRadius: "medium" }), {
-    colors: {
-      accentColor: secondaryColor,
-      accentColorForeground: accentDarkColor,
-      closeButtonBackground: colors.navy,
-      actionButtonBorder: colors.navy,
-      profileForeground: colors.navy,
-      modalBackground: colors.navy,
-      modalBorder: colors.navy,
-      modalText: colors.white,
-      modalTextSecondary: colors.lightGrey
-    },
-    shadows: {
-      connectButton: "none"
-    },
-    fonts: {
-      body: "Plus Jakarta Sans, sans-serif"
-    }
-  } as Theme);
-  return (
-    <RainbowKitProvider
-      chains={chains}
-      theme={walletConnectionTheme}
-      avatar={CustomAvatar}
-      appInfo={{ appName: "Boson Widgets" }}
-    >
-      {children}
-    </RainbowKitProvider>
-  );
-}
-
-const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
-  return ensImage ? (
-    <img
-      src={ensImage}
-      alt="Avatar"
-      width={size}
-      height={size}
-      style={{ borderRadius: 999 }}
-    />
-  ) : (
-    <FallbackAvatar address={address} size={50} />
-  );
-};

package/src/components/wallet/wallet-connection.ts

@@ -1,98 +0,0 @@
-import { Chain, connectorsForWallets } from "@rainbow-me/rainbowkit";
-import {
-  metaMaskWallet,
-  walletConnectWallet,
-  coinbaseWallet
-} from "@rainbow-me/rainbowkit/wallets";
-import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
-import { configureChains, createConfig } from "wagmi";
-import * as wagmiChains from "wagmi/chains";
-import { useMemo } from "react";
-import { useConfigContext } from "../config/ConfigContext";
-
-function getChain(
-  chainId: number
-): [(typeof wagmiChains)[keyof typeof wagmiChains]] {
-  const chain = Object.values(wagmiChains).find(
-    (chain) => chain.id === chainId
-  );
-  if (!chain) {
-    if (chainId === 80002) {
-      // Amoy config, from https://github.com/wevm/viem/pull/1787
-      return [
-        {
-          id: 80_002,
-          name: "Polygon Amoy",
-          nativeCurrency: { name: "MATIC", symbol: "MATIC", decimals: 18 },
-          rpcUrls: {
-            default: {
-              http: ["https://rpc-amoy.polygon.technology"]
-            }
-          },
-          blockExplorers: {
-            default: {
-              name: "OK LINK",
-              url: "https://www.oklink.com/amoy"
-            }
-          },
-          testnet: true
-        } as unknown as (typeof wagmiChains)[keyof typeof wagmiChains] // Force casting
-      ];
-    }
-    throw new Error(`Cannot find a chain with id ${chainId} in wagmiChains`);
-  }
-  return [chain];
-}
-
-export function getConnectors(chainId: number, walletConnectProjectId: string) {
-  const { publicClient, chains } = configureChains(getChain(chainId), [
-    jsonRpcProvider({
-      rpc: (chain: Chain) => {
-        return {
-          http: chain.rpcUrls.default.http[0],
-          webSocket: chain.rpcUrls.default.webSocket?.[0]
-        };
-      }
-    })
-  ]);
-
-  const projectId = walletConnectProjectId;
-  const connectors = connectorsForWallets([
-    {
-      groupName: "Popular",
-      wallets: [
-        metaMaskWallet({
-          chains,
-          projectId,
-          shimDisconnect: true,
-          UNSTABLE_shimOnConnectSelectAccount: true
-          // shimDisconnect and UNSTABLE_shimOnConnectSelectAccount options required
-          // to really disconnect metamask if the connected wallet if not the expected one,
-          // and let the user chose another account
-        }),
-        walletConnectWallet({ chains, projectId }),
-        coinbaseWallet({
-          appName: "Boson Widgets",
-          chains
-        })
-      ]
-    }
-  ]);
-  return { connectors, publicClient, chains };
-}
-
-export const useWagmiConfig = (walletConnectProjectId: string) => {
-  const { config } = useConfigContext();
-  return useMemo(() => {
-    const { connectors, publicClient, chains } = getConnectors(
-      config.chainId,
-      walletConnectProjectId
-    );
-    const wagmiConfig = createConfig({
-      autoConnect: true,
-      connectors,
-      publicClient
-    });
-    return { wagmiConfig, chains };
-  }, [config.chainId, walletConnectProjectId]);
-};

package/src/hooks/ethers/useEthersProvider.ts

@@ -1,29 +0,0 @@
-import { providers } from "ethers";
-import * as React from "react";
-import { type HttpTransport } from "viem";
-import { type PublicClient, usePublicClient } from "wagmi";
-
-export function publicClientToProvider(publicClient: PublicClient) {
-  const { chain, transport } = publicClient;
-  const network = {
-    chainId: chain.id,
-    name: chain.name,
-    ensAddress: chain.contracts?.ensRegistry?.address
-  };
-  if (transport.type === "fallback")
-    return new providers.FallbackProvider(
-      (transport.transports as ReturnType<HttpTransport>[]).map(
-        ({ value }) => new providers.JsonRpcProvider(value?.url, network)
-      )
-    );
-  return new providers.JsonRpcProvider(transport.url, network);
-}
-
-/** Hook to convert a viem Public Client to an ethers.js Provider. */
-export function useEthersProvider({ chainId }: { chainId?: number } = {}) {
-  const publicClient = usePublicClient({ chainId });
-  return React.useMemo(
-    () => publicClientToProvider(publicClient),
-    [publicClient]
-  );
-}

package/src/hooks/ethers/useEthersSigner.ts

@@ -1,24 +0,0 @@
-import { providers } from "ethers";
-import * as React from "react";
-import { type WalletClient, useWalletClient } from "wagmi";
-
-export function walletClientToSigner(walletClient: WalletClient) {
-  const { account, chain, transport } = walletClient;
-  const network = {
-    chainId: chain.id,
-    name: chain.name,
-    ensAddress: chain.contracts?.ensRegistry?.address
-  };
-  const provider = new providers.Web3Provider(transport, network);
-  const signer = provider.getSigner(account.address);
-  return signer;
-}
-
-/** Hook to convert a viem Wallet Client to an ethers.js Signer. */
-export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
-  const { data: walletClient } = useWalletClient({ chainId });
-  return React.useMemo(
-    () => (walletClient ? walletClientToSigner(walletClient) : undefined),
-    [walletClient]
-  );
-}