feat: 多语言

packages/pancake-uikit/src/components/ConfigProvider/ConfigProvider.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ConfigProviderProps } from "./types";
+import { ConfigContext } from "./context";
+
+const ConfigProvider: React.FC<ConfigProviderProps> = ({ children, t = (v) => v }) => {
+  return <ConfigContext.Provider value={{ t }}>{children}</ConfigContext.Provider>;
+};
+
+export default ConfigProvider;

packages/pancake-uikit/src/components/ConfigProvider/context.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ConfigProviderProps } from "./types";
+
+export const ConfigContext = React.createContext<ConfigProviderProps>({
+  t: (val) => val,
+});
+
+export default ConfigContext;

packages/pancake-uikit/src/components/ConfigProvider/index.tsx

@@ -0,0 +1,2 @@
+export { default as ConfigProvider } from "./ConfigProvider";
+export type { ConfigProviderProps } from "./types";

packages/pancake-uikit/src/components/ConfigProvider/types.ts

@@ -0,0 +1,9 @@
+import { ReactText } from "react";
+
+type ContextData = {
+  [key: string]: ReactText;
+};
+
+export interface ConfigProviderProps {
+  t: (key: string, data?: ContextData) => string;
+}

packages/pancake-uikit/src/index.ts

@@ -30,6 +30,7 @@ export * from "./components/TabMenu";
 export * from "./components/Tag";
 export * from "./components/Text";
 export * from "./components/Toggle";
+export * from "./components/ConfigProvider";
 
 // Hooks
 export * from "./hooks";

packages/pancake-uikit/src/widgets/Menu/components/UserBlock.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useContext } from "react";
 import Button from "../../../components/Button/Button";
 import { useModal } from "../../Modal";
 import InviteModal from "./InviteModal";
 import { useWalletModal } from "../../WalletModal";
 import { Login } from "../../WalletModal/types";
+import { ConfigContext } from "../../../components/ConfigProvider/context";
 
 interface Props {
   account?: string;
@@ -13,6 +14,7 @@ interface Props {
 }
 
 const UserBlock: React.FC<Props> = ({ account, login, logout, inviteUrl }) => {
+  const { t } = useContext(ConfigContext);
   const { onPresentConnectModal, onPresentAccountModal } = useWalletModal(login, logout, account);
   const [onPresentInviteModal] = useModal(<InviteModal inviteUrl={inviteUrl} />);
   const accountEllipsis = account ? `${account.substring(0, 4)}...${account.substring(account.length - 4)}` : null;
@@ -25,7 +27,7 @@ const UserBlock: React.FC<Props> = ({ account, login, logout, inviteUrl }) => {
           onPresentInviteModal();
         }}
       >
-        Invite
+        {t("Invite")}
       </Button>
       {account ? (
         <Button
@@ -44,7 +46,7 @@ const UserBlock: React.FC<Props> = ({ account, login, logout, inviteUrl }) => {
             onPresentConnectModal();
           }}
         >
-          Connect
+          {t("Connect")}
         </Button>
       )}
     </div>