thirdweb 5.42.0-nightly-e27ebef85bb61342c3de53f85e134cf4a29f787c-20240730000342 → 5.43.0-nightly-75cc5a6434d29dbfe69b6cd6344a7c8426d59fac-20240731000316

package/src/react/core/hooks/wallets/useActiveWalletChain.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns the chain the active wallet is connected to
@@ -13,7 +13,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useActiveWalletChain() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useActiveWalletChain");
   const store = manager.activeWalletChainStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useActiveWalletConnectionStatus.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns the active account's connection status.
@@ -17,7 +17,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useActiveWalletConnectionStatus() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useActiveWalletConnectionStatus");
   const store = manager.activeWalletConnectionStatusStore;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
+import { createWallet } from "../../../../wallets/create-wallet.js";
 import { getUrlToken } from "../../../../wallets/in-app/web/lib/get-url-token.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
@@ -7,7 +8,7 @@ import {
   getStoredActiveWalletId,
   getStoredConnectedWalletIds,
 } from "../../../../wallets/manager/index.js";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 import { setLastAuthProvider } from "../../utils/storage.js";
 import { timeoutPromise } from "../../utils/timeoutPromise.js";
 import type { AutoConnectProps } from "../connection/types.js";
@@ -19,7 +20,7 @@ export function useAutoConnectCore(
   props: AutoConnectProps & { wallets: Wallet[] },
   getInstalledWallets?: () => Wallet[],
 ) {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useAutoConnect");
   const setConnectionStatus = useSetActiveWalletConnectionStatus();
   const { connect } = useConnect({
     client: props.client,
@@ -68,7 +69,8 @@ export function useAutoConnectCore(
     const availableWallets = [...wallets, ...(getInstalledWallets?.() ?? [])];
     const activeWallet =
       lastActiveWalletId &&
-      availableWallets.find((w) => w.id === lastActiveWalletId);
+      (availableWallets.find((w) => w.id === lastActiveWalletId) ||
+        createWallet(lastActiveWalletId));
 
     if (activeWallet) {
       try {

package/src/react/core/hooks/wallets/useConnect.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { ConnectManagerOptions } from "../../../../wallets/manager/index.js";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook to set a wallet as active wallet
@@ -34,7 +34,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useConnect(options?: ConnectManagerOptions) {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useConnect");
   const { connect } = manager;
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState<Error | null>(null);

package/src/react/core/hooks/wallets/useConnectedWallets.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns all connected wallets
@@ -13,7 +13,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useConnectedWallets() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useConnectedWallets");
   const store = manager.connectedWallets;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useDisconnect.ts

@@ -1,4 +1,4 @@
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * Disconnect from given account
@@ -21,7 +21,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @returns An object with a function to disconnect an account
  */
 export function useDisconnect() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useDisconnect");
   const disconnect = manager.disconnectWallet;
   return { disconnect };
 }

package/src/react/core/hooks/wallets/useIsAutoConnecting.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook to check if the auto connect is in progress.
@@ -15,7 +15,7 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useIsAutoConnecting() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useIsAutoConnecting");
   const store = manager.isAutoConnecting;
   return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
 }

package/src/react/core/hooks/wallets/useSetActiveWallet.ts

@@ -1,4 +1,4 @@
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that lets you set the active wallet.
@@ -15,6 +15,6 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useSetActiveWallet() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useSetActiveWallet");
   return manager.setActiveWallet;
 }

package/src/react/core/hooks/wallets/useSetActiveWalletConnectionStatus.ts

@@ -1,4 +1,4 @@
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * A hook that returns the active wallet's connection status.
@@ -15,6 +15,6 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @internal
  */
 export function useSetActiveWalletConnectionStatus() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useSetActiveWalletConnectionStatus");
   return manager.activeWalletConnectionStatusStore.setValue;
 }

package/src/react/core/hooks/wallets/useSwitchActiveWalletChain.ts

@@ -1,4 +1,4 @@
-import { useConnectionManager } from "../../providers/connection-manager.js";
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 
 /**
  * Switch to blockchain with given chain id in the active wallet.
@@ -16,6 +16,6 @@ import { useConnectionManager } from "../../providers/connection-manager.js";
  * @walletConnection
  */
 export function useSwitchActiveWalletChain() {
-  const manager = useConnectionManager();
+  const manager = useConnectionManagerCtx("useSwitchActiveWalletChain");
   return manager.switchActiveWalletChain;
 }

package/src/react/core/providers/connection-manager.tsx

@@ -6,11 +6,24 @@ export const ConnectionManagerCtx = createContext<
 >(undefined);
 
 export function useConnectionManager() {
-  const connectionManager = useContext(ConnectionManagerCtx);
+  const connectionManager = useConnectionManagerCtx("useConnectionManager");
   if (!connectionManager) {
     throw new Error(
-      "useConnectionManager must be used within a ConnectionManager Provider",
+      "useConnectionManager must be used within a <ThirdwebProvider> Provider",
     );
   }
   return connectionManager;
 }
+
+/**
+ * Use this instead of `useConnectionManager` to throw a more specific error message when used outside of a provider.
+ * @internal
+ */
+export function useConnectionManagerCtx(hookname: string) {
+  const manager = useContext(ConnectionManagerCtx);
+  if (!manager) {
+    throw new Error(`${hookname} must be used within <ThirdwebProvider>`);
+  }
+
+  return manager;
+}

package/src/react/web/ui/AutoConnect/AutoConnect.tsx

@@ -9,6 +9,11 @@ import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
  * Note: If you are using `ConnectButton` or `ConnectEmbed` components, You don't need to use this component as it is already included.
  *
  * This is useful if you are manually connecting the wallets using the [`useConnect`](https://portal.thirdweb.com/references/typescript/v5/useConnect) hook and want to auto connect the last connected wallets on page reload or revisit.
+ *
+ * You can also use the [`useAutoConnect`](https://portal.thirdweb.com/references/typescript/v5/useAutoConnect) hook to achieve the same result.
+ *
+ * To check if the wallet in in the process of auto connecting, you can use the [`useIsAutoConnecting`](https://portal.thirdweb.com/references/typescript/v5/useIsAutoConnecting) hook.
+ *
  * @param props - Object of type `AutoConnectProps`. Refer to [`AutoConnectProps`](https://portal.thirdweb.com/references/typescript/v5/AutoConnectProps)
  * @example
  * ```tsx

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -33,18 +33,212 @@ import { SignatureScreen } from "./screens/SignatureScreen.js";
 const TW_CONNECT_WALLET = "tw-connect-wallet";
 
 /**
- * A component that allows the user to connect their wallet.
- * It renders a button which when clicked opens a modal to allow users to connect to wallets specified in `wallets` prop.
+ * A fully featured wallet connection component that allows to:
+ *
+ * - Connect to 350+ external wallets
+ * - Connect with email, phone, passkey or socials
+ * - Convert any wallet to a ERC4337 smart wallet for gasless transactions
+ * - Sign in with ethereum (Auth)
+ *
+ * Once connected, the component allows to:
+ *
+ * - Reolve ENS names and avatars
+ * - Manage multipple connected wallets
+ * - Send and receive native tokens and ERC20 tokens
+ * - View ERC20 tokens and NFTs
+ * - Onramp, bridge and swap tokens
+ * - Switch chains
+ * - Connect to another app with WalletConnect
+ *
  * @example
+ *
+ * ## Default setup
+ *
  * ```tsx
+ * import { createThirdwebClient } from "thirdweb";
+ * import { ConnectButton } from "thirdweb/react";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
  * <ConnectButton
  *    client={client}
  * />
  * ```
+ *
+ * [View all available config options](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps)
+ *
+ * ## Customization options
+ *
+ * ### Customizing wallet options
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    wallets={[
+ *      createWallet("io.metamask"),
+ *      createWallet("com.coinbase.wallet"),
+ *      createWallet("me.rainbow"),
+ *    ]}
+ * />
+ * ```
+ *
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ *
+ * ### Customizing the default chain to connect to
+ *
+ * ```tsx
+ * import { base } from "thirdweb/chains";
+ *
+ * <ConnectButton
+ *   client={client}
+ *   chain={base}
+ * />
+ * ```
+ *
+ * ### Enabling sign in with ethereum (Auth)
+ *
+ * ```tsx
+ * <ConnectButton
+ * client={client}
+ * auth={{
+ *   isLoggedIn: async (address) => {
+ *     console.log("checking if logged in!", { address });
+ *     return await isLoggedIn();
+ *   },
+ *   doLogin: async (params) => {
+ *     console.log("logging in!");
+ *     await login(params);
+ *   },
+ *   getLoginPayload: async ({ address }) =>
+ *     generatePayload({ address }),
+ *   doLogout: async () => {
+ *     console.log("logging out!");
+ *     await logout();
+ *   },
+ * }}
+ * />;
+ * ```
+ *
+ * ### Customizing the theme
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    theme="light"
+ * />
+ * ```
+ *
+ * For more granular control, you can also pass a custom theme object:
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    theme={lightTheme({
+ *      colors: {
+ *        modalBg: "red",
+ *      },
+ *    })}
+ * />
+ * ```
+ *
+ * [View all available themes properties](https://portal.thirdweb.com/references/typescript/v5/Theme)
+ *
+ * ### Changing the display language
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    locale="ja_JP"
+ * />
+ * ```
+ *
+ * [View all available locales](https://portal.thirdweb.com/references/typescript/v5/LocaleId)
+ *
+ * ### Customizing the connect button UI
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    connectButton={{
+ *      label: "Sign in to MyApp",
+ *    }}
+ * />
+ * ```
+ *
+ * ### Customizing the modal UI
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    connectModal={{
+ *      title: "Sign in to MyApp",
+ *      titleIcon: https://example.com/logo.png,
+ *      size: "compact",
+ *    }}
+ * />
+ * ```
+ *
+ * ### Customizing details button UI (after connecting)
+ *
+ * ```tsx
+ * <ConnectButton
+ *    client={client}
+ *    detailsButton={{
+ *      displayBalanceToken: {
+ *        [sepolia.id]: "0x...", // token address to display balance for
+ *        [ethereum.id]: "0x...", // token address to display balance for
+ *      },
+ *    }}
+ * />
+ * ```
+ *
+ * [View all available auth helper functions](https://portal.thirdweb.com/references/typescript/v5/createAuth)
+ *
+ * ### Customizing the Auth sign in button (after connecting, but before authenticating)
+ *
+ * ```tsx
+ * <ConnectButton
+ *   client={client}
+ *   auth={{ ... }}
+ *   signInButton: {
+ *     label: "Authenticate with MyApp",
+ *   },
+ * }}
+ * />;
+ * ```
+ *
+ * ### Customizing supported Tokens and NFTs
+ *
+ * These tokens and NFTs will be shown in the modal when the user clicks "View Assets", as well as the send token screen.
+ *
+ * ```tsx
+ * <ConnectButton
+ *   client={client}
+ *   supportedTokens={{
+ *     [ethereum.id]: [
+ *       {
+ *         address: "0x...",
+ *         name: "MyToken",
+ *         symbol: "MT",
+ *         icon: "https://example.com/icon.png",
+ *       },
+ *     ],
+ *   }}
+ *   supportedNFTs={{
+ *     [ethereum.id]: [
+ *       "0x...", // nft contract address
+ *     ],
+ *   }}
+ * />
+ * ```
+ *
  * @param props
  * Props for the `ConnectButton` component
  *
  * Refer to [ConnectButtonProps](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps) to see the available props.
+ *
+ * @returns A JSX element that renders the <ConnectButton> component.
+ *
  * @component
  */
 export function ConnectButton(props: ConnectButtonProps) {

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -40,21 +40,127 @@ import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
 
 /**
- * A component that allows the user to connect their wallet.
+ * An inline wallet connection component that allows to:
  *
- * it renders the same UI as the [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton) component's modal - but directly on the page instead of being in a modal.
+ * - Connect to 350+ external wallets
+ * - Connect with email, phone, passkey or socials
+ * - Convert any wallet to a ERC4337 smart wallet for gasless transactions
+ * - Sign in with ethereum (Auth)
+ *
+ * It renders the same UI as the [`ConnectButton`](https://portal.thirdweb.com/react/v5/ConnectButton) component's modal - but directly inline in the page instead of being in a modal.
+ *
+ * Once connected, the component does not render any UI. It only renders UI if wallet is not connected.
  *
- * It only renders UI if wallet is not connected
  * @example
+ *
+ * ## Default setup
+ *
  * ```tsx
+ * import { createThirdwebClient } from "thirdweb";
+ * import { ConnectEmbed } from "thirdweb/react";
+ *
+ * const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
+ *
  * <ConnectEmbed
  *    client={client}
  * />
  * ```
+ *
+ * [View all available config options](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps)
+ *
+ *  ## Customization options
+ *
+ * ### Customizing wallet options
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    wallets={[
+ *      createWallet("io.metamask"),
+ *      createWallet("com.coinbase.wallet"),
+ *      createWallet("me.rainbow"),
+ *    ]}
+ * />
+ * ```
+ *
+ * [View all available wallets](https://portal.thirdweb.com/typescript/v5/supported-wallets)
+ *
+ *  ### Customizing the default chain to connect to
+ *
+ * ```tsx
+ * import { base } from "thirdweb/chains";
+ *
+ * <ConnectEmbed
+ *   client={client}
+ *   chain={base}
+ * />
+ * ```
+ *
+ * ### Enabling sign in with ethereum (Auth)
+ *
+ * ```tsx
+ * <ConnectEmbed
+ * client={client}
+ * auth={{
+ *   isLoggedIn: async (address) => {
+ *     console.log("checking if logged in!", { address });
+ *     return await isLoggedIn();
+ *   },
+ *   doLogin: async (params) => {
+ *     console.log("logging in!");
+ *     await login(params);
+ *   },
+ *   getLoginPayload: async ({ address }) =>
+ *     generatePayload({ address }),
+ *   doLogout: async () => {
+ *     console.log("logging out!");
+ *     await logout();
+ *   },
+ * }}
+ * />;
+ * ```
+ *
+ * ### Customizing the theme
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    theme="light"
+ * />
+ * ```
+ *
+ * For more granular control, you can also pass a custom theme object:
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    theme={lightTheme({
+ *      colors: {
+ *        modalBg: "red",
+ *      },
+ *    })}
+ * />
+ * ```
+ *
+ * [View all available themes properties](https://portal.thirdweb.com/references/typescript/v5/Theme)
+ *
+ * ### Changing the display language
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *    client={client}
+ *    locale="ja_JP"
+ * />
+ * ```
+ *
+ * [View all available locales](https://portal.thirdweb.com/references/typescript/v5/LocaleId)
+ *
  * @param props -
  * The props for the `ConnectEmbed` component.
  *
  * Refer to the [`ConnectEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps) type for more details
+ *
+ * @returns A JSX element that renders the <ConnectEmbed> component.
  * @component
  */
 export function ConnectEmbed(props: ConnectEmbedProps) {

package/src/react/web/ui/ConnectWallet/locale/de.ts

@@ -0,0 +1,117 @@
+import type { ConnectLocale } from "./types.js";
+
+const connectLocaleDe: ConnectLocale = {
+  id: "de_DE",
+  signIn: "Anmelden",
+  defaultButtonTitle: "Wallet verbinden",
+  connecting: "Anmelden",
+  switchNetwork: "Netzwerk wechseln",
+  switchingNetwork: "Netzwerk wechseln",
+  defaultModalTitle: "Anmelden",
+  recommended: "Empfohlen",
+  installed: "Installiert",
+  buy: "Kaufen",
+  continueAsGuest: "Als Gast fortfahren",
+  connectAWallet: "Wallet verbinden",
+  newToWallets: `Was ist ein "Wallet"?`,
+  getStarted: "Loslegen",
+  guest: "Gast",
+  send: "Senden",
+  receive: "Empfangen",
+  currentNetwork: "Aktuelles Netzwerk",
+  switchAccount: "Account wechseln",
+  requestTestnetFunds: "Testnetz-Geld anfordern",
+  transactions: "Transaktionen",
+  payTransactions: "Fiat Transaktionen",
+  walletTransactions: "Wallet Transaktionen",
+  viewAllTransactions: "Alle Transaktionen anzeigen",
+  backupWallet: "Wallet sichern",
+  guestWalletWarning:
+    "Dies ist ein temporäres Gast-Wallet. Sichere das Wallet, wenn du den Zugriff darauf nicht verlieren möchtest",
+  switchTo: "Wechsle zu", // Used in "Switch to <Wallet-Name>"
+  connectedToSmartWallet: "Smart Account",
+  confirmInWallet: "Im Wallet bestätigen",
+  disconnectWallet: "Wallet trennen",
+  copyAddress: "Adresse kopieren",
+  personalWallet: "Persönliches Wallet",
+  smartWallet: "Smart Wallet",
+  or: "Oder",
+  goBackButton: "Zurück",
+  welcomeScreen: {
+    defaultTitle: "Dein Tor zur dezentralen Welt",
+    defaultSubtitle: "Verbinde ein Wallet, um loszulegen",
+  },
+  agreement: {
+    prefix: "Durch die Verbindung stimmst du diesen zu:",
+    termsOfService: "Nutzungsbedingungen",
+    and: "&",
+    privacyPolicy: "Datenschutzrichtlinien",
+  },
+  networkSelector: {
+    title: "Netzwerk auswählen",
+    mainnets: "Mainnets",
+    testnets: "Testnets",
+    allNetworks: "Alle",
+    addCustomNetwork: "Eigenes Netzwerk hinzufügen",
+    inputPlaceholder: "Netzwerk oder Chain ID suchen",
+    categoryLabel: {
+      recentlyUsed: "Zuletzt verwendet",
+      popular: "Beliebt",
+      others: "Alle Netzwerke",
+    },
+    loading: "Laden",
+    failedToSwitch: "Netzwerkwechsel fehlgeschlagen",
+  },
+  receiveFundsScreen: {
+    title: "Geld empfangen",
+    instruction:
+      "Kopiere die Wallet-Adresse, um Geld an dieses Wallet zu senden",
+  },
+  sendFundsScreen: {
+    title: "Geld senden",
+    submitButton: "Senden",
+    token: "Token",
+    sendTo: "Senden an",
+    amount: "Betrag",
+    successMessage: "Transaktion erfolgreich",
+    invalidAddress: "Ungültige Adresse",
+    noTokensFound: "Keine Token gefunden",
+    searchToken: "Token suchen oder einfügen",
+    transactionFailed: "Transaktion fehlgeschlagen",
+    transactionRejected: "Transaktion abgelehnt",
+    insufficientFunds: "Nicht genügend Guthaben",
+    selectTokenTitle: "Token auswählen",
+    sending: "Sende",
+  },
+  signatureScreen: {
+    instructionScreen: {
+      title: "Anmelden",
+      instruction: "Signiere die Anmeldeanfrage in deinem Wallet",
+      signInButton: "Anmelden",
+      disconnectWallet: "Wallet trennen",
+    },
+    signingScreen: {
+      title: "Signaturanfrage",
+      prompt: "Signiere die Signaturanfrage in deinem Wallet",
+      promptForSafe:
+        "Signiere die Signaturanfrage in deinem Wallet, um fortzufahren",
+      approveTransactionInSafe: "Transaktion im Safe bestätigen",
+      tryAgain: "Erneut versuchen",
+      failedToSignIn: "Anmeldung fehlgeschlagen",
+      inProgress: "Warte auf Bestätigung",
+    },
+  },
+  manageWallet: {
+    title: "Wallet verwalten",
+    connectAnApp: "App verbinden",
+    exportPrivateKey: "PrivateKey exportieren",
+  },
+  viewFunds: {
+    title: "Guthaben anzeigen",
+    viewNFTs: "NFTs anzeigen",
+    viewTokens: "Tokens anzeigen",
+    viewAssets: "Assets anzeigen",
+  },
+};
+
+export default connectLocaleDe;