thirdweb 5.58.4-nightly-e9ae98084af24199155f997f724c7ea8ff860876-20240923000346 → 5.58.5

package/src/react/web/wallets/local/persist/LocalWallet_Persist._tsx

@@ -1,55 +0,0 @@
-import type { ConnectUIProps } from "../../../../core/types/wallets.js";
-import { Spinner } from "../../../ui/components/Spinner.js";
-import { Container } from "../../../ui/components/basic.js";
-import type { LocalWalletLocale } from "../locale/types.js";
-import { useSavedLocalWalletDataQuery } from "../utils/useSavedLocalWalletDataQuery._ts";
-import { LocalWallet_ConnectToSavedFlow } from "./connectToSaved/LocalWallet_ConnectToSavedFlow._tsx";
-import { LocalWallet_Persist_CreationFlow } from "./create/LocalWallet_Persist_CreationFlow.js";
-
-/**
- * UI to show when localWallet should be persisted
- * @internal
- */
-export function LocalWallet_Persist(props: {
-  persist: boolean;
-  connectUIProps: ConnectUIProps;
-  locale: LocalWalletLocale;
-}) {
-  const savedDataQuery = useSavedLocalWalletDataQuery();
-
-  if (savedDataQuery.isLoading) {
-    return (
-      <Container
-        flex="row"
-        center="both"
-        style={{
-          height: "300px",
-        }}
-      >
-        <Spinner size="xl" color="accentText" />
-      </Container>
-    );
-  }
-
-  // if there is saved data, show UI for connecting to saved wallet
-  if (savedDataQuery.data) {
-    return (
-      <LocalWallet_ConnectToSavedFlow
-        locale={props.locale}
-        persist={props.persist}
-        connectUIProps={props.connectUIProps}
-        savedData={savedDataQuery.data}
-      />
-    );
-  }
-
-  // if no data is saved -> create or import a wallet
-  return (
-    <LocalWallet_Persist_CreationFlow
-      locale={props.locale}
-      persist={props.persist}
-      connectUIProps={props.connectUIProps}
-      onBack={props.connectUIProps.screenConfig.goBack}
-    />
-  );
-}

package/src/react/web/wallets/local/persist/connectToSaved/LocalWallet_ConnectToSaved._tsx

