diff --git a/src/assets/icons/binance-logo.svg b/src/assets/icons/binance-logo.svg new file mode 100644 index 0000000..62d5b19 --- /dev/null +++ b/src/assets/icons/binance-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/btc-logo.svg b/src/assets/icons/btc-logo.svg new file mode 100644 index 0000000..cae4d6a --- /dev/null +++ b/src/assets/icons/btc-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/doge-logo.svg b/src/assets/icons/doge-logo.svg new file mode 100644 index 0000000..3a312e5 --- /dev/null +++ b/src/assets/icons/doge-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/eth-logo.svg b/src/assets/icons/eth-logo.svg new file mode 100644 index 0000000..b522435 --- /dev/null +++ b/src/assets/icons/eth-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/okex-logo.svg b/src/assets/icons/okex-logo.svg new file mode 100644 index 0000000..8218921 --- /dev/null +++ b/src/assets/icons/okex-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/sol-logo.svg b/src/assets/icons/sol-logo.svg new file mode 100644 index 0000000..c38e42d --- /dev/null +++ b/src/assets/icons/sol-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/comparison/index.tsx b/src/components/comparison/index.tsx index 82677db..4e8b003 100644 --- a/src/components/comparison/index.tsx +++ b/src/components/comparison/index.tsx @@ -205,7 +205,7 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => { const headTotal = _(head).sumBy("value"); if (!_(symbols).isEmpty()) { res.push({ - name: "USD Total Value", + name: "Total Value", base: baseTotal, head: headTotal, }); diff --git a/src/components/configuration.tsx b/src/components/configuration.tsx index 385d6af..22d40d7 100644 --- a/src/components/configuration.tsx +++ b/src/components/configuration.tsx @@ -1,11 +1,17 @@ import _ from "lodash"; -import { useContext, useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { getConfiguration, saveConfiguration, } from "../middlelayers/configuration"; import { toast } from "react-hot-toast"; -import deleteIcon from "@/assets/icons/delete-icon.png"; +import DeleteIcon from "@/assets/icons/delete-icon.png"; +import BinanceLogo from "@/assets/icons/binance-logo.svg"; +import OkexLogo from "@/assets/icons/okex-logo.svg"; +import BTCLogo from "@/assets/icons/btc-logo.svg"; +import ETHLogo from "@/assets/icons/eth-logo.svg"; +import SOLLogo from "@/assets/icons/sol-logo.svg"; +import DOGELogo from "@/assets/icons/doge-logo.svg"; import { GlobalConfig, TokenConfig } from "../middlelayers/datafetch/types"; import { CurrencyRateDetail } from "../middlelayers/types"; import { listAllCurrencyRates } from "../middlelayers/currency"; @@ -343,124 +349,24 @@ const Configuration = ({ {ex.type}
- handleRemoveExchange(idx)} - > - - - - - + /> {/* binance */} {ex.type === "binance" && ( - - - - - - - - - + src={BinanceLogo} + > )} {/* okex */} {ex.type === "okex" && ( - - - - - - - - - - - - - - - - - - - + src={OkexLogo} + /> )}
@@ -507,35 +413,35 @@ const Configuration = ({ {w.type.toUpperCase()}
- handleRemoveWallet(idx)} - > - - - - - + /> + {w.type === "btc" && ( + + )} + {w.type === "erc20" && ( + + )} + {w.type === "doge" && ( + + )} + {w.type === "sol" && ( + + )}
@@ -614,7 +520,7 @@ const Configuration = ({ onChange={(e) => handleOthersChange(idx, "amount", e.target.value)} /> handleRemoveOther(idx)}> - delete + delete )) diff --git a/src/components/historical-data/index.tsx b/src/components/historical-data/index.tsx index 05f3956..16db474 100644 --- a/src/components/historical-data/index.tsx +++ b/src/components/historical-data/index.tsx @@ -74,14 +74,10 @@ const App = ({ }, []); function loadAllData() { - setLoading(true); - queryHistoricalData(-1) - .then((d) => setData(d)) - .finally(() => setLoading(false)); + queryHistoricalData(-1).then((d) => setData(d)); } function onHistoricalDataDeleteClick(uuid: string) { - setLoading(true); deleteHistoricalDataByUUID(uuid) .then(() => { toast.success("Record deleted"); @@ -95,12 +91,10 @@ const App = ({ .catch((e) => toast.error(e.message)) .finally(() => { setIsModalOpen(false); - setLoading(false); }); } function onHistoricalDataDetailDeleteClick(id: number) { - setLoading(true); deleteHistoricalDataDetailById(id) .then(() => { toast.success("Record deleted"); @@ -115,10 +109,7 @@ const App = ({ .value() ); }) - .catch((e) => toast.error(e.message)) - .finally(() => { - setLoading(false); - }); + .catch((e) => toast.error(e.message)); } function onRowClick(id: number | string) { @@ -404,7 +395,7 @@ const App = ({ // marginBottom: 10, // color: "gray", // }} - className='flex justify-center items-center mb-5 text-gray-500 cursor-pointer' + className="flex justify-center items-center mb-5 text-gray-500 cursor-pointer" > (pageNum > 1 ? setPageNum(pageNum - 1) : null)} diff --git a/src/components/refresh-data/index.tsx b/src/components/refresh-data/index.tsx index 747adb1..a6264f4 100644 --- a/src/components/refresh-data/index.tsx +++ b/src/components/refresh-data/index.tsx @@ -1,11 +1,12 @@ import "./index.css"; -import refreshIcon from "../../assets/icons/refresh-icon.png"; -import { useContext } from "react"; +import { useContext, useState } from "react"; import { refreshAllData } from "../../middlelayers/charts"; import { toast } from "react-hot-toast"; import { LoadingContext } from "../../App"; import { updateAllCurrencyRates } from "../../middlelayers/currency"; -import { trackEventWithClientID } from '../../utils/app' +import { trackEventWithClientID } from "../../utils/app"; +import { Button } from "../ui/button"; +import { ReloadIcon } from "@radix-ui/react-icons"; const retries = 3; const retryInterval = 3000; // 3s @@ -15,7 +16,7 @@ const App = ({ }: { afterRefresh?: (success: boolean) => unknown; }) => { - const { setLoading } = useContext(LoadingContext); + const [refreshLoading, setRefreshLoading] = useState(false); const retry = async ( fn: () => Promise, @@ -40,8 +41,7 @@ const App = ({ }; const handleButtonClick = () => { - setLoading(true); - + setRefreshLoading(true); let refreshError: Error | undefined; retry(refreshAllData, retries, retryInterval) @@ -50,8 +50,8 @@ const App = ({ refreshError = err; }) .finally(() => { - setLoading(false); - trackEventWithClientID("data_refreshed") + setRefreshLoading(false); + trackEventWithClientID("data_refreshed"); if (refreshError) { toast.error(refreshError.message || (refreshError as any)); } else { @@ -66,17 +66,13 @@ const App = ({ return (
- + Refresh +
); }; diff --git a/src/components/wallet-analyzer.tsx b/src/components/wallet-analyzer.tsx index 3715182..ed731af 100644 --- a/src/components/wallet-analyzer.tsx +++ b/src/components/wallet-analyzer.tsx @@ -1,7 +1,6 @@ -import { useContext, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import WalletAssetsPercentage from "./wallet-assets-percentage"; import WalletAssetsChange from "./wallet-assets-change"; -import { LoadingContext } from "@/App"; import { CurrencyRateDetail, WalletAssetsChangeData, @@ -11,7 +10,6 @@ import { WALLET_ANALYZER } from "@/middlelayers/charts"; import { Separator } from "./ui/separator"; const App = ({ currency }: { currency: CurrencyRateDetail }) => { - const { setLoading } = useContext(LoadingContext); const [walletAssetsPercentage, setWalletAssetsPercentage] = useState([]); @@ -19,8 +17,7 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => { useState([]); useEffect(() => { - setLoading(true); - loadAllDataAsync().finally(() => setLoading(false)); + loadAllDataAsync(); }, []); async function loadAllDataAsync() { diff --git a/src/components/wallet-assets-change.tsx b/src/components/wallet-assets-change.tsx index 8ca52db..8e1ce84 100644 --- a/src/components/wallet-assets-change.tsx +++ b/src/components/wallet-assets-change.tsx @@ -3,10 +3,7 @@ import { CurrencyRateDetail, WalletAssetsChangeData, } from "@/middlelayers/types"; -import { - currencyWrapper, - prettyNumberToLocaleString, -} from "@/utils/currency"; +import { currencyWrapper, prettyNumberToLocaleString } from "@/utils/currency"; import { insertEllipsis } from "@/utils/string"; import { TableHead, @@ -87,7 +84,6 @@ const App = ({ d.changePercentage )}-500`} > - {" "} {getArrow(d.changePercentage)} {prettyNumberToLocaleString( getPositiveValue(d.changePercentage) diff --git a/src/middlelayers/data.ts b/src/middlelayers/data.ts index 272867b..4386519 100644 --- a/src/middlelayers/data.ts +++ b/src/middlelayers/data.ts @@ -118,6 +118,7 @@ export async function importHistoricalData(): Promise { // !compatible with older versions logic ( before 0.3.3 ) if (md5) { // verify md5 + // todo: use md5 in typescript const currentMd5 = await invoke("md5", { data: JSON.stringify({ exportAt, historicalData, configuration }) }) if (currentMd5 !== md5) { throw new Error("invalid data, md5 check failed: errorCode 000") diff --git a/src/middlelayers/wallet.ts b/src/middlelayers/wallet.ts index ef72d14..033402a 100644 --- a/src/middlelayers/wallet.ts +++ b/src/middlelayers/wallet.ts @@ -54,6 +54,7 @@ export class WalletAnalyzer { _(addrs.addresses).forEach(x => { const alias = _(x).isString() ? undefined : (x as { alias: string, address: string }).alias const address = _(x).isString() ? x as string : (x as { alias: string, address: string }).address + aliases.push({ walletType, walletMd5: md5(address),