Merge pull request #116 from ApeSwapFinance/feat/sid

Display SID domain name
ApeSwapFinance · Nov 14, 2022 · a18d523 · a18d523
2 parents d8227c6 + 82769f1
commit a18d523
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ape.swap/uikit",
-  "version": "1.3.35",
+  "version": "1.3.40",
   "description": "Set of UI components for apeswap projects",
   "main": "dist/index.cjs.js",
   "resolutions": {

diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
@@ -29,6 +29,8 @@ it("renders correctly", () => {
     <BrowserRouter>
       <Navbar
         mailChimpUrl=""
+        uDName="babadrape64.wallet"
+        sidName="bbdrape.bnb"
         account="0xbdda50183d817c3289f895a4472eb475967dc980"
         login={noop}
         logout={noop}
@@ -175,7 +177,7 @@ it("renders correctly", () => {
                 <span
                   class="css-1yc05tr"
                 >
-                  0xbd...c980
+                  babadrape64.wallet
                 </span>
                  
               </button>

diff --git a/src/widgets/Navbar/Navbar.tsx b/src/widgets/Navbar/Navbar.tsx
@@ -90,6 +90,7 @@ const MobileOnlyOverlay = styled(Overlay)`
 `;
 
 const Navbar: React.FC<NavProps> = ({
+  sidName,
   uDName,
   account,
   login,
@@ -259,8 +260,8 @@ const Navbar: React.FC<NavProps> = ({
                 <NetworkButton chainId={chainId} switchNetwork={switchNetwork} t={t} />
               </Flex>
             )}
-            <UserBlock uDName={uDName} account={account} login={login} logout={logout} t={t} />
-            {(uDName || account) && profile && <Avatar profile={profile} />}
+            <UserBlock sidName={sidName} uDName={uDName} account={account} login={login} logout={logout} t={t} />
+            {(uDName || sidName || account) && profile && <Avatar profile={profile} />}
             {isMobile && (
               <MenuButton aria-label="Toggle menu" handleClick={() => setIsPushed(!isPushed)}>
                 {isPushed ? (

diff --git a/src/widgets/Navbar/UserBlock.tsx b/src/widgets/Navbar/UserBlock.tsx
@@ -7,22 +7,23 @@ import { dynamicStyles } from "./styles";
 import { Text } from "../../components/Text";
 
 interface Props {
-  account?: string | undefined;
-  uDName?: string | undefined;
+  account?: string;
+  uDName?: string;
+  sidName?: string;
   login: Login;
   logout: () => void;
   t: (key: string) => string;
 }
 
-const UserBlock: React.FC<Props> = ({ uDName, account, login, logout, t }) => {
-  const { onPresentConnectModal, onPresentAccountModal } = useWalletModal(login, logout, t, account, uDName);
+const UserBlock: React.FC<Props> = ({ sidName, uDName, account, login, logout, t }) => {
+  const { onPresentConnectModal, onPresentAccountModal } = useWalletModal(login, logout, t, account, uDName, sidName);
   const accountEllipsis = account ? `${account.substring(0, 4)}...${account.substring(account.length - 4)}` : null;
   const { isXs } = useMatchBreakpoints();
 
-  const buttonStyle = dynamicStyles.userBlockBtn({ account, uDName });
+  const buttonStyle = dynamicStyles.userBlockBtn({ account, uDName, sidName });
 
   const loadButton = () => {
-    if (uDName || account) {
+    if (uDName || sidName || account) {
       if (isXs) {
         return (
           <Button
@@ -33,9 +34,9 @@ const UserBlock: React.FC<Props> = ({ uDName, account, login, logout, t }) => {
             onClick={() => {
               onPresentAccountModal();
             }}
-            account={uDName || account}
+            account={uDName || sidName || account}
           >
-            <Text weight="normal">{uDName || accountEllipsis}</Text>
+            <Text weight="normal">{uDName || sidName || accountEllipsis}</Text>
           </Button>
         );
       }
@@ -48,9 +49,9 @@ const UserBlock: React.FC<Props> = ({ uDName, account, login, logout, t }) => {
           onClick={() => {
             onPresentAccountModal();
           }}
-          account={uDName || account}
+          account={uDName || sidName || account}
         >
-          <Text weight="normal">{uDName || accountEllipsis}</Text>
+          <Text weight="normal">{uDName || sidName || accountEllipsis}</Text>
         </Button>
       );
     }
@@ -62,7 +63,7 @@ const UserBlock: React.FC<Props> = ({ uDName, account, login, logout, t }) => {
         onClick={() => {
           onPresentConnectModal();
         }}
-        account={uDName || account}
+        account={uDName || sidName || account}
       >
         {t("Connect")}
       </Button>
@@ -73,8 +74,9 @@ const UserBlock: React.FC<Props> = ({ uDName, account, login, logout, t }) => {
 };
 
 UserBlock.defaultProps = {
-  account: "",
-  uDName: "",
+  account: undefined,
+  uDName: undefined,
+  sidName: undefined,
 };
 
 export default UserBlock;
diff --git a/src/widgets/Navbar/index.stories.tsx b/src/widgets/Navbar/index.stories.tsx
@@ -26,8 +26,8 @@ const langs: Language[] = [...Array(20)].map((_, i) => ({ code: `en${i}`, langua
 const translate: (key: string) => string = (key) => key;
 const track: TrackHandler =
   // eslint-disable-next-line no-empty-pattern
-    ({}: TrackProps) =>
-    () => ({});
+  ({}: TrackProps) =>
+  () => ({});
 const mcLink = "";
 
 export const Connected: React.FC = (args: any) => {
@@ -116,6 +116,7 @@ export const NotConnected: React.FC = () => {
     <BrowserRouter>
       <Navbar
         mailChimpUrl={mcLink}
+        sidName={undefined}
         uDName={undefined}
         account={undefined}
         login={noop}
@@ -209,7 +210,8 @@ export const WithNoProfile: React.FC = () => {
     <BrowserRouter>
       <Navbar
         mailChimpUrl={mcLink}
-        uDName="babadrape64.wallet"
+        sidName="bbdrape.bnb"
+        uDName={undefined}
         account="0xbdda50183d817c3289f895a4472eb475967dc980"
         login={noop}
         logout={noop}
@@ -272,6 +274,7 @@ export const WithProfile: React.FC = () => {
     <BrowserRouter>
       <Navbar
         mailChimpUrl={mcLink}
+        sidName="bbdrape.bnb"
         uDName="babadrape64.wallet"
         account="0xbdda50183d817c3289f895a4472eb475967dc980"
         login={noop}

diff --git a/src/widgets/Navbar/styles.ts b/src/widgets/Navbar/styles.ts
@@ -78,17 +78,18 @@ const styles: Record<string, ThemeUIStyleObject> = {
 interface Props {
   account?: string;
   uDName?: string;
+  sidName?: string;
 }
 
 export const dynamicStyles: Record<string, (props: any) => ThemeUIStyleObject> = {
-  userBlockBtn: ({ account, uDName }: Props) => ({
+  userBlockBtn: ({ account, uDName, sidName }: Props) => ({
     height: "35px",
     marginLeft: "10px",
     lineHeight: "10px",
-    background: uDName || account ? "white3" : "yellow",
-    color: uDName || account ? "text" : "primaryBright",
+    background: uDName || sidName || account ? "white3" : "yellow",
+    color: uDName || sidName || account ? "text" : "primaryBright",
     "&&": {
-      padding: `0px ${uDName || account ? "45px" : "15px"} 0px 15px`,
+      padding: `0px ${uDName || sidName || account ? "45px" : "15px"} 0px 15px`,
     },
   }),
 };

diff --git a/src/widgets/Navbar/types.ts b/src/widgets/Navbar/types.ts
@@ -79,5 +79,6 @@ export interface NavProps extends PanelProps {
   profile?: Profile;
   track?: TrackHandler;
   uDName?: string;
+  sidName?: string;
   liveResult?: LiveResultProps["apiResult"] | undefined;
 }
diff --git a/src/widgets/WalletModal/AccountModal.tsx b/src/widgets/WalletModal/AccountModal.tsx
@@ -15,9 +15,10 @@ interface Props {
   logout: () => void;
   t: (key: string) => string;
   uDName?: string;
+  sidName?: string;
 }
 
-const AccountModal: React.FC<Props> = ({ uDName, account, logout, t }) => {
+const AccountModal: React.FC<Props> = ({ sidName, uDName = undefined, account, logout, t }) => {
   const { handleClose } = useContext(ModalContext);
   const { isXs, isSm, isMd } = useMatchBreakpoints();
   const reducedAddress = account ? `${account.substring(0, 15)}...${account.substring(account.length - 4)}` : null;
@@ -30,7 +31,7 @@ const AccountModal: React.FC<Props> = ({ uDName, account, logout, t }) => {
         sx={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}
         mb="8px"
       >
-        {isXs || isSm || isMd ? uDName || reducedAddress : uDName || account}
+        {isXs || isSm || isMd ? uDName || sidName || reducedAddress : uDName || sidName || account}
       </Text>
       <Flex sx={{ alignItems: "center" }} mt="8px" mb="32px">
         <Link
@@ -64,6 +65,7 @@ const AccountModal: React.FC<Props> = ({ uDName, account, logout, t }) => {
 AccountModal.defaultProps = {
   account: undefined,
   uDName: undefined,
+  sidName: undefined,
 };
 
 export default AccountModal;
diff --git a/src/widgets/WalletModal/index.stories.tsx b/src/widgets/WalletModal/index.stories.tsx
@@ -25,7 +25,8 @@ export const Wallet = (args: any) => {
     () => null,
     translate,
     "0xbdda50183d817c3289f895a4472eb475967dc980",
-    "babadrape64.wallet"
+    "",
+    "bbdrape.bnb"
   );
   return (
     <StorybookLayout {...args}>

diff --git a/src/widgets/WalletModal/useWalletModal.tsx b/src/widgets/WalletModal/useWalletModal.tsx
@@ -14,10 +14,13 @@ const useWalletModal = (
   logout: () => void,
   t: (key: string) => string,
   account?: string,
-  uDName?: string
+  uDName?: string,
+  sidName?: string
 ): ReturnType => {
   const [onPresentConnectModal] = useModal(<ConnectModal login={login} t={t} />);
-  const [onPresentAccountModal] = useModal(<AccountModal uDName={uDName} account={account} logout={logout} t={t} />);
+  const [onPresentAccountModal] = useModal(
+    <AccountModal sidName={sidName} uDName={uDName} account={account} logout={logout} t={t} />
+  );
   return { onPresentConnectModal, onPresentAccountModal };
 };