@@ -1,169 +0,0 @@
-import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
-import { useState } from "react";
-import type { LocalWallet } from "../../../../../../wallets/local/index._ts";
-import type { ConnectUIProps } from "../../../../../core/types/wallets.js";
-import { Spacer } from "../../../../ui/components/Spacer.js";
-import { Spinner } from "../../../../ui/components/Spinner.js";
-import {
-  Container,
-  ModalHeader,
-  Line,
-} from "../../../../ui/components/basic.js";
-import { Button } from "../../../../ui/components/buttons.js";
-import { Label } from "../../../../ui/components/formElements.js";
-import { FormFieldWithIconButton } from "../../../../ui/components/formFields.js";
-import { spacing } from "../../../../ui/design-system/index.js";
-import { shortenString } from "../../../../../core/utils/addresses.js";
-import { usePassword } from "../../utils/usePassword.js";
-import type { LocalWalletStorageData } from "../../../../../../wallets/local/types._ts";
-import { Text } from "../../../../ui/components/text.js";
-import type { LocalWalletLocale } from "../../locale/types.js";
-
-/**
- * Connect to saved local wallet
- * - Get a password from the user
- * - Get the saved encrypted private key from local storage
- * - initiate the wallet
- * @internal
- */
-export function LocalWallet_ConnectToSaved(props: {
-  connectUIProps: ConnectUIProps;
-  persist: boolean;
-  savedData: LocalWalletStorageData;
-  onBackupWallet: () => void;
-  locale: LocalWalletLocale;
-}) {
-  const { createInstance, done, chain } = props.connectUIProps.connection;
-  const locale = props.locale;
-
-  // form state
-  const {
-    password,
-    setPassword,
-    showPassword,
-    setShowPassword,
-    isWrongPassword,
-    setIsWrongPassword,
-  } = usePassword();
-
-  const [isConnecting, setIsConnecting] = useState(false);
-
-  const handleConnect = async () => {
-    setIsConnecting(true);
-    const wallet = createInstance() as LocalWallet;
-
-    try {
-      // initialize wallet from saved encrypted private key from local storage
-      await wallet.load({
-        strategy: "privateKey",
-        encryption: {
-          password,
-        },
-      });
-
-      await wallet.connect({ chain });
-      done(wallet);
-    } catch (e) {
-      setIsWrongPassword(true);
-    }
-
-    setIsConnecting(false);
-  };
-
-  return (
-    <Container animate="fadein" flex="column" fullHeight>
-      <Container p="lg">
-        <ModalHeader
-          onBack={props.connectUIProps.screenConfig.goBack}
-          title={props.connectUIProps.walletConfig.metadata.name}
-        />
-      </Container>
-      <Line />
-
-      <Container p="lg" expand>
-        <Text multiline size="lg" color="primaryText">
-          {locale.reconnectScreen.title}
-        </Text>
-
-        <Spacer y="xl" />
-
-        <Label>{locale.reconnectScreen.savedWallet}</Label>
-        <Spacer y="sm" />
-
-        <Text>{shortenString(props.savedData.address)}</Text>
-
-        <Spacer y="xl" />
-
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleConnect();
-          }}
-        >
-          {/* Hidden Account Address as Username */}
-          <input
-            type="text"
-            name="username"
-            autoComplete="off"
-            value={props.savedData.address}
-            disabled
-            style={{ display: "none" }}
-          />
-
-          {/* Password */}
-          <FormFieldWithIconButton
-            required
-            name="current-password"
-            autocomplete="current-password"
-            id="current-password"
-            onChange={(value) => {
-              setPassword(value);
-              setIsWrongPassword(false);
-            }}
-            right={{
-              onClick: () => setShowPassword(!showPassword),
-              icon: showPassword ? <EyeClosedIcon /> : <EyeOpenIcon />,
-            }}
-            label={locale.passwordLabel}
-            type={showPassword ? "text" : "password"}
-            value={password}
-            error={isWrongPassword ? "Wrong Password" : ""}
-            dataTest="current-password"
-            placeholder={locale.enterYourPassword}
-          />
-
-          <Spacer y="md" />
-
-          {/* Connect Button */}
-          <Button
-            variant="accent"
-            type="submit"
-            fullWidth
-            style={{
-              display: "flex",
-              gap: spacing.sm,
-            }}
-          >
-            {locale.reconnectScreen.continue}
-            {isConnecting && <Spinner size="sm" color="accentButtonText" />}
-          </Button>
-        </form>
-      </Container>
-
-      <Spacer y="sm" />
-      <Line />
-      <Container p="lg">
-        <Button
-          variant="link"
-          fullWidth
-          style={{
-            textAlign: "center",
-          }}
-          onClick={props.onBackupWallet}
-        >
-          {locale.reconnectScreen.createNewWallet}
-        </Button>
-      </Container>
-    </Container>
-  );
-}

package/src/react/web/wallets/local/persist/connectToSaved/LocalWallet_ConnectToSavedFlow._tsx

