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>
-  );
-};