thirdweb 5.58.4-nightly-e9ae98084af24199155f997f724c7ea8ff860876-20240923000346 → 5.58.4

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelector.tsx

@@ -1,52 +0,0 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import type { Chain } from "../../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { iconSize } from "../../../../../../core/design-system/index.js";
-import { TokenIcon } from "../../../../components/TokenIcon.js";
-import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
-import { Text } from "../../../../components/text.js";
-import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
-import type { ERC20OrNativeToken } from "../../nativeToken.js";
-
-/**
- * @internal
- */
-export function TokenSelectorButton(props: {
-  token: ERC20OrNativeToken;
-  chain: Chain;
-  onClick: () => void;
-  style?: React.CSSProperties;
-  client: ThirdwebClient;
-}) {
-  return (
-    <Button
-      variant="outline"
-      style={props.style}
-      gap="xxs"
-      onClick={props.onClick}
-    >
-      {props.token ? (
-        <>
-          <Container flex="row" center="y" gap="xs">
-            <TokenIcon
-              token={props.token}
-              chain={props.chain}
-              size="sm"
-              client={props.client}
-            />
-            <TokenSymbol token={props.token} chain={props.chain} size="sm" />
-          </Container>
-          <Container color="secondaryText" flex="row" center="both">
-            <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
-          </Container>
-        </>
-      ) : (
-        <Container flex="row" center="y" gap="xs" color="secondaryText">
-          <Text size="sm"> Select token </Text>
-          <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
-        </Container>
-      )}
-    </Button>
-  );
-}

package/src/react/web/ui/components/CopyAddress.tsx

@@ -1,34 +0,0 @@
-"use client";
-import { spacing } from "../../../core/design-system/index.js";
-import { useClipboard } from "../hooks/useCopyClipboard.js";
-import { IconButton } from "./buttons.js";
-import { Text } from "./text.js";
-
-/**
- * @internal
- */
-export const CopyAddress: React.FC<{
-  addressOrEns: string;
-}> = (props) => {
-  const { hasCopied, onCopy } = useClipboard(props.addressOrEns);
-
-  return (
-    <IconButton
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          onCopy();
-        }
-      }}
-      onClick={onCopy}
-      style={{ padding: `${spacing["4xs"]} ${spacing.xxs}` }}
-    >
-      <Text
-        color={hasCopied ? "primaryText" : "secondaryText"}
-        weight={400}
-        size="sm"
-      >
-        {hasCopied ? "Copied address!" : props.addressOrEns}
-      </Text>
-    </IconButton>
-  );
-};

package/src/react/web/ui/components/DragNDrop.tsx

