From b5ebdd5a99c5e04eecdf6cc331621bd9dd91e175 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 15 Feb 2023 19:08:22 +0700 Subject: [PATCH 1/2] fix: keplr ready --- CHANGELOG.md | 1 + src/lib/app-provider/contexts/app.tsx | 6 ++++-- src/lib/app-provider/hooks/useAmplitude.ts | 15 +++++++++------ src/lib/components/modal/tx/ButtonSection.tsx | 2 ++ src/lib/layout/Searchbar.tsx | 2 ++ 5 files changed, 18 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 440db9231..5d1ae11bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -147,6 +147,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#198](https://github.com/alleslabs/celatone-frontend/pull/198) Fix handle keplr wallet ready - [#196](https://github.com/alleslabs/celatone-frontend/pull/196) Fix rewrite rule for amplitude - [#188](https://github.com/alleslabs/celatone-frontend/pull/188) Fix "No contact description" prefill in description section in contract detail page - [#187](https://github.com/alleslabs/celatone-frontend/pull/187) Fix renaming list flicker to the all lists for a second diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx index 2d3ec5863..1db97fb03 100644 --- a/src/lib/app-provider/contexts/app.tsx +++ b/src/lib/app-provider/contexts/app.tsx @@ -1,3 +1,4 @@ +import { State } from "@cosmos-kit/core"; import { useWallet } from "@cosmos-kit/react"; import big from "big.js"; import { GraphQLClient } from "graphql-request"; @@ -66,7 +67,7 @@ export const AppProvider = observer( appContractAddressMap, constants, }: AppProviderProps) => { - const { currentChainName, currentChainRecord } = useWallet(); + const { currentChainName, currentChainRecord, state } = useWallet(); const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore(); const { setContractUserKey, isContractUserKeyExist } = useContractStore(); const { setProjectUserKey, isProjectUserKeyExist } = @@ -114,7 +115,7 @@ export const AppProvider = observer( ); useEffect(() => { - if (currentChainName) { + if (state === State.Done) { const userKey = formatUserKey(currentChainName, DEFAULT_ADDRESS); setCodeUserKey(userKey); setContractUserKey(userKey); @@ -125,6 +126,7 @@ export const AppProvider = observer( setCodeUserKey, setContractUserKey, setProjectUserKey, + state, ]); useNetworkChange(); diff --git a/src/lib/app-provider/hooks/useAmplitude.ts b/src/lib/app-provider/hooks/useAmplitude.ts index 33cdd53b3..e77d3978b 100644 --- a/src/lib/app-provider/hooks/useAmplitude.ts +++ b/src/lib/app-provider/hooks/useAmplitude.ts @@ -1,10 +1,11 @@ import { init, setDeviceId, setUserId } from "@amplitude/analytics-browser"; +import { State } from "@cosmos-kit/core"; import { useWallet } from "@cosmos-kit/react"; import { createHash } from "crypto"; import { useEffect } from "react"; export const useAmplitude = () => { - const { address, currentChainName } = useWallet(); + const { address, currentChainName, state } = useWallet(); if (typeof window !== "undefined") { init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? "", undefined, { @@ -29,9 +30,11 @@ export const useAmplitude = () => { } useEffect(() => { - const userId = address - ? createHash("sha256").update(address).digest("hex") - : undefined; - setUserId(`${currentChainName}/${userId}`); - }, [address, currentChainName]); + if (state === State.Done) { + const userId = address + ? createHash("sha256").update(address).digest("hex") + : undefined; + setUserId(`${currentChainName}/${userId}`); + } + }, [address, currentChainName, state]); }; diff --git a/src/lib/components/modal/tx/ButtonSection.tsx b/src/lib/components/modal/tx/ButtonSection.tsx index 62242cfac..e661260c9 100644 --- a/src/lib/components/modal/tx/ButtonSection.tsx +++ b/src/lib/components/modal/tx/ButtonSection.tsx @@ -6,6 +6,7 @@ import { FiChevronRight } from "react-icons/fi"; import { getExplorerTxUrl } from "lib/app-fns/explorer"; import { useInternalNavigate } from "lib/app-provider"; +import { AmpTrackMintscan } from "lib/services/amplitude"; import type { ActionVariant, TxReceipt } from "lib/types"; // TODO: refactor props to pass param in txResultRendering instead of receipt @@ -25,6 +26,7 @@ export const ButtonSection = ({ const { currentChainName } = useWallet(); const openExplorer = useCallback(() => { + AmpTrackMintscan("tx_hash"); const txHash = receipts.find((r) => r.title === "Tx Hash")?.value; window.open( `${getExplorerTxUrl(currentChainName)}/${txHash}`, diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx index 76293eb3d..ad6ff694b 100644 --- a/src/lib/layout/Searchbar.tsx +++ b/src/lib/layout/Searchbar.tsx @@ -145,12 +145,14 @@ const Searchbar = () => { > {!results.length ? ( ) : ( results.map((type) => ( Date: Wed, 15 Feb 2023 19:23:42 +0700 Subject: [PATCH 2/2] fix: use timeout instead --- src/lib/app-provider/contexts/app.tsx | 6 ++---- src/lib/app-provider/hooks/useAmplitude.ts | 20 +++++++++++--------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx index 1db97fb03..2d3ec5863 100644 --- a/src/lib/app-provider/contexts/app.tsx +++ b/src/lib/app-provider/contexts/app.tsx @@ -1,4 +1,3 @@ -import { State } from "@cosmos-kit/core"; import { useWallet } from "@cosmos-kit/react"; import big from "big.js"; import { GraphQLClient } from "graphql-request"; @@ -67,7 +66,7 @@ export const AppProvider = observer( appContractAddressMap, constants, }: AppProviderProps) => { - const { currentChainName, currentChainRecord, state } = useWallet(); + const { currentChainName, currentChainRecord } = useWallet(); const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore(); const { setContractUserKey, isContractUserKeyExist } = useContractStore(); const { setProjectUserKey, isProjectUserKeyExist } = @@ -115,7 +114,7 @@ export const AppProvider = observer( ); useEffect(() => { - if (state === State.Done) { + if (currentChainName) { const userKey = formatUserKey(currentChainName, DEFAULT_ADDRESS); setCodeUserKey(userKey); setContractUserKey(userKey); @@ -126,7 +125,6 @@ export const AppProvider = observer( setCodeUserKey, setContractUserKey, setProjectUserKey, - state, ]); useNetworkChange(); diff --git a/src/lib/app-provider/hooks/useAmplitude.ts b/src/lib/app-provider/hooks/useAmplitude.ts index e77d3978b..f2efd632c 100644 --- a/src/lib/app-provider/hooks/useAmplitude.ts +++ b/src/lib/app-provider/hooks/useAmplitude.ts @@ -1,11 +1,10 @@ import { init, setDeviceId, setUserId } from "@amplitude/analytics-browser"; -import { State } from "@cosmos-kit/core"; import { useWallet } from "@cosmos-kit/react"; import { createHash } from "crypto"; import { useEffect } from "react"; export const useAmplitude = () => { - const { address, currentChainName, state } = useWallet(); + const { address, currentChainName } = useWallet(); if (typeof window !== "undefined") { init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? "", undefined, { @@ -30,11 +29,14 @@ export const useAmplitude = () => { } useEffect(() => { - if (state === State.Done) { - const userId = address - ? createHash("sha256").update(address).digest("hex") - : undefined; - setUserId(`${currentChainName}/${userId}`); - } - }, [address, currentChainName, state]); + const timeoutId = setTimeout(() => { + if (currentChainName) { + const userId = address + ? createHash("sha256").update(address).digest("hex") + : undefined; + setUserId(`${currentChainName}/${userId}`); + } + }, 300); + return () => clearTimeout(timeoutId); + }, [address, currentChainName]); };