@@ -1,89 +0,0 @@
-import { useState } from "react";
-import type { ConnectUIProps } from "../../../../../core/types/wallets.js";
-import { ExportSavedLocalWallet } from "../ExportSavedLocalWallet._tsx";
-import { OverrideConfirmation } from "./overrideConfirmation.js";
-import type { LocalWalletStorageData } from "../../../../../../wallets/local/types._ts";
-import { LocalWallet_ConnectToSaved } from "./LocalWallet_ConnectToSaved.js";
-import { LocalWallet_Persist_CreationFlow } from "../create/LocalWallet_Persist_CreationFlow.js";
-import type { LocalWalletLocale } from "../../locale/types.js";
-
-/**
- * - Show UI to connect to saved local wallet
- * - shows a "create" option too
- * - clicking on "create" shows OverrideConfirmation and asks user to backup wallet
- * - once backed up, creation flow is shown
- * @internal
- */
-export function LocalWallet_ConnectToSavedFlow(props: {
-  connectUIProps: ConnectUIProps;
-  persist: boolean;
-  savedData: LocalWalletStorageData;
-  locale: LocalWalletLocale;
-}) {
-  const [screen, setScreen] = useState<"main" | "create" | "export" | "backup">(
-    "main",
-  );
-
-  if (screen === "main") {
-    return (
-      <LocalWallet_ConnectToSaved
-        locale={props.locale}
-        connectUIProps={props.connectUIProps}
-        persist={props.persist}
-        savedData={props.savedData}
-        onBackupWallet={() => {
-          setScreen("backup");
-        }}
-      />
-    );
-  }
-
-  if (screen === "export") {
-    return (
-      <ExportSavedLocalWallet
-        locale={props.locale}
-        onBack={() => {
-          setScreen("main");
-        }}
-        onExport={() => {
-          setScreen("create");
-        }}
-        connectUIProps={props.connectUIProps}
-        savedData={props.savedData}
-      />
-    );
-  }
-
-  if (screen === "backup") {
-    return (
-      <OverrideConfirmation
-        locale={props.locale}
-        connectUIProps={props.connectUIProps}
-        onBackup={() => {
-          setScreen("export");
-        }}
-        onBack={() => {
-          setScreen("main");
-        }}
-        onSkip={() => {
-          setScreen("create");
-        }}
-      />
-    );
-  }
-
-  if (screen === "create") {
-    return (
-      <LocalWallet_Persist_CreationFlow
-        locale={props.locale}
-        onBack={() => {
-          setScreen("main");
-        }}
-        persist={props.persist}
-        connectUIProps={props.connectUIProps}
-      />
-    );
-  }
-
-  return null;
-}

package/src/react/web/wallets/local/persist/connectToSaved/overrideConfirmation._tsx

@@ -1,53 +0,0 @@
-import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-import type { ConnectUIProps } from "../../../../../core/types/wallets.js";
-import { Spacer } from "../../../../ui/components/Spacer.js";
-import { Container, ModalHeader } from "../../../../ui/components/basic.js";
-import { Button } from "../../../../ui/components/buttons.js";
-import { iconSize } from "../../../../ui/design-system/index.js";
-import { Text } from "../../../../ui/components/text.js";
-import type { LocalWalletLocale } from "../../locale/types.js";
-
-/**
- * Shows a warning screen when the user tries to create a new local wallet when one is already saved in local storage
- * Prompts the user to backup the wallet before creating a new one
- * @internal
- */
-export const OverrideConfirmation: React.FC<{
-  onBackup: () => void;
-  onSkip: () => void;
-  onBack: () => void;
-  connectUIProps: ConnectUIProps;
-  locale: LocalWalletLocale;
-}> = (props) => {
-  const locale = props.locale.warningScreen;
-  const isCompact = props.connectUIProps.screenConfig.size === "compact";
-  return (
-    <Container fullHeight flex="column" animate="fadein">
-      <Container p="lg">
-        <ModalHeader onBack={props.onBack} title={locale.title} />
-      </Container>
-
-      <Container p={isCompact ? "lg" : "xxl"} expand center="y" flex="column">
-        <Container flex="row" center="x" color="danger">
-          <ExclamationTriangleIcon width={iconSize.xl} height={iconSize.xl} />
-        </Container>
-
-        <Spacer y="xl" />
-
-        <Text multiline center balance>
-          {locale.warning}
-        </Text>
-
-        <Spacer y="lg" />
-
-        <Button variant="accent" fullWidth onClick={props.onBackup}>
-          {locale.backupWallet}
-        </Button>
-        <Spacer y="md" />
-        <Button variant="outline" fullWidth onClick={props.onSkip}>
-          {locale.skip}
-        </Button>
-      </Container>
-    </Container>
-  );
-};

package/src/react/web/wallets/local/persist/create/ImportLocalWallet._tsx

