♻️ update default value on sidebar

marigold-dev · Apr 9, 2024 · c37e080 · c37e080
1 parent d094dff
commit c37e080
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/components/Alias.tsx b/components/Alias.tsx
@@ -7,18 +7,22 @@ const Alias = ({
   className,
   disabled = false,
   length = 5,
+  defaultAlias = `${address.substring(0, length)}...${address.substring(
+    address.length - length
+  )}`,
 }: {
   address: string;
   className?: string;
   length?: number;
   disabled?: boolean;
+  defaultAlias?: string;
 }) => {
   const [alias, setAlias] = useState<string | undefined>(undefined);
   const aliasesCtx = useAliases();
 
   useEffect(() => {
-    aliasesCtx.getAlias(address, length).then(setAlias);
-  }, [address, aliasesCtx, length]);
+    aliasesCtx.getAlias(address, defaultAlias).then(setAlias);
+  }, [address, aliasesCtx]);
 
   return (
     <Copy value={address} text="Copy address" disabled={disabled}>

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -29,6 +29,7 @@ import useIsOwner from "../utils/useIsOwner";
 import { signers, toStorage } from "../versioned/apis";
 import { hasTzip27Support } from "../versioned/util";
 import Alias from "./Alias";
+import Copy from "./Copy";
 import Tooltip from "./Tooltip";
 
 type selectItemProps = {
@@ -40,6 +41,8 @@ type selectItemProps = {
   disableCopy?: boolean;
 };
 
+const LENGTH = 5;
+
 const linkClass = (isActive: boolean, isDisabled: boolean = false) =>
   `${
     // There's a bug with opacity, so I set manually text color
@@ -65,10 +68,27 @@ const SelectedItem = ({
   return (
     <div className="w-4/5 overflow-hidden text-left">
       <div className="flex items-center justify-between">
-        <p className="text-xl text-white">{name}</p>
+        <Alias
+          address={address ?? ""}
+          disabled={true}
+          className="text-xl text-white"
+          defaultAlias=""
+        />
         <p>{threshold}</p>
       </div>
-      <Alias address={address ?? ""} disabled={disableCopy} />
+      <div className="mt-1 text-sm text-zinc-400">
+        {address && (
+          <Copy
+            value={address ?? ""}
+            text="Copy address"
+            disabled={disableCopy}
+          >
+            {`${address.substring(0, LENGTH)}...${address.substring(
+              address.length - LENGTH
+            )}`}
+          </Copy>
+        )}
+      </div>
       <div className="mt-2 flex items-center justify-between">
         <Tooltip text={formattedBalance.toString() + " Tez"}>
           <p className="text-lg">{formattedBalance.toFixed(2)} Tez</p>

diff --git a/context/aliases.tsx b/context/aliases.tsx
@@ -3,11 +3,11 @@ import { createContext } from "react";
 import { TZKT_API_URL } from "./config";
 
 type AliasesContextType = {
-  getAlias(address: string, length: number): Promise<string>;
+  getAlias(address: string, defaultAlias: string): Promise<string>;
 }; // Map address with his alias. Alias can be from TZKT or Tzsafe or address by default
 
 export const AliasesContext = createContext<AliasesContextType>({
-  getAlias: (address: string) => Promise.resolve(address),
+  getAlias: (address: string, defaultAlias: string) => Promise.resolve(address),
 });
 
 export const AliasesProvider = ({
@@ -42,13 +42,11 @@ export const AliasesProvider = ({
     return alias;
   };
 
-  const getAlias = async (address: string, length: number = 5) => {
+  const getAlias = async (address: string, defaultAlias: string) => {
     const alias = await getTzktAlias(address);
     if (alias) return alias;
     if (aliasesFromState[address]) return aliasesFromState[address];
-    return `${address.substring(0, length)}...${address.substring(
-      address.length - length
-    )}`;
+    return defaultAlias;
   };
 
   return (