From 4e05db02edb621f0019029e7e2b233957a720a6a Mon Sep 17 00:00:00 2001 From: Quentin Burg Date: Wed, 3 Apr 2024 10:50:06 +0200 Subject: [PATCH] :construction: --- components/Alias.tsx | 10 +++-- components/Sidebar.tsx | 13 +++++-- components/{ => history}/HistoryFaToken.tsx | 8 ++-- components/history/HistoryTransfer.tsx | 40 ++++++++++++++++++++ package.json | 2 +- pages/[walletAddress]/history.tsx | 42 +++------------------ utils/getTzktAlias.ts | 22 +++++++++++ 7 files changed, 88 insertions(+), 49 deletions(-) rename components/{ => history}/HistoryFaToken.tsx (94%) create mode 100644 components/history/HistoryTransfer.tsx create mode 100644 utils/getTzktAlias.ts diff --git a/components/Alias.tsx b/components/Alias.tsx index bfa4eb2d..8d98e00b 100644 --- a/components/Alias.tsx +++ b/components/Alias.tsx @@ -1,5 +1,6 @@ import { useContext, useMemo } from "react"; import { AppStateContext } from "../context/state"; +import { useTzktAccountAlias } from "../utils/getTzktAlias"; import Copy from "./Copy"; const Alias = ({ @@ -14,6 +15,8 @@ const Alias = ({ disabled?: boolean; }) => { const state = useContext(AppStateContext)!; + const tzktAlias = useTzktAccountAlias(address); + console.log("🚀 ~ tzktAlias:", tzktAlias); const formatted = useMemo( () => `${(address ?? "").substring(0, length)}...${(address ?? "").substring( @@ -25,11 +28,12 @@ const Alias = ({ const toDisplay = useMemo( () => state.aliases[address] === "" - ? formatted - : state.aliases[address] ?? formatted, - [state, address, formatted] + ? tzktAlias ?? formatted + : state.aliases[address], + [state.aliases, address, formatted, tzktAlias] ); + console; return ( diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index cc3daf2d..dbc65d46 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -28,6 +28,7 @@ import { version } from "../types/display"; 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"; @@ -68,7 +69,7 @@ const SelectedItem = ({

{name}

{threshold}

- + {/* {!address ? ( ... @@ -78,7 +79,9 @@ const SelectedItem = ({ )}` )} - + */} + +

{formattedBalance.toFixed(2)} Tez

@@ -256,9 +259,11 @@ const Sidebar = ({ className="radix-disabled:opacity-50 relative flex select-none items-center rounded-md px-8 py-2 text-sm font-medium text-zinc-300 focus:bg-zinc-800 focus:bg-zinc-900 focus:outline-none" > -

+ {/*

{state.aliases[address]} -

+

*/} + +

{address.substring(0, 5)}... diff --git a/components/HistoryFaToken.tsx b/components/history/HistoryFaToken.tsx similarity index 94% rename from components/HistoryFaToken.tsx rename to components/history/HistoryFaToken.tsx index f362c35d..20571272 100644 --- a/components/HistoryFaToken.tsx +++ b/components/history/HistoryFaToken.tsx @@ -1,10 +1,10 @@ import { TriangleDownIcon } from "@radix-ui/react-icons"; import BigNumber from "bignumber.js"; import { useMemo, useState } from "react"; -import { TransferType } from "../types/display"; -import Alias from "./Alias"; -import { fa1_2Token } from "./FA1_2"; -import { fa2Token } from "./FA2Transfer"; +import { TransferType } from "../../types/display"; +import Alias from "../Alias"; +import { fa1_2Token } from "../FA1_2"; +import { fa2Token } from "../FA2Transfer"; type props = { transferType: TransferType; diff --git a/components/history/HistoryTransfer.tsx b/components/history/HistoryTransfer.tsx new file mode 100644 index 00000000..70a0664f --- /dev/null +++ b/components/history/HistoryTransfer.tsx @@ -0,0 +1,40 @@ +import { mutezToTez } from "../../utils/tez"; +import Alias from "../Alias"; + +type HistoryTransferProps = { + proposal: Array; +}; + +const HistoryTransfer = ({ proposal }: HistoryTransferProps) => { + return ( +

+ + Received Tez + Received + + + From:{" "} + + + + Amount:{" "} + {mutezToTez((proposal[1] as any).amount)} Tez + + + {new Date((proposal[1] as any).timestamp).toLocaleDateString()} -{" "} + {`${new Date((proposal[1] as any).timestamp) + .getHours() + .toString() + .padStart(2, "0")}:${new Date((proposal[1] as any).timestamp) + .getMinutes() + .toString() + .padStart(2, "0")}`} + +
+ ); +}; + +export default HistoryTransfer; diff --git a/package.json b/package.json index b84e4c63..0d363def 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "env-cmd -f ./config/.env.dev next dev", + "dev": "env-cmd -f ./config/.env next dev", "sandbox": "env-cmd -f ./config/.env.sandbox next dev --port 4000", "build": "next build", "start": "next start --port 80", diff --git a/pages/[walletAddress]/history.tsx b/pages/[walletAddress]/history.tsx index 05b94c7d..7ccbd7fe 100644 --- a/pages/[walletAddress]/history.tsx +++ b/pages/[walletAddress]/history.tsx @@ -2,9 +2,10 @@ 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 HistoryFaToken from "../../components/HistoryFaToken"; import ProposalCard from "../../components/ProposalCard"; import Spinner from "../../components/Spinner"; +import HistoryFaToken from "../../components/history/HistoryFaToken"; +import HistoryTransfer from "../../components/history/HistoryTransfer"; import Meta from "../../components/meta"; import Modal from "../../components/modal"; import ProposalSignForm from "../../components/proposalSignForm"; @@ -149,6 +150,7 @@ const getLatestTimestamp = (og: { const History = () => { const globalState = useContext(AppStateContext)!; + console.log("🚀 ~ History ~ globalState:", globalState); const globalDispatch = useContext(AppDispatchContext)!; const walletTokens = useWalletTokens(); @@ -380,44 +382,10 @@ const History = () => { filteredProposals.length > 0 && (
{filteredProposals.map(x => { + console.log("x", x, (x[1] as any)?.sender?.address); switch (x[0]) { case TransferType.MUTEZ: - return ( -
- - - Received Tez - - Received - - - From:{" "} - - - - Amount:{" "} - {mutezToTez((x[1] as any).amount)} Tez - - - {new Date( - (x[1] as any).timestamp - ).toLocaleDateString()}{" "} - -{" "} - {`${new Date((x[1] as any).timestamp) - .getHours() - .toString() - .padStart(2, "0")}:${new Date( - (x[1] as any).timestamp - ) - .getMinutes() - .toString() - .padStart(2, "0")}`} - -
- ); + ; case TransferType.FA2: case TransferType.FA1_2: return ( diff --git a/utils/getTzktAlias.ts b/utils/getTzktAlias.ts new file mode 100644 index 00000000..502a69fe --- /dev/null +++ b/utils/getTzktAlias.ts @@ -0,0 +1,22 @@ +import { useEffect, useState } from "react"; +import { TZKT_API_URL } from "../context/config"; + +export const useTzktAccountAlias = (accountAddress: string) => { + const [alias, setAlias] = useState(undefined); + + useEffect(() => { + (async () => + fetch(`${TZKT_API_URL}/v1/accounts/${accountAddress}`).then( + async response => { + if (response.status >= 200 && response.status < 300) { + const json = await response.json(); + if (json["alias"]) { + setAlias(json["alias"]); + } + } + } + ))(); + }, [accountAddress]); + + return alias; +};