From 5c4a902738ab1c1e5c23f77dd033c409f5bb0c59 Mon Sep 17 00:00:00 2001
From: Xharles
Date: Sun, 3 Mar 2024 18:52:27 +0100
Subject: [PATCH 01/13] add svg
---
packages/frontend/src/assets/icons/shown.svg | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/frontend/src/assets/icons/shown.svg b/packages/frontend/src/assets/icons/shown.svg
index a78c62df..e8c9da84 100644
--- a/packages/frontend/src/assets/icons/shown.svg
+++ b/packages/frontend/src/assets/icons/shown.svg
@@ -1,4 +1,4 @@
From 6801a006007c0b72cd68a8f0f5e74d745355bf0d Mon Sep 17 00:00:00 2001
From: Xharles
Date: Sun, 3 Mar 2024 18:52:51 +0100
Subject: [PATCH 02/13] add routes
---
packages/frontend/src/MobileApp.tsx | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/packages/frontend/src/MobileApp.tsx b/packages/frontend/src/MobileApp.tsx
index 2496c0d8..ca7dbb39 100644
--- a/packages/frontend/src/MobileApp.tsx
+++ b/packages/frontend/src/MobileApp.tsx
@@ -35,6 +35,9 @@ const ConnectWalletPage = lazyRetry(
);
const AddWalletPage = lazyRetry(() => import("./mobile-pages/add-wallet"));
const AddHoldingPage = lazyRetry(() => import("./mobile-pages/add-holding"));
+const PortfolioHoldingsPage = lazyRetry(
+ () => import("./mobile-pages/portfolio-holdings")
+);
const CustomNavTab: React.FC<{
label: string;
@@ -100,6 +103,9 @@ const TabNavigator: React.FC = () => {
exact
component={AddHoldingPage}
/>
+
+
+
From c6c21793ccb8e4f40343ac639d281c9e99d6faf5 Mon Sep 17 00:00:00 2001
From: Xharles
Date: Sun, 3 Mar 2024 18:53:09 +0100
Subject: [PATCH 03/13] share style update
---
packages/frontend/src/components/portfolio/PortfolioStats.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/frontend/src/components/portfolio/PortfolioStats.tsx b/packages/frontend/src/components/portfolio/PortfolioStats.tsx
index aaf7c372..96a17c97 100644
--- a/packages/frontend/src/components/portfolio/PortfolioStats.tsx
+++ b/packages/frontend/src/components/portfolio/PortfolioStats.tsx
@@ -200,7 +200,7 @@ const PortfolioStats: FC = ({
Total Balance{" "}
{portfolioData === undefined ? (
From d79c06818197ee69d6bc728d623f7690f965ee1c Mon Sep 17 00:00:00 2001
From: Xharles
Date: Sun, 3 Mar 2024 18:56:08 +0100
Subject: [PATCH 04/13] extract component to reuse it
---
.../portfolio/WalletConnectionOptions.tsx | 39 +++++++++++++++++++
.../frontend/src/mobile-pages/portfolio.tsx | 38 ++++++------------
2 files changed, 50 insertions(+), 27 deletions(-)
create mode 100644 packages/frontend/src/mobile-components/portfolio/WalletConnectionOptions.tsx
diff --git a/packages/frontend/src/mobile-components/portfolio/WalletConnectionOptions.tsx b/packages/frontend/src/mobile-components/portfolio/WalletConnectionOptions.tsx
new file mode 100644
index 00000000..5601f196
--- /dev/null
+++ b/packages/frontend/src/mobile-components/portfolio/WalletConnectionOptions.tsx
@@ -0,0 +1,39 @@
+import { FC } from "react";
+import { OutlineButton, twMerge } from "@alphaday/ui-kit";
+import { ReactComponent as CopySVG } from "src/assets/icons/copy.svg";
+import { ReactComponent as HandSVG } from "src/assets/icons/hand.svg";
+import { ReactComponent as WalletSVG } from "src/assets/icons/wallet.svg";
+
+const WalletConnectionOptions: FC<{
+ isAuthenticated: boolean;
+ onClick: (path: string) => void;
+ className?: string;
+}> = ({ isAuthenticated, onClick, className }) => {
+ return (
+
+ }
+ onClick={() => onClick("/portfolio/add-wallet")}
+ isAuthenticated={isAuthenticated}
+ />
+ }
+ onClick={() => onClick("/portfolio/connect-wallet")}
+ isAuthenticated={isAuthenticated}
+ />
+ }
+ onClick={() => onClick("/portfolio/add-holding")}
+ isAuthenticated={isAuthenticated}
+ />
+
+ );
+};
+
+export default WalletConnectionOptions;
diff --git a/packages/frontend/src/mobile-pages/portfolio.tsx b/packages/frontend/src/mobile-pages/portfolio.tsx
index 4fb4ea34..5ef3866a 100644
--- a/packages/frontend/src/mobile-pages/portfolio.tsx
+++ b/packages/frontend/src/mobile-pages/portfolio.tsx
@@ -1,12 +1,10 @@
import { FC } from "react";
-import { OutlineButton, Pager } from "@alphaday/ui-kit";
+import { Pager } from "@alphaday/ui-kit";
import { useHistory } from "react-router";
import { useAuth } from "src/api/hooks";
import { ReactComponent as CloseSVG } from "src/assets/icons/close.svg";
-import { ReactComponent as CopySVG } from "src/assets/icons/copy.svg";
-import { ReactComponent as HandSVG } from "src/assets/icons/hand.svg";
import { ReactComponent as InfoSVG } from "src/assets/icons/Info2.svg";
-import { ReactComponent as WalletSVG } from "src/assets/icons/wallet.svg";
+import WalletConnectionOptions from "src/mobile-components/portfolio/WalletConnectionOptions";
const TopSection: FC<{ isAuthenticated: boolean }> = ({ isAuthenticated }) => {
if (isAuthenticated) {
@@ -35,6 +33,8 @@ const TopSection: FC<{ isAuthenticated: boolean }> = ({ isAuthenticated }) => {
const PortfolioPage = () => {
const history = useHistory();
const { isAuthenticated } = useAuth();
+
+ // TODO if user has holdings route to holdings
return (
<>
{
}
/>
-
- }
- onClick={() => history.push("/portfolio/add-wallet")}
- isAuthenticated={isAuthenticated}
- />
- }
- onClick={() => history.push("/portfolio/connect-wallet")}
- isAuthenticated={isAuthenticated}
- />
- }
- onClick={() => history.push("/portfolio/add-holding")}
- isAuthenticated={isAuthenticated}
- />
-
+ {
+ history.push(path);
+ }}
+ className="mx-4"
+ />
>
);
};
From daa3f2caf20ffdfb0c3bc472cb6a5aeec072d613 Mon Sep 17 00:00:00 2001
From: Xharles
Date: Sun, 3 Mar 2024 18:56:16 +0100
Subject: [PATCH 05/13] create dropdown select component
---
packages/ui-kit/index.ts | 4 +-
.../select/DropdownSelect.tsx | 107 ++++++++++++++++++
2 files changed, 109 insertions(+), 2 deletions(-)
create mode 100644 packages/ui-kit/src/mobile-components/select/DropdownSelect.tsx
diff --git a/packages/ui-kit/index.ts b/packages/ui-kit/index.ts
index b0abeabb..72aac5f2 100644
--- a/packages/ui-kit/index.ts
+++ b/packages/ui-kit/index.ts
@@ -92,8 +92,8 @@ import {
import { breakpoints } from "./src/globalStyles/breakpoints";
import { themeColors } from "./src/globalStyles/themes";
import { OutlineButton } from "./src/mobile-components/button/buttons";
-import { FormInput } from "./src/mobile-components/form-elements/FormElements";
import { Pager } from "./src/mobile-components/pager/Pager";
+import { DropdownSelect } from "./src/mobile-components/select/DropdownSelect";
export type { TViewTabMenuOption, DatesSetArg, EventClickArg, TDatePos };
export * from "./src/mobile-components/form-elements/FormElements";
@@ -179,5 +179,5 @@ export {
Transition,
MiniDialog,
OutlineButton,
- FormInput,
+ DropdownSelect,
};
diff --git a/packages/ui-kit/src/mobile-components/select/DropdownSelect.tsx b/packages/ui-kit/src/mobile-components/select/DropdownSelect.tsx
new file mode 100644
index 00000000..31cfdfab
--- /dev/null
+++ b/packages/ui-kit/src/mobile-components/select/DropdownSelect.tsx
@@ -0,0 +1,107 @@
+import { FC, useState } from "react";
+import { Combobox } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+import { ReactComponent as CheckmarkSVG } from "../../assets/svg/checkmark.svg";
+import { ReactComponent as ChevronUpDownSVG } from "../../assets/svg/chevron-up-down.svg";
+
+type TPerson = {
+ id: number;
+ name: string;
+};
+
+interface IDropdownSelect {
+ label?: string;
+ wallets: {
+ label: string;
+ value: string;
+ }[];
+}
+
+export const DropdownSelect: FC = ({ label, wallets }) => {
+ const [query, setQuery] = useState("");
+ const [selectedPerson, setSelectedPerson] = useState(null);
+
+ const filteredWallets =
+ query === ""
+ ? wallets
+ : wallets.filter((person) => {
+ return person.label
+ .toLowerCase()
+ .includes(query.toLowerCase());
+ });
+ return (
+
+ {label && (
+
+ {label}
+
+ )}
+
+ setQuery(event.target.value)}
+ displayValue={(person: TPerson) => person?.name}
+ />
+
+
+
+
+ {filteredWallets.length > 0 && (
+
+ {filteredWallets.map((person) => (
+
+ twMerge(
+ "relative cursor-default select-none py-2 pl-3 pr-9",
+ active
+ ? "bg-accentVariant100 cursor-pointer text-white"
+ : "text-primary"
+ )
+ }
+ >
+ {({ active, selected }) => (
+ <>
+
+ {person.label}
+
+
+ {selected && (
+
+
+
+ )}
+ >
+ )}
+
+ ))}
+
+ )}
+
+
+ );
+};
From 27ee7b4c9c627e5d2487d1c586f90452a8d69676 Mon Sep 17 00:00:00 2001
From: Xharles
Date: Mon, 4 Mar 2024 07:43:39 +0100
Subject: [PATCH 06/13] add tittle to button without text
---
.../src/mobile-pages/portfolio-holdings.tsx | 131 ++++++++++++++++++
.../src/mobile-components/pager/Pager.tsx | 2 +
2 files changed, 133 insertions(+)
create mode 100644 packages/frontend/src/mobile-pages/portfolio-holdings.tsx
diff --git a/packages/frontend/src/mobile-pages/portfolio-holdings.tsx b/packages/frontend/src/mobile-pages/portfolio-holdings.tsx
new file mode 100644
index 00000000..23fd9f67
--- /dev/null
+++ b/packages/frontend/src/mobile-pages/portfolio-holdings.tsx
@@ -0,0 +1,131 @@
+import { FC, useState } from "react";
+import { Dialog, DropdownSelect } from "@alphaday/ui-kit";
+import { IonPage } from "@ionic/react";
+import { useHistory } from "react-router";
+import { useKeyPress } from "src/api/hooks";
+import {
+ toggleShowBalance as toggleShowBalanceInStore,
+ toggleShowAllAssets as toggleShowAllAssetsInStore,
+ selectShowAllAssets,
+ setWidgetHeight,
+} from "src/api/store";
+import { useAppDispatch } from "src/api/store/hooks";
+import { ReactComponent as PlusSVG } from "src/assets/icons/plus.svg";
+import { ReactComponent as ShowSVG } from "src/assets/icons/shown.svg";
+import WalletConnectionOptions from "src/mobile-components/portfolio/WalletConnectionOptions";
+import { useAccount } from "wagmi";
+
+const UserWalletsInfo: FC<{ toggleBalance: () => void }> = ({
+ toggleBalance,
+}) => {
+ return (
+
+
+
+
+
+ Total Balance{" "}
+
+
+
+ $12,555
+
+
+ +58.54 (1.4%) /
+ 24h
+
+
+
+
+ );
+};
+
+const WalletsList: FC<{
+ onAddWallet: () => void;
+ wallets: {
+ label: string;
+ value: string;
+ }[];
+}> = ({ onAddWallet, wallets }) => {
+ return (
+
+ );
+};
+
+const PortfolioHoldings: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const [showDialog, setShowDialog] = useState(false);
+ const history = useHistory();
+
+ const toggleBalance = () => {
+ dispatch(toggleShowBalanceInStore());
+ };
+ const wallets = [
+ { label: "All Assets", value: "all" },
+ {
+ label: "xavier-Charles",
+ value: "0xe70d4BdacC0444CAa973b0A05CB6f2974C34aF0c",
+ },
+ {
+ label: "pipe",
+ value: "0x93450d4BdacC0444CAa973b0A05CB6f2974C34DDc",
+ },
+ ];
+ return (
+
+
+
+ {
+ setShowDialog(true);
+ }}
+ />
+
+
+ );
+};
+
+export default PortfolioHoldings;
diff --git a/packages/ui-kit/src/mobile-components/pager/Pager.tsx b/packages/ui-kit/src/mobile-components/pager/Pager.tsx
index f0b25286..6c0c6a85 100644
--- a/packages/ui-kit/src/mobile-components/pager/Pager.tsx
+++ b/packages/ui-kit/src/mobile-components/pager/Pager.tsx
@@ -23,6 +23,7 @@ export const Pager: React.FC = ({
handleBack && "visible"
)}
onClick={handleBack}
+ title="Back"
>
@@ -36,6 +37,7 @@ export const Pager: React.FC = ({
handleClose && "visible"
)}
onClick={handleClose}
+ title="Close"
>
From 77682921ea1fd0b522dfa71a35d0f3d809ebf424 Mon Sep 17 00:00:00 2001
From: Xharles
Date: Mon, 4 Mar 2024 10:53:25 +0100
Subject: [PATCH 07/13] use mock data
---
.../portfolio/PortfolioChart.tsx | 130 +++++++++++++
.../mobile-components/portfolio/mockData.ts | 177 ++++++++++++++++++
.../src/mobile-pages/portfolio-holdings.tsx | 32 +++-
3 files changed, 330 insertions(+), 9 deletions(-)
create mode 100644 packages/frontend/src/mobile-components/portfolio/PortfolioChart.tsx
create mode 100644 packages/frontend/src/mobile-components/portfolio/mockData.ts
diff --git a/packages/frontend/src/mobile-components/portfolio/PortfolioChart.tsx b/packages/frontend/src/mobile-components/portfolio/PortfolioChart.tsx
new file mode 100644
index 00000000..64e1f09f
--- /dev/null
+++ b/packages/frontend/src/mobile-components/portfolio/PortfolioChart.tsx
@@ -0,0 +1,130 @@
+import { FC, useMemo } from "react";
+import { ApexDonutChart, themeColors } from "@alphaday/ui-kit";
+import { makeRepeated } from "src/api/utils/itemUtils";
+import { getAssetPrefix } from "src/api/utils/portfolioUtils";
+import { ITEM_COLORS } from "src/components/item-colors";
+import { TPortfolioDataForAddress } from "src/components/portfolio/types";
+import CONFIG from "src/config";
+import { portfolioData } from "./mockData";
+
+const { DONUT_TOKENS_COUNT } = CONFIG.WIDGETS.PORTFOLIO;
+
+const PortfolioChart: FC = () => {
+ const assets = useMemo(
+ () =>
+ portfolioData !== undefined
+ ? [...portfolioData.assets].sort(
+ (a, b) => b.token.balanceUSD - a.token.balanceUSD
+ )
+ : [],
+ []
+ );
+
+ const labels: string[] = [];
+ const series = assets.map((item) => {
+ labels.push(
+ `${item.token.symbol}${getAssetPrefix(item).toUpperCase()}`
+ );
+ return Number(item.token.balanceUSD);
+ });
+ const othersBalance =
+ series.length > DONUT_TOKENS_COUNT
+ ? series.splice(DONUT_TOKENS_COUNT).reduce((n, p) => n + p)
+ : 0;
+ const donutData = {
+ options: {
+ chart: {
+ id: "portfolio-donut",
+ sparkline: {
+ enabled: false,
+ },
+ background: "transparent",
+ redrawOnWindowResize: true,
+ height: "500px",
+ },
+ labels: [
+ ...labels.slice(0, DONUT_TOKENS_COUNT),
+ ...(othersBalance ? ["Others"] : []),
+ ],
+ dataLabels: {
+ enabled: false,
+ },
+ tooltip: {
+ y: {
+ formatter(value: number) {
+ return `$${new Intl.NumberFormat("en-US", {
+ maximumFractionDigits: 2,
+ }).format(value)}`;
+ },
+ },
+ },
+ plotOptions: {
+ pie: {
+ donut: {
+ customScale: 1.5,
+ size: 170,
+ background: "transparent",
+ },
+ },
+ },
+ stroke: {
+ colors: undefined,
+ },
+ legend: {
+ show: true,
+ fontSize: "11px",
+ position: "left",
+ offsetX: 0,
+ offsetY: 0,
+ height: 500,
+ labels: {
+ colors: [themeColors.primaryVariant100],
+ useSeriesColors: false,
+ },
+ markers: {
+ radius: 3,
+ },
+ onItemHover() {},
+ formatter(
+ label: string,
+ opts: {
+ w: {
+ globals: {
+ series: number[];
+ };
+ };
+ seriesIndex: number;
+ }
+ ) {
+ const percent =
+ (100 * opts.w.globals.series[opts.seriesIndex]) /
+ opts.w.globals.series.reduce((a, b) => a + b);
+ return `
+
+ ${label}
+ ${percent.toFixed(0)}%
+ `;
+ },
+ },
+ colors: makeRepeated(ITEM_COLORS, assets.length),
+ },
+ series: [
+ ...series.slice(0, DONUT_TOKENS_COUNT),
+ ...(othersBalance ? [othersBalance] : []),
+ ],
+ };
+
+ return (
+
+ {donutData.series && (
+
+ )}
+
+ );
+};
+export default PortfolioChart;
diff --git a/packages/frontend/src/mobile-components/portfolio/mockData.ts b/packages/frontend/src/mobile-components/portfolio/mockData.ts
new file mode 100644
index 00000000..144b7691
--- /dev/null
+++ b/packages/frontend/src/mobile-components/portfolio/mockData.ts
@@ -0,0 +1,177 @@
+import { TPortfolioDataForAddress } from "src/components/portfolio/types";
+
+export const portfolioData: TPortfolioDataForAddress = {
+ assets: [
+ {
+ key: "2216096905",
+ address: "0x2874c4e9cb5f183ef3d8adfa6d6bbd584dc67842",
+ network: "avalanche",
+ updatedAt: "2024-03-03T09:08:45.405Z",
+ token: {
+ id: "47",
+ address: "0x0000000000000000000000000000000000000000",
+ name: "AVAX",
+ symbol: "AVAX",
+ decimals: 18,
+ coingeckoId: "avalanche-2",
+ hide: false,
+ canExchange: true,
+ updatedAt: "2024-03-04T07:10:32.643Z",
+ createdAt: "2022-05-18T12:54:47.542Z",
+ price: 42.63,
+ networkId: 3,
+ status: "approved",
+ totalSupply: "435942308.442695",
+ dailyVolume: 621105842.2333122,
+ verified: true,
+ holdersEnabled: true,
+ marketCap: 16035840022.326565,
+ priceUpdatedAt: "2024-03-04T07:10:32.643Z",
+ externallyVerified: false,
+ label: "avax",
+ balance: 0.0021,
+ balanceUSD: 0.089523,
+ balanceRaw: "2100000000000000",
+ tokenImage:
+ "https://storage.googleapis.com/zapper-fi-assets/tokens/avalanche/0x0000000000000000000000000000000000000000.png",
+ },
+ },
+ {
+ key: "921602654",
+ address: "0x2874c4e9cb5f183ef3d8adfa6d6bbd584dc67842",
+ network: "optimism",
+ updatedAt: "2024-03-03T09:08:45.244Z",
+ token: {
+ id: "78",
+ address: "0x0000000000000000000000000000000000000000",
+ name: "Ether",
+ symbol: "ETH",
+ decimals: 18,
+ coingeckoId: "ethereum",
+ hide: false,
+ canExchange: true,
+ updatedAt: "2024-03-04T07:10:32.643Z",
+ createdAt: "2022-05-18T12:54:47.542Z",
+ price: 3463.77,
+ networkId: 11,
+ status: "approved",
+ totalSupply: "36811.197214188697856699",
+ dailyVolume: 17641941138.93259,
+ verified: true,
+ holdersEnabled: true,
+ marketCap: 416110233226.25,
+ priceUpdatedAt: "2024-03-04T07:10:32.643Z",
+ externallyVerified: false,
+ label: "eth",
+ balance: 0.008459516477201893,
+ balanceUSD: 29.3018193882376,
+ balanceRaw: "8459516477201892",
+ tokenImage:
+ "https://storage.googleapis.com/zapper-fi-assets/tokens/optimism/0x0000000000000000000000000000000000000000.png",
+ },
+ },
+ {
+ key: "3612627573",
+ address: "0x2874c4e9cb5f183ef3d8adfa6d6bbd584dc67842",
+ network: "ethereum",
+ updatedAt: "2024-03-03T09:08:45.213Z",
+ token: {
+ id: "3067",
+ address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
+ name: "Wrapped Ether",
+ symbol: "WETH",
+ decimals: 18,
+ coingeckoId: "weth",
+ hide: false,
+ canExchange: true,
+ updatedAt: "2024-03-04T07:10:32.643Z",
+ createdAt: "2022-05-18T12:54:47.695Z",
+ price: 3463.77,
+ networkId: 1,
+ status: "approved",
+ totalSupply: "3081838.685889420235408401",
+ dailyVolume: 553589763.6055393,
+ verified: false,
+ holdersEnabled: true,
+ marketCap: 0,
+ priceUpdatedAt: "2024-03-04T07:10:32.643Z",
+ externallyVerified: true,
+ label: "WETH",
+ balance: 30.56325,
+ balanceUSD: 105864.0684525,
+ balanceRaw: "30563250000000000000",
+ tokenImage:
+ "https://storage.googleapis.com/zapper-fi-assets/tokens/ethereum/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2.png",
+ },
+ },
+ {
+ key: "80289008",
+ address: "0x2874c4e9cb5f183ef3d8adfa6d6bbd584dc67842",
+ network: "ethereum",
+ updatedAt: "2024-03-03T09:08:45.213Z",
+ token: {
+ id: "1496",
+ address: "0x0000000000000000000000000000000000000000",
+ name: "Ether",
+ symbol: "ETH",
+ decimals: 18,
+ coingeckoId: "ethereum",
+ hide: false,
+ canExchange: true,
+ updatedAt: "2024-03-04T07:10:32.643Z",
+ createdAt: "2022-05-18T12:54:47.695Z",
+ price: 3463.77,
+ networkId: 1,
+ status: "approved",
+ totalSupply: "122373866.2178",
+ dailyVolume: 17641941138.93259,
+ verified: true,
+ holdersEnabled: true,
+ marketCap: 416110233226.25,
+ priceUpdatedAt: "2024-03-04T07:10:32.643Z",
+ externallyVerified: false,
+ label: "eth",
+ balance: 37.68335669707697,
+ balanceUSD: 130526.48042663428,
+ balanceRaw: "37683356697076965333",
+ tokenImage:
+ "https://storage.googleapis.com/zapper-fi-assets/tokens/ethereum/0x0000000000000000000000000000000000000000.png",
+ },
+ },
+ {
+ key: "51396930",
+ address: "0x2874c4e9cb5f183ef3d8adfa6d6bbd584dc67842",
+ network: "ethereum",
+ updatedAt: "2024-03-02T23:39:41.598Z",
+ token: {
+ id: "2626",
+ address: "0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce",
+ name: "SHIBA INU",
+ symbol: "SHIB",
+ decimals: 18,
+ coingeckoId: "shiba-inu",
+ hide: false,
+ canExchange: true,
+ updatedAt: "2024-03-04T07:10:32.643Z",
+ createdAt: "2022-05-18T12:54:47.695Z",
+ price: 0.00002693,
+ networkId: 1,
+ status: "approved",
+ totalSupply: "999982367742850.863791106162366397",
+ dailyVolume: 4359038452.289908,
+ verified: false,
+ holdersEnabled: true,
+ marketCap: 15957709021.025589,
+ priceUpdatedAt: "2024-03-04T07:10:32.643Z",
+ externallyVerified: true,
+ label: "Shiba Inu",
+ balance: 434877.1472059143,
+ balanceUSD: 11.711241574255274,
+ balanceRaw: "434877147205914300000000",
+ tokenImage:
+ "https://storage.googleapis.com/zapper-fi-assets/tokens/ethereum/0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce.png",
+ },
+ },
+ ],
+ totalValue: 236431.6514630968,
+};
diff --git a/packages/frontend/src/mobile-pages/portfolio-holdings.tsx b/packages/frontend/src/mobile-pages/portfolio-holdings.tsx
index 23fd9f67..49241413 100644
--- a/packages/frontend/src/mobile-pages/portfolio-holdings.tsx
+++ b/packages/frontend/src/mobile-pages/portfolio-holdings.tsx
@@ -1,19 +1,17 @@
-import { FC, useState } from "react";
+import { FC, useMemo, useState } from "react";
import { Dialog, DropdownSelect } from "@alphaday/ui-kit";
import { IonPage } from "@ionic/react";
import { useHistory } from "react-router";
import { useKeyPress } from "src/api/hooks";
-import {
- toggleShowBalance as toggleShowBalanceInStore,
- toggleShowAllAssets as toggleShowAllAssetsInStore,
- selectShowAllAssets,
- setWidgetHeight,
-} from "src/api/store";
+import { toggleShowBalance as toggleShowBalanceInStore } from "src/api/store";
import { useAppDispatch } from "src/api/store/hooks";
+
+import { ReactComponent as ArrowUpSVG } from "src/assets/icons/arrow-up.svg";
import { ReactComponent as PlusSVG } from "src/assets/icons/plus.svg";
import { ReactComponent as ShowSVG } from "src/assets/icons/shown.svg";
+
+import PortfolioChart from "src/mobile-components/portfolio/PortfolioChart";
import WalletConnectionOptions from "src/mobile-components/portfolio/WalletConnectionOptions";
-import { useAccount } from "wagmi";
const UserWalletsInfo: FC<{ toggleBalance: () => void }> = ({
toggleBalance,
@@ -37,7 +35,7 @@ const UserWalletsInfo: FC<{ toggleBalance: () => void }> = ({
$12,555
-
+
+58.54 (1.4%) /
24h
@@ -102,6 +100,22 @@ const PortfolioHoldings: React.FC = () => {
setShowDialog(true);
}}
/>
+
+
+
+ Balance
+
+
+
+ {" "}
+ (1.4%)
+ {" "}
+ / 24h
+
+
+
$12,555
+
+