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/Menu.tsx

@@ -74,6 +74,7 @@ const Menu: React.FC<NavProps> = ({
   links,
   profile,
   children,
+  inviteUrl,
 }) => {
   const { isXl } = useMatchBreakpoints();
   const isMobile = isXl === false;
@@ -124,7 +125,7 @@ const Menu: React.FC<NavProps> = ({
         />
         {!!login && !!logout && (
           <Flex>
-            <UserBlock account={account} login={login} logout={logout} />
+            <UserBlock account={account} inviteUrl={inviteUrl} login={login} logout={logout} />
             {profile && <Avatar profile={profile} />}
           </Flex>
         )}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import Text from "../../../components/Text/Text";
+import { Modal } from "../../Modal";
+import { CopyToClipboard } from "../../WalletModal";
+
+interface Props {
+  inviteUrl: string;
+  onDismiss?: () => void;
+}
+
+const InviteModal: React.FC<Props> = ({ inviteUrl, onDismiss }) => (
+  <Modal title="Invite" onDismiss={onDismiss}>
+    <CopyToClipboard toCopy={inviteUrl}>
+      <Text fontSize="20px" bold style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        {inviteUrl}
+      </Text>
+    </CopyToClipboard>
+  </Modal>
+);
+
+export default InviteModal;

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

@@ -1,19 +1,34 @@
-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;
+  inviteUrl: string;
   login: Login;
   logout: () => void;
 }
 
-const UserBlock: React.FC<Props> = ({ account, login, logout }) => {
+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;
   return (
     <div>
+      <Button
+        scale="sm"
+        mr={10}
+        onClick={() => {
+          onPresentInviteModal();
+        }}
+      >
+        {t("Invite")}
+      </Button>
       {account ? (
         <Button
           scale="sm"
@@ -31,7 +46,7 @@ const UserBlock: React.FC<Props> = ({ account, login, logout }) => {
             onPresentConnectModal();
           }}
         >
-          Connect
+          {t("Connect")}
         </Button>
       )}
     </div>

packages/pancake-uikit/src/widgets/Menu/types.ts

@@ -58,6 +58,7 @@ export interface PanelProps {
 
 export interface NavProps extends PanelProps {
   account?: string;
+  inviteUrl: string;
   login?: Login;
   profile?: Profile;
   logout?: () => void;

packages/pancake-uikit/src/widgets/WalletModal/index.tsx

@@ -1,4 +1,5 @@
 export { default as useWalletModal } from "./useWalletModal";
 export { connectorLocalStorageKey } from "./config";
+export { default as CopyToClipboard } from "./CopyToClipboard";
 export { ConnectorNames } from "./types";
 export type { Login } from "./types";