@@ -1,156 +0,0 @@
-import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
-import { useState } from "react";
-import type { LocalWallet } from "../../../../../../wallets/local/index._ts";
-import type { ConnectUIProps } from "../../../../../core/types/wallets.js";
-import { Spacer } from "../../../../ui/components/Spacer.js";
-import {
-  Container,
-  ModalHeader,
-  Line,
-} from "../../../../ui/components/basic.js";
-import { Button } from "../../../../ui/components/buttons.js";
-import {
-  FormField,
-  FormFieldWithIconButton,
-} from "../../../../ui/components/formFields.js";
-import { Text } from "../../../../ui/components/text.js";
-import { usePassword } from "../../utils/usePassword.js";
-import { isValidPrivateKey } from "../../../../../../wallets/local/utils._ts";
-import type { LocalWalletLocale } from "../../locale/types.js";
-/**
- * Show UI to initiate the wallet by entering the private key
- * @internal
- */
-export const ImportLocalWallet: React.FC<{
-  goBack: () => void;
-  persist: boolean;
-  connectUIProps: ConnectUIProps;
-  locale: LocalWalletLocale;
-}> = (props) => {
-  const locale = props.locale;
-  const { createInstance, chain, done } = props.connectUIProps.connection;
-
-  const [privateKeyInput, setPrivateKeyInput] = useState("");
-  const [isValid, setIsValid] = useState(false);
-  const [errorImporting, setErrorImporting] = useState(false);
-
-  const { password, setPassword, showPassword, setShowPassword } =
-    usePassword();
-
-  const importDisabled = !privateKeyInput || !password;
-
-  async function handleImport() {
-    setErrorImporting(false);
-    const localWallet = createInstance() as LocalWallet;
-
-    try {
-      await localWallet.import({
-        privateKey: privateKeyInput,
-        encryption: false,
-      });
-
-      await localWallet.connect({ chain });
-
-      await localWallet.save({
-        strategy: "privateKey",
-        encryption: {
-          password,
-        },
-      });
-
-      done(localWallet);
-    } catch (e) {
-      console.error(e);
-      setErrorImporting(true);
-      return;
-    }
-  }
-
-  return (
-    <Container animate="fadein">
-      <Container p="lg">
-        <ModalHeader onBack={props.goBack} title={locale.importScreen.title} />
-      </Container>
-      <Line />
-
-      <Container p="lg">
-        <Text multiline>{locale.importScreen.description1}</Text>
-        <Spacer y="xs" />
-        <Text multiline>{locale.importScreen.description2}</Text>
-        <Spacer y="xs" />
-        <Text multiline>{locale.importScreen.passwordDescription}</Text>
-        <Spacer y="lg" />
-
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleImport();
-          }}
-        >
-          <FormField
-            type="text"
-            id="private-key"
-            autocomplete="off"
-            label="Private Key"
-            name="private-key"
-            value={privateKeyInput}
-            onChange={(value) => {
-              setPrivateKeyInput(value);
-              setIsValid(isValidPrivateKey(value));
-            }}
-            errorMessage={
-              privateKeyInput && !isValid
-                ? locale.importScreen.invalidPrivateKey
-                : undefined
-            }
-            required
-          />
-
-          <Spacer y="lg" />
-
-          {/* Password */}
-          <FormFieldWithIconButton
-            required
-            noSave={true}
-            name="password"
-            autocomplete="off"
-            id="password"
-            onChange={(value) => {
-              setPassword(value);
-              setErrorImporting(false);
-            }}
-            right={{
-              onClick: () => setShowPassword(!showPassword),
-              icon: showPassword ? <EyeClosedIcon /> : <EyeOpenIcon />,
-            }}
-            label={locale.passwordLabel}
-            type={showPassword ? "text" : "password"}
-            value={password}
-          />
-          <Spacer y="xl" />
-
-          {errorImporting && <Text color="danger">{`Failed to Import`}</Text>}
-
-          <Container
-            flex="row"
-            style={{
-              justifyContent: "flex-end",
-            }}
-          >
-            <Button
-              variant="accent"
-              type="submit"
-              disabled={importDisabled}
-              style={{
-                minWidth: "110px",
-                opacity: importDisabled ? 0.5 : 1,
-              }}
-            >
-              {locale.importScreen.import}
-            </Button>
-          </Container>
-        </form>
-      </Container>
-    </Container>
-  );
-};

package/src/react/web/wallets/local/persist/create/LocalWallet_Persist_Create._tsx

