From aeb6264b63f853235ca5e7b81dcbc4197ff38af6 Mon Sep 17 00:00:00 2001
From: Quentin Burg <quentin@marigold.dev>
Date: Thu, 4 Apr 2024 16:02:04 +0200
Subject: [PATCH] :recycle: update default value on sidebar

---
 components/Alias.tsx   |  8 ++++++--
 components/Sidebar.tsx | 24 ++++++++++++++++++++++--
 context/aliases.tsx    | 10 ++++------
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/components/Alias.tsx b/components/Alias.tsx
index 2bc05b7..7842ab4 100644
--- 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
index d2111ca..15bb55b 100644
--- 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
index c985e2e..e7029fe 100644
--- 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 (