♻️ use Aliases context to setup the right alias

marigold-dev · Apr 4, 2024 · b712de6 · b712de6
1 parent 047249e
commit b712de6
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 79 deletions.
diff --git a/components/Alias.tsx b/components/Alias.tsx
@@ -1,6 +1,5 @@
-import { useContext, useMemo } from "react";
-import { AppStateContext } from "../context/state";
-import { useTzktAccountAlias } from "../utils/getTzktAlias";
+import { useEffect, useState } from "react";
+import { useAliases } from "../context/aliases";
 import Copy from "./Copy";
 
 const Alias = ({
@@ -14,30 +13,18 @@ const Alias = ({
   length?: number;
   disabled?: boolean;
 }) => {
-  const state = useContext(AppStateContext)!;
-  const tzktAlias = useTzktAccountAlias(address);
-  console.log("🚀 ~ tzktAlias:", tzktAlias);
-  const formatted = useMemo(
-    () =>
-      `${(address ?? "").substring(0, length)}...${(address ?? "").substring(
-        (address ?? "").length - length
-      )}`,
-    [address, length]
-  );
+  const [alias, setAlias] = useState<string | undefined>(undefined);
+  const aliasesCtx = useAliases();
 
-  const toDisplay = useMemo(
-    () =>
-      state.aliases[address] === ""
-        ? tzktAlias ?? formatted
-        : state.aliases[address],
-    [state.aliases, address, formatted, tzktAlias]
-  );
+  useEffect(() => {
+    aliasesCtx.getAlias(address, length).then(setAlias);
+  }, [address, aliasesCtx, length]);
 
   console;
   return (
     <Copy value={address} text="Copy address" disabled={disabled}>
       <span className={className} title={address}>
-        {toDisplay}
+        {alias}
       </span>
     </Copy>
   );

diff --git a/pages/[walletAddress]/history.tsx b/pages/[walletAddress]/history.tsx
@@ -1,7 +1,6 @@
 import { tzip16 } from "@taquito/tzip16";
 import { validateContractAddress, ValidationResult } from "@taquito/utils";
 import { useContext, useEffect, useMemo, useReducer, useRef } from "react";
-import Alias from "../../components/Alias";
 import ProposalCard from "../../components/ProposalCard";
 import Spinner from "../../components/Spinner";
 import HistoryFaToken from "../../components/history/HistoryFaToken";
@@ -150,7 +149,6 @@ const getLatestTimestamp = (og: {
 
 const History = () => {
   const globalState = useContext(AppStateContext)!;
-  console.log("🚀 ~ History ~ globalState:", globalState);
   const globalDispatch = useContext(AppDispatchContext)!;
 
   const walletTokens = useWalletTokens();
@@ -178,7 +176,7 @@ const History = () => {
     if (globalState.currentContract === state.currentAddress) return;
 
     dispatch({ type: "resetRefresh" });
-  }, [globalState.currentContract]);
+  }, [globalState.currentContract, state.currentAddress]);
 
   useEffect(() => {
     if (!globalState.currentContract) return;
@@ -382,10 +380,9 @@ const History = () => {
             filteredProposals.length > 0 && (
               <div className="space-y-6">
                 {filteredProposals.map(x => {
-                  console.log("x", x, (x[1] as any)?.sender?.address);
                   switch (x[0]) {
                     case TransferType.MUTEZ:
-                      <HistoryTransfer proposal={x} />;
+                      return <HistoryTransfer proposal={x} />;
                     case TransferType.FA2:
                     case TransferType.FA1_2:
                       return (

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -14,6 +14,7 @@ import Spinner from "../components/Spinner";
 import Footer from "../components/footer";
 import NavBar from "../components/navbar";
 import P2PClient from "../context/P2PClient";
+import { AliasesProvider } from "../context/aliases";
 import { PREFERED_NETWORK } from "../context/config";
 import {
   tezosState,
@@ -39,7 +40,6 @@ export default function App({ Component, pageProps }: AppProps) {
   const [data, setData] = useState<undefined | string>();
   const path = usePathname();
   const router = useRouter();
-
   useEffect(() => {
     if (!path) return;
 
@@ -155,6 +155,7 @@ export default function App({ Component, pageProps }: AppProps) {
     router,
     state.currentStorage,
     state.connection,
+    state.contracts,
   ]);
   useEffect(() => {
     (async () => {
@@ -228,60 +229,62 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <AppStateContext.Provider value={state}>
       <AppDispatchContext.Provider value={dispatch}>
-        <div className="relative min-h-screen">
-          <div id="modal" />
-          {!!data && (
-            <LoginModal
-              data={data}
-              onEnd={() => {
-                setData(undefined);
-              }}
-            />
-          )}
-          <PoeModal />
-          <Banner>
-            <span className="font-light">Make sure the URL is </span>
-            {PREFERED_NETWORK === NetworkType.MAINNET
-              ? "tzsafe.marigold.dev"
-              : PREFERED_NETWORK === NetworkType.GHOSTNET
-              ? "ghostnet.tzsafe.marigold.dev"
-              : "a valid URL"}
-          </Banner>
-          <NavBar />
-
-          {isSidebarHidden ? null : (
-            <Sidebar
-              isOpen={hasSidebar}
-              onClose={() => setHasSidebar(false)}
-              isLoading={isFetching}
-            />
-          )}
-
-          <div
-            className={`pb-28 pt-20 ${isSidebarHidden ? "" : "md:pl-72"} ${
-              state.hasBanner ? "mt-12" : ""
-            }`}
-          >
-            <button
-              className="ml-4 mt-4 flex items-center space-x-2 text-zinc-300 md:hidden"
-              onClick={() => {
-                setHasSidebar(true);
-              }}
-            >
-              <span className="text-xs">Open sidebar</span>
-              <ArrowRightIcon className="h-4 w-4" />
-            </button>
-
-            {isFetching || !state.attemptedInitialLogin ? (
-              <div className="mt-12 flex w-full items-center justify-center">
-                <Spinner />
-              </div>
-            ) : (
-              <Component {...pageProps} />
+        <AliasesProvider aliasesFromState={state.aliases}>
+          <div className="relative min-h-screen">
+            <div id="modal" />
+            {!!data && (
+              <LoginModal
+                data={data}
+                onEnd={() => {
+                  setData(undefined);
+                }}
+              />
             )}
+            <PoeModal />
+            <Banner>
+              <span className="font-light">Make sure the URL is </span>
+              {PREFERED_NETWORK === NetworkType.MAINNET
+                ? "tzsafe.marigold.dev"
+                : PREFERED_NETWORK === NetworkType.GHOSTNET
+                ? "ghostnet.tzsafe.marigold.dev"
+                : "a valid URL"}
+            </Banner>
+            <NavBar />
+
+            {isSidebarHidden ? null : (
+              <Sidebar
+                isOpen={hasSidebar}
+                onClose={() => setHasSidebar(false)}
+                isLoading={isFetching}
+              />
+            )}
+
+            <div
+              className={`pb-28 pt-20 ${isSidebarHidden ? "" : "md:pl-72"} ${
+                state.hasBanner ? "mt-12" : ""
+              }`}
+            >
+              <button
+                className="ml-4 mt-4 flex items-center space-x-2 text-zinc-300 md:hidden"
+                onClick={() => {
+                  setHasSidebar(true);
+                }}
+              >
+                <span className="text-xs">Open sidebar</span>
+                <ArrowRightIcon className="h-4 w-4" />
+              </button>
+
+              {isFetching || !state.attemptedInitialLogin ? (
+                <div className="mt-12 flex w-full items-center justify-center">
+                  <Spinner />
+                </div>
+              ) : (
+                <Component {...pageProps} />
+              )}
+            </div>
+            <Footer shouldRemovePadding={isSidebarHidden} />
           </div>
-          <Footer shouldRemovePadding={isSidebarHidden} />
-        </div>
+        </AliasesProvider>
       </AppDispatchContext.Provider>
     </AppStateContext.Provider>
   );