@@ -1,205 +0,0 @@
-"use client";
-import styled from "@emotion/styled";
-import { UploadIcon } from "@radix-ui/react-icons";
-import { useState } from "react";
-import { isMobile } from "../../../../utils/web/isMobile.js";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import {
-  iconSize,
-  radius,
-  spacing,
-} from "../../../core/design-system/index.js";
-import type { IconFC } from "../ConnectWallet/icons/types.js";
-import { StyledDiv } from "../design-system/elements.js";
-import { Spacer } from "./Spacer.js";
-import { Container } from "./basic.js";
-import { Text } from "./text.js";
-
-/**
- * @internal
- */
-export const DragNDrop: React.FC<{
-  extension: string;
-  accept: string;
-  onUpload: (file: File) => void;
-  locale: {
-    wrongFileError: string;
-    uploadedSuccessfully: string;
-  };
-}> = (props) => {
-  const [error, setError] = useState(false);
-  const [uploaded, setUploaded] = useState<File | undefined>();
-  const [isDragging, setIsDragging] = useState(false);
-
-  const dragIn: React.DragEventHandler<HTMLDivElement> = (e) => {
-    setError(false);
-    setUploaded(undefined);
-    setIsDragging(true);
-
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  const dragOut: React.DragEventHandler<HTMLDivElement> = (e) => {
-    setIsDragging(false);
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  const handleFileUpload = (file: File) => {
-    if (file.type !== props.accept) {
-      setError(true);
-    } else {
-      setUploaded(file);
-      props.onUpload(file);
-    }
-  };
-
-  const drop: React.DragEventHandler<HTMLDivElement> = (e) => {
-    setIsDragging(false);
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      const fileContent = e.dataTransfer.files[0];
-      if (fileContent) {
-        handleFileUpload(fileContent);
-        e.dataTransfer.clearData();
-      }
-    }
-  };
-
-  const message = isMobile()
-    ? "Click to Upload"
-    : "Drop your file here or click to upload";
-
-  return (
-    <div
-      onDragEnter={dragIn}
-      onDragLeave={dragOut}
-      onDragOver={(e) => {
-        setIsDragging(true);
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      onMouseDown={() => {
-        setError(false);
-      }}
-      onDrop={drop}
-      style={{
-        cursor: "pointer",
-      }}
-    >
-      <label htmlFor="file-upload">
-        <input
-          id="file-upload"
-          type="file"
-          accept={props.accept}
-          multiple={false}
-          style={{
-            display: "none",
-          }}
-          onChange={(e) => {
-            if (e.target.files?.[0]) {
-              handleFileUpload(e.target.files[0]);
-            }
-          }}
-        />
-
-        <DropContainer data-error={error} data-is-dragging={isDragging}>
-          {!uploaded ? (
-            <>
-              {" "}
-              <UploadIconSecondary width={iconSize.lg} height={iconSize.lg} />
-              <Spacer y="md" />
-              <Text color="primaryText" weight={600} center multiline>
-                {" "}
-                {message}
-              </Text>
-              <Spacer y="lg" />
-              {error ? (
-                <Text color="danger" size="sm">
-                  {props.locale.wrongFileError}
-                </Text>
-              ) : (
-                <Text size="sm"> {props.extension} </Text>
-              )}
-            </>
-          ) : (
-            <>
-              <Text weight={600} color="primaryText" center multiline>
-                {uploaded.name} {props.locale.uploadedSuccessfully}
-              </Text>
-              <Spacer y="md" />
-              <Container color="success">
-                <CheckCircleIcon size={iconSize.xl} />
-              </Container>
-            </>
-          )}
-        </DropContainer>
-      </label>
-    </div>
-  );
-};
-
-const UploadIconSecondary = /* @__PURE__ */ styled(UploadIcon)(() => {
-  const theme = useCustomTheme();
-  return {
-    color: theme.colors.secondaryIconColor,
-    transition: "transform 200ms ease, color 200ms ease",
-  };
-});
-
-const DropContainer = /* @__PURE__ */ StyledDiv((_) => {
-  const theme = useCustomTheme();
-  return {
-    border: `2px solid ${theme.colors.borderColor}`,
-    borderRadius: radius.md,
-    padding: `${spacing.xl} ${spacing.md}`,
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "column",
-    cursor: "pointer",
-    transition: "border-color 200ms ease",
-
-    "&:hover, &[data-is-dragging='true']": {
-      borderColor: theme.colors.accentText,
-      svg: {
-        color: theme.colors.accentText,
-      },
-    },
-
-    "&[data-error='true']": {
-      borderColor: theme.colors.danger,
-    },
-  };
-});
-
-/**
- * @internal
- */
-const CheckCircleIcon: IconFC = (props) => (
-  <svg
-    width={props.size}
-    height={props.size}
-    viewBox="0 0 38 38"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="presentation"
-  >
-    <path
-      d="M35.6666 17.4671V19.0004C35.6645 22.5945 34.5008 26.0916 32.3488 28.9701C30.1969 31.8487 27.1721 33.9546 23.7255 34.9736C20.279 35.9926 16.5954 35.8703 13.224 34.6247C9.85272 33.3792 6.97434 31.0773 5.01819 28.0622C3.06203 25.0472 2.1329 21.4805 2.36938 17.8943C2.60586 14.308 3.99526 10.8943 6.33039 8.16221C8.66551 5.43012 11.8212 3.52606 15.3269 2.734C18.8326 1.94194 22.5004 2.30432 25.7833 3.76709"
-      stroke="currentColor"
-      strokeWidth="3.33333"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M35.6667 5.66699L19 22.3503L14 17.3503"
-      stroke="currentColor"
-      strokeWidth="3.33333"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);

package/src/react/web/ui/components/formFields.tsx

@@ -1,124 +0,0 @@
-import { Spacer } from "./Spacer.js";
-import { InputButton } from "./buttons.js";
-import { Input, InputContainer, Label } from "./formElements.js";
-import { Text } from "./text.js";
-
-/**
- * @internal
- */
-export const FormFieldWithIconButton: React.FC<{
-  name: string;
-  id: string;
-  autocomplete: string;
-  right: {
-    icon: React.ReactNode;
-    onClick: () => void;
-  };
-  value: string;
-  required?: boolean;
-  type: "text" | "password";
-  onChange: (value: string) => void;
-  label: string;
-  error?: string;
-  noSave?: boolean;
-  dataTest?: string;
-  placeholder?: string;
-  noErrorShift?: boolean;
-}> = (props) => {
-  const errorEl = (
-    <div
-      style={{
-        opacity: props.error ? 1 : 0,
-        transition: "opacity 0.2s ease",
-      }}
-    >
-      <Spacer y="sm" />
-      <Text color="danger" size="sm">
-        {props.error} &nbsp;
-      </Text>
-    </div>
-  );
-
-  return (
-    <div>
-      <Label htmlFor={props.id}>{props.label}</Label>
-      <Spacer y="sm" />
-
-      <InputContainer data-error={!!props.error}>
-        <Input
-          variant="transparent"
-          required={props.required}
-          name={props.name}
-          autoComplete={props.autocomplete}
-          id={props.id}
-          onChange={(e) => props.onChange(e.target.value)}
-          value={props.value}
-          type={props.noSave ? "text" : props.type}
-          style={
-            props.type === "password" && props.noSave
-              ? ({
-                  WebkitTextSecurity: "disc",
-                } as React.CSSProperties)
-              : undefined
-          }
-          data-test={props.dataTest}
-          placeholder={props.placeholder}
-        />
-
-        <InputButton type="button" onClick={props.right.onClick}>
-          {props.right.icon}
-        </InputButton>
-      </InputContainer>
-
-      {props.error && !props.noErrorShift && errorEl}
-      {props.noErrorShift && errorEl}
-    </div>
-  );
-};
-
-/**
- * @internal
- */
-export const FormField: React.FC<{
-  name: string;
-  id: string;
-  autocomplete: string;
-  value: string;
-  required?: boolean;
-  type: "text" | "password";
-  onChange: (value: string) => void;
-  label: string;
-  placeholder?: string;
-  errorMessage?: React.ReactNode;
-  disabled?: boolean;
-}> = (props) => {
-  return (
-    <div>
-      <Label htmlFor={props.id}>{props.label}</Label>
-      <Spacer y="sm" />
-
-      <Input
-        variant="outline"
-        required={props.required}
-        name={props.name}
-        autoComplete={props.autocomplete}
-        id={props.id}
-        onChange={(e) => props.onChange(e.target.value)}
-        value={props.value}
-        type={props.type}
-        data-error={!!props.errorMessage}
-        placeholder={props.placeholder}
-        disabled={props.disabled}
-      />
-
-      {props.errorMessage && (
-        <>
-          <Spacer y="xs" />
-          <Text color="danger" size="sm">
-            {props.errorMessage}
-          </Text>
-        </>
-      )}
-    </div>
-  );
-};

package/src/react/web/ui/design-system/styles.tsx

@@ -1,31 +0,0 @@
-import { radius } from "../../../core/design-system/index.js";
-
-/**
- * @internal
- */
-export const scrollbar = ({
-  track,
-  thumb,
-  hover,
-}: {
-  track: string;
-  hover: string;
-  thumb: string;
-}) => `
-&::-webkit-scrollbar {
-  width: 6px;
-}
-
-&::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 5px ${track};
-  border-radius: ${radius.md};
-}
-
-&::-webkit-scrollbar-thumb {
-  background: ${thumb};
-  border-radius: ${radius.md};
-}
-
-&::-webkit-scrollbar-thumb:hover {
-  background: ${hover};
-}`;

package/src/react/web/wallets/local/LocalWalletConnectUI._tsx

@@ -1,52 +0,0 @@
-import type { ConnectUIProps } from "../../../core/types/wallets.js";
-import { LocalWallet_Persist } from "./persist/LocalWallet_Persist.js";
-import { LocalWallet_NoPersist } from "./LocalWallet_NoPersist._tsx";
-import type { LocalWalletLocale } from "./locale/types.js";
-import type { LocaleId } from "../../ui/types.js";
-import { useEffect, useState } from "react";
-import { useWalletConnectionCtx } from "../../../core/hooks/others/useWalletConnectionCtx.js";
-import { LoadingScreen } from "../shared/LoadingScreen.js";
-import { getLocalWalletLocale } from "./locale/getLocalWalletLocale.js";
-
-/**
- * UI for connecting to a local wallet
- * @internal
- */
-export const LocalWalletConnectUI = (props: {
-  connectUIProps: ConnectUIProps;
-  persist: boolean;
-  prefetchedLocale?: LocalWalletLocale;
-  prefetchedLocaleId?: LocaleId;
-}) => {
-  const { locale: localeId } = useWalletConnectionCtx();
-  const [locale, setLocale] = useState<LocalWalletLocale | undefined>(
-    props.prefetchedLocaleId === localeId ? props.prefetchedLocale : undefined,
-  );
-
-  useEffect(() => {
-    getLocalWalletLocale(localeId).then((_local) => {
-      setLocale(_local);
-    });
-  }, [localeId]);
-
-  if (!props.persist) {
-    return (
-      <LocalWallet_NoPersist
-        persist={props.persist}
-        connectUIProps={props.connectUIProps}
-      />
-    );
-  }
-
-  if (!locale) {
-    return <LoadingScreen />;
-  }
-
-  return (
-    <LocalWallet_Persist
-      locale={locale}
-      persist={props.persist}
-      connectUIProps={props.connectUIProps}
-    />
-  );
-};

package/src/react/web/wallets/local/LocalWallet_NoPersist._tsx

@@ -1,57 +0,0 @@
-import { useEffect } from "react";
-import type { LocalWallet } from "../../../../wallets/local/index._ts";
-import type { ConnectUIProps } from "../../../core/types/wallets.js";
-import { Spinner } from "../../ui/components/Spinner.js";
-import { Container } from "../../ui/components/basic.js";
-import { wait } from "../../../core/utils/wait.js";
-
-/**
- * Generate a random local wallet without saving it on mount and show a spinner while doing so.
- * @internal
- */
-export const LocalWallet_NoPersist: React.FC<{
-  persist: boolean;
-  connectUIProps: ConnectUIProps;
-}> = (props) => {
-  const { done, createInstance, chain } = props.connectUIProps.connection;
-
-  useEffect(() => {
-    let isUnmounted = false;
-
-    async function handleConnect() {
-      const wallet = createInstance() as LocalWallet;
-      await wallet.generate();
-      await wait(1000);
-
-      if (isUnmounted) {
-        return;
-      }
-
-      await wallet.connect({ chain });
-
-      if (isUnmounted) {
-        return;
-      }
-
-      done(wallet);
-    }
-
-    handleConnect();
-    return () => {
-      isUnmounted = true;
-    };
-  }, [done, createInstance, chain]);
-
-  return (
-    <Container
-      flex="row"
-      center="both"
-      fullHeight
-      style={{
-        minHeight: "300px",
-      }}
-    >
-      <Spinner size="xl" color="accentText" />
-    </Container>
-  );
-};

package/src/react/web/wallets/local/localWalletConfig._tsx

@@ -1,80 +0,0 @@
-import {
-  localWallet,
-  localWalletMetadata,
-} from "../../../../wallets/local/index._ts";
-import type { WalletConfig } from "../../../core/types/wallets.js";
-import { asyncLocalStorage } from "../../../core/utils/asyncLocalStorage.js";
-import type { LocaleId } from "../../ui/types.js";
-import { LocalWalletConnectUI } from "./LocalWalletConnectUI.js";
-import { getLocalWalletLocale } from "./locale/getLocalWalletLocale.js";
-import type { LocalWalletLocale } from "./locale/types.js";
-
-export type LocalWalletConfigOptions = {
-  /**
-   * If `true`, the wallet data will be stored on localStorage encrypted with user's password.
-   * Because of this - a password creation step is required to connect the wallet.
-   * When page is reloaded, the user will need to enter their password again to connect.
-   *
-   * If `false`, wallet data will not be stored, and no password will be required to connect.
-   * The wallet will be lost when the user leaves or reloads the page - unless the user manually exports the wallet data.
-   *
-   * By default, it is set to `true`.
-   */
-  persist?: boolean;
-};
-
-/**
- * Integrate Local wallet connection in
- * [`ConnectButton`](https://portal.thirdweb.com/typescript/v5/react/components/ConnectButton)
- * or [`ConnectEmbed`](https://portal.thirdweb.com/typescript/v5/react/components/ConnectEmbed) by configuring it in `wallets` prop.
- * @param options - Options for configuring the Local wallet.
- * Refer to [`LocalWalletConfigOptions`](https://portal.thirdweb.com/references/typescript/v5/LocalWalletConfigOptions) for more details.
- * @example
- * ```tsx
- * import { ConnectButton, localWalletConfig } from "thirdweb/react";
- *
- * function Example() {
- *   return (
- *     <ConnectButton
- *      client={client}
- *      wallets={[localWalletConfig()]}
- *      appMetadata={appMetadata}
- *     />
- *   );
- * }
- * ```
- * @returns `WalletConfig` object which can be added to the `wallets` prop in either `ConnectButton` or `ConnectEmbed` component.
- * @walletConfig
- */
-export const localWalletConfig = (
-  options?: LocalWalletConfigOptions,
-): WalletConfig => {
-  let prefetchedLocale: LocalWalletLocale;
-  let prefetchedLocaleId: LocaleId;
-
-  const config: WalletConfig = {
-    metadata: localWalletMetadata,
-    create(createOptions) {
-      return localWallet({
-        client: createOptions.client,
-        storage: asyncLocalStorage,
-      });
-    },
-    connectUI(props) {
-      return (
-        <LocalWalletConnectUI
-          connectUIProps={props}
-          persist={options?.persist !== undefined ? options.persist : true}
-          prefetchedLocale={prefetchedLocale}
-          prefetchedLocaleId={prefetchedLocaleId}
-        />
-      );
-    },
-    async prefetch(localeId) {
-      prefetchedLocale = await getLocalWalletLocale(localeId);
-      prefetchedLocaleId = localeId;
-    },
-  };
-
-  return config;
-};

package/src/react/web/wallets/local/locale/en.ts

@@ -1,50 +0,0 @@
-import type { LocalWalletLocale } from "./types.js";
-
-const localWalletLocaleEn: LocalWalletLocale = {
-  passwordLabel: "Password",
-  confirmPasswordLabel: "Confirm Password",
-  enterYourPassword: "Enter your password",
-  warningScreen: {
-    title: "Warning",
-    warning:
-      "Your current wallet will be deleted if you create a new wallet. Backup wallet to your device before creating a new wallet",
-    backupWallet: "Backup Wallet",
-    skip: "Skip",
-  },
-  reconnectScreen: {
-    title: "Connect to saved wallet",
-    savedWallet: "Saved Wallet",
-    continue: "Continue",
-    createNewWallet: "Create a new wallet",
-  },
-  createScreen: {
-    instruction:
-      "Choose a password for your wallet. You'll be able to access and export this wallet with the same password",
-    importWallet: "Import Wallet",
-    createNewWallet: "Create new wallet",
-    connecting: "Connecting",
-  },
-  exportScreen: {
-    downloadMessage:
-      "This will download a text file containing the wallet private key onto your device",
-    decryptMessage:
-      "Enter the password of this wallet to decrypt the private key",
-    walletAddress: "Wallet Address",
-    download: "Download",
-    title: "Backup Wallet",
-  },
-  importScreen: {
-    title: "Import Wallet",
-    description1:
-      "The application can authorize any transactions on behalf of the wallet without any approvals",
-    description2: "We recommend only connecting to trusted applications",
-    passwordDescription:
-      "Choose a password to encrypt the private key. Encrypted private key will be stored in browser",
-    import: "Import",
-    uploadJSON: "Please upload a JSON file",
-    uploadedSuccessfully: "Uploaded successfully",
-    invalidPrivateKey: "Invalid Private Key",
-  },
-};
-
-export default localWalletLocaleEn;