@@ -1,166 +0,0 @@
-import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
-import { useState } from "react";
-import type { ConnectUIProps } from "../../../../../core/types/wallets.js";
-import { Spacer } from "../../../../ui/components/Spacer.js";
-import { Spinner } from "../../../../ui/components/Spinner.js";
-import {
-  Container,
-  ModalHeader,
-  Line,
-} from "../../../../ui/components/basic.js";
-import { Button } from "../../../../ui/components/buttons.js";
-import { FormFieldWithIconButton } from "../../../../ui/components/formFields.js";
-import { spacing } from "../../../../ui/design-system/index.js";
-import { Text } from "../../../../ui/components/text.js";
-import { usePassword } from "../../utils/usePassword.js";
-import type { LocalWallet } from "../../../../../../wallets/local/index._ts";
-import type { LocalWalletLocale } from "../../locale/types.js";
-
-/**
- * - Create random local wallet
- * - Get a password from the user
- * - Encrypt private key with password and save it to local storage
- * @internal
- */
-export const LocalWallet_Persist_Create: React.FC<{
-  connectUIProps: ConnectUIProps;
-  persist: boolean;
-  onBack?: () => void;
-  onShowImportScreen: () => void;
-  locale: LocalWalletLocale;
-}> = (props) => {
-  const locale = props.locale;
-  const [isConnecting, setIsConnecting] = useState(false);
-  const { done, createInstance, chain } = props.connectUIProps.connection;
-
-  // form state
-  const {
-    password,
-    setPassword,
-    showPassword,
-    setShowPassword,
-    confirmPassword,
-    setConfirmPassword,
-    passwordMismatch,
-  } = usePassword();
-
-  async function handleConnect() {
-    setIsConnecting(true);
-
-    const wallet = createInstance() as LocalWallet;
-    await wallet.generate();
-    await wallet.connect({ chain });
-    await wallet.save({
-      strategy: "privateKey",
-      encryption: {
-        password,
-      },
-    });
-
-    setIsConnecting(false);
-    done(wallet);
-  }
-
-  return (
-    <Container fullHeight flex="column" animate="fadein">
-      <Container p="lg">
-        <ModalHeader
-          onBack={props.onBack}
-          title={props.connectUIProps.walletConfig.metadata.name}
-        />
-      </Container>
-
-      <Line />
-      <Container expand p="lg">
-        <Text multiline>{locale.createScreen.instruction}</Text>
-        <Spacer y="lg" />
-
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleConnect();
-          }}
-        >
-          {/* Password */}
-          <FormFieldWithIconButton
-            name="password"
-            required
-            autocomplete="new-password"
-            id="new-password"
-            onChange={(value) => setPassword(value)}
-            right={{
-              icon: showPassword ? <EyeClosedIcon /> : <EyeOpenIcon />,
-              onClick: () => setShowPassword(!showPassword),
-            }}
-            label={locale.passwordLabel}
-            type={showPassword ? "text" : "password"}
-            value={password}
-            dataTest="new-password"
-          />
-
-          <Spacer y="lg" />
-
-          {/* Confirm Password */}
-          <FormFieldWithIconButton
-            name="confirm-password"
-            required
-            autocomplete="new-password"
-            id="confirm-password"
-            onChange={(value) => setConfirmPassword(value)}
-            right={{
-              icon: showPassword ? <EyeClosedIcon /> : <EyeOpenIcon />,
-              onClick: () => setShowPassword(!showPassword),
-            }}
-            label={locale.confirmPasswordLabel}
-            type={showPassword ? "text" : "password"}
-            value={confirmPassword}
-            error={passwordMismatch ? "Passwords don't match" : ""}
-            dataTest="confirm-password"
-            noErrorShift
-          />
-
-          <Spacer y="md" />
-
-          {/* Create */}
-          <Button
-            variant="accent"
-            type="submit"
-            disabled={isConnecting || passwordMismatch}
-            fullWidth
-            style={{
-              gap: spacing.xs,
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-            data-test="create-new-wallet-button"
-          >
-            {isConnecting
-              ? locale.createScreen.connecting
-              : locale.createScreen.createNewWallet}
-            {isConnecting && <Spinner size="sm" color="accentButtonText" />}
-          </Button>
-        </form>
-      </Container>
-
-      <Spacer y="sm" />
-      <Line />
-      <Container p="lg">
-        {/* Import */}
-        <Button
-          fullWidth
-          type="button"
-          variant="link"
-          onClick={props.onShowImportScreen}
-          style={{
-            display: "flex",
-            gap: spacing.sm,
-            alignItems: "center",
-          }}
-        >
-          {locale.createScreen.importWallet}
-        </Button>
-      </Container>
-    </Container>
-  );
-};