react: remove react-i18n dependency

Author: alecananian

.changeset/famous-glasses-sleep.md

@@ -2,4 +2,4 @@
 "@treasure-dev/tdk-react": minor
 ---
 
-Removed `tailwind-merge` dependency for ~70Kb savings in gzipped package
+Removed `tailwind-merge` dependency for ~7Kb savings in gzipped package

.changeset/kind-mails-agree.md

@@ -0,0 +1,5 @@
+---
+"@treasure-dev/tdk-react": minor
+---
+
+Removed `react-i18n` dependency for ~20Kb savings in gzipped package

packages/react/.storybook/preview.tsx

@@ -3,7 +3,7 @@ import type { Preview } from "@storybook/react";
 import React from "react";
 import { ThirdwebProvider } from "thirdweb/react";
 
-import { TreasureProvider } from "../src/contexts/treasure";
+import { TreasureProvider } from "../src/providers/treasure";
 
 import "../src/globals.css";
 

packages/react/package.json

@@ -47,10 +47,7 @@
     "@treasure-dev/launcher": "workspace:*",
     "class-variance-authority": "catalog:",
     "clsx": "catalog:",
-    "i18next": "catalog:",
-    "i18next-browser-languagedetector": "catalog:",
-    "input-otp": "catalog:",
-    "react-i18next": "catalog:"
+    "input-otp": "catalog:"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "catalog:",

packages/react/src/components/ui/Dialog.tsx

@@ -3,7 +3,8 @@ import {
   getContractAddress,
   getContractAddresses,
 } from "@treasure-dev/tdk-core";
-import { useTreasure } from "../contexts/treasure";
+
+import { useTreasure } from "../providers/treasure";
 
 export const useContractAddress = ({
   chainId,

packages/react/src/hooks/useContractAddress.ts

@@ -2,11 +2,11 @@ import "./globals.css";
 
 export type * from "@treasure-dev/tdk-core";
 
-export { ConnectButton } from "./components/connect/ConnectButton";
-export { ConnectModal } from "./components/connect/ConnectModal";
-export { Button } from "./components/ui/Button";
-export { TreasureProvider, useTreasure } from "./contexts/treasure";
-export { useConnect } from "./hooks/useConnect";
+export { ConnectButton } from "./ui/ConnectButton/ConnectButton";
+export { ConnectModal } from "./ui/ConnectModal/ConnectModal";
+export { Button } from "./ui/components/Button";
+export { TreasureProvider, useTreasure } from "./providers/treasure";
+export { useConnect } from "./ui/hooks/useConnect";
 export {
   useContractAddress,
   useContractAddresses,

packages/react/src/i18n.ts

@@ -26,7 +26,6 @@ import {
   useMemo,
   useState,
 } from "react";
-import { I18nextProvider } from "react-i18next";
 import { ZERO_ADDRESS, defineChain } from "thirdweb";
 import {
   useActiveWallet,
@@ -39,9 +38,8 @@ import {
 import { isZkSyncChain } from "thirdweb/utils";
 import { type Wallet, ecosystemWallet } from "thirdweb/wallets";
 
-import { useLauncher } from "../hooks/useLauncher";
-import { i18n } from "../i18n";
 import type { AnalyticsEvent, Config, ContextValues } from "../types";
+import { useLauncher } from "../ui/hooks/useLauncher";
 import {
   EVT_TREASURECONNECT_CONNECTED,
   EVT_TREASURECONNECT_DISCONNECTED,
@@ -68,8 +66,9 @@ export const useTreasure = () => {
 
 type Props = PropsWithChildren<Config>;
 
-const TreasureProviderInner = ({
+export const TreasureProvider = ({
   children,
+  language,
   appName,
   appIconUri,
   apiUri = DEFAULT_TDK_API_BASE_URI,
@@ -360,6 +359,7 @@ const TreasureProviderInner = ({
   return (
     <Context.Provider
       value={{
+        language,
         appName,
         appIconUri,
         chain,
@@ -409,17 +409,3 @@ const TreasureProviderInner = ({
     </Context.Provider>
   );
 };
-
-export const TreasureProvider = (props: Props) => {
-  useEffect(() => {
-    if (props.language) {
-      i18n.changeLanguage(props.language);
-    }
-  }, [props.language]);
-
-  return (
-    <I18nextProvider i18n={i18n}>
-      <TreasureProviderInner {...props} />
-    </I18nextProvider>
-  );
-};

packages/react/src/index.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+
+const translation = {
+  connect: {
+    action: "Connect",
+    header: ({ appName }: { appName: ReactNode }) => <>Connect to {appName}</>,
+    footer: ({ thirdweb }: { thirdweb: ReactNode }) => (
+      <>Powered by {thirdweb}</>
+    ),
+    option: {
+      email: "Email address",
+      or: "or",
+      apple: "Apple",
+      discord: "Discord",
+      google: "Google",
+      passkey: "Passkey",
+      wallet: "Wallet",
+      x: "X",
+    },
+    verify: {
+      header: "Verify code",
+      description: ({ recipient }: { recipient: ReactNode }) => (
+        <>
+          We have sent a verification code to {recipient}. You will be
+          automatically logged in after entering your code.
+        </>
+      ),
+      inputLabel: "Enter verification code:",
+      action: "Confirm",
+      resend: {
+        prompt: "Didn't get a code?",
+        action: "Resend",
+        countdown: ({ seconds }: { seconds: number }) =>
+          `Resend available in ${seconds}s...`,
+      },
+    },
+    migrate: {
+      header: "Migrate existing account",
+      description:
+        "It looks like you have several existing Treasure profiles. Please choose one you would like to use moving forward as your identity across the Treasure ecosystem.",
+      approve: "Use this account",
+      reject: "Start fresh",
+      disclaimer: "NOTE: This is irreversible, so please choose carefully.",
+    },
+  },
+};
+
+export type Translation = typeof translation;
+
+export default translation;

packages/react/src/contexts/treasure.tsx renamed to packages/react/src/providers/treasure.tsx

@@ -0,0 +1,46 @@
+import type { Translation } from "./en";
+
+const translation: Translation = {
+  connect: {
+    action: "Conectar",
+    header: ({ appName }) => <>Conectarse a {appName}</>,
+    footer: ({ thirdweb }) => <>Con tecnología de {thirdweb}</>,
+    option: {
+      email: "Correo electrónico",
+      or: "o",
+      apple: "Apple",
+      discord: "Discord",
+      google: "Google",
+      passkey: "Clave de paso",
+      wallet: "Cartera",
+      x: "X",
+    },
+    verify: {
+      header: "Verificar código",
+      description: ({ recipient }) => (
+        <>
+          Se envió un código de verificación a {recipient}. Iniciará sesión
+          automáticamente después de ingresar su código.
+        </>
+      ),
+      inputLabel: "Ingresar código de verificación:",
+      action: "Confirmar",
+      resend: {
+        prompt: "¿No recibió un código?",
+        action: "Reenviar",
+        countdown: ({ seconds }: { seconds: number }) =>
+          `Reenvío disponsible en ${seconds}s...`,
+      },
+    },
+    migrate: {
+      header: "Migrate existing account",
+      description:
+        "It looks like you have several existing Treasure profiles. Please choose one you would like to use moving forward as your identity across the Treasure ecosystem.",
+      approve: "Use this account",
+      reject: "Start fresh",
+      disclaimer: "NOTE: This is irreversible, so please choose carefully.",
+    },
+  },
+};
+
+export default translation;