Merge branch 'feat/evm' into fix/persist-after-address-deletion

# Conflicts:
#	src/domains/wallet/pages/WalletDetails/components/AddressesSidePanel/AddressesSidePanel.tsx

.github/workflows/test.yml

@@ -855,9 +855,9 @@ jobs:
             - name: Test
               uses: nick-invision/retry@v2
               env:
-                  COVERAGE_THRESHOLD_LINES: 96.64
-                  COVERAGE_THRESHOLD_FUNCTIONS: 98.02
-                  COVERAGE_THRESHOLD_STATEMENTS: 96.68
+                  COVERAGE_THRESHOLD_LINES: 96.49
+                  COVERAGE_THRESHOLD_FUNCTIONS: 97.51
+                  COVERAGE_THRESHOLD_STATEMENTS: 96.54
                   COVERAGE_THRESHOLD_BRANCHES: 92.27
                   COVERAGE_INCLUDE_PATH: src/domains/wallet
               with:

src/app/assets/svg/arrows/index.ts

@@ -24,6 +24,7 @@ import DoubleChevronLeft from "./double-chevron-left.svg?react";
 import DoubleChevronLeftSmall from "./double-chevron-left-small.svg?react";
 import DoubleChevronRight from "./double-chevron-right.svg?react";
 import DoubleChevronRightSmall from "./double-chevron-right-small.svg?react";
+import DoubleChevron from "./double-chevron.svg?react";
 
 export const ArrowIcons: any = {
 	ArrowDown,
@@ -46,6 +47,7 @@ export const ArrowIcons: any = {
 	ChevronUpSmall,
 	DoubleArrowDashed,
 	DoubleArrowRight,
+	DoubleChevron,
 	DoubleChevronLeft,
 	DoubleChevronLeftSmall,
 	DoubleChevronRight,

src/app/contexts/Configuration/Configuration.tsx

@@ -50,6 +50,7 @@ export const ConfigurationProvider = ({ children, defaultConfiguration }: Proper
 
 		profileIsSyncingWallets: false,
 		restoredProfiles: [],
+		selectedAddresses: [],
 		serverStatus: defaultServerStatus(),
 		...defaultConfiguration,
 	});

src/app/i18n/common/i18n.ts

@@ -26,6 +26,7 @@ export const translations = {
 	APP_NAME: "<strong>ARK</strong>Vault",
 	ARK: "ARK",
 	ARKVAULT: "ARK Vault",
+	ARK_BALANCE: "Ark Balance",
 	ASSET: "Asset",
 	ASSETS: "Assets",
 	ASSET_TYPE: "Asset Type",
@@ -245,9 +246,11 @@ export const translations = {
 	MOST_POPULAR: "Most popular",
 	MULTIPAYMENTS: "Multipayments",
 	MULTIPLE: "Multiple",
+	MULTIPLE_ADDRESSES: "Multiple addresses ({{count}})",
 	MULTISIG: "Multisig",
 	MULTISIGNATURE: "Multisignature",
 	MY_ADDRESS: "My Address",
+	MY_VOTES: "My Votes",
 	MY_WALLET: "My Wallet",
 	NAME: "Name",
 	NETHASH: "Nethash",
@@ -385,6 +388,7 @@ export const translations = {
 	SUBMIT: "Submit",
 	SUCCESS: "Success",
 	SUPPORT: "Support",
+	SWITCH_TO_SINGLE_VIEW: "Switch to single address view for options",
 	SYMBOL: "Symbol",
 	TEST_NETWORK: "Test Network",
 	THEME: "Theme",

src/domains/dashboard/pages/Dashboard/Dashboard.Empty.blocks.tsx

@@ -60,36 +60,37 @@ export const DashboardSetupAddressCard = ({
 	image,
 	buttonText,
 	onClick,
-	variant = "primary",
 }: {
 	title: string;
 	description: string;
 	image: string;
 	buttonText: string;
 	onClick: () => void;
-	variant?: "primary" | "secondary";
 }) => (
-	<div
-		className={cn("rounded border border-theme-secondary-300 p-4 dark:border-theme-dark-700 md:rounded-xl md:p-8", {
-			"bg-theme-primary-100 dark:bg-theme-dark-800": variant === "primary",
-		})}
+	<button
+		className={cn(
+			"group rounded border border-theme-secondary-300 bg-white p-4 transition-all hover:border-theme-primary-50 hover:bg-theme-primary-50 dark:border-theme-dark-700 dark:bg-theme-dark-900 dark:hover:border-theme-dark-950 dark:hover:bg-theme-dark-950 md:rounded-xl md:p-8",
+		)}
+		type="button"
+		onClick={onClick}
 	>
 		<h3
-			className={cn("md:leading-7.5 mb-2 text-lg font-semibold leading-4 md:text-2xl", {
-				"text-theme-primary-900 dark:text-theme-dark-50": variant === "primary",
-				"text-theme-secondary-900 dark:text-theme-dark-50": variant === "secondary",
-			})}
+			className={cn(
+				"md:leading-7.5 mb-2 text-left text-lg font-semibold leading-4 text-theme-secondary-900 group-hover:text-theme-primary-900 dark:text-theme-dark-50 dark:group-hover:text-theme-dark-50 md:text-2xl",
+			)}
 		>
 			{title}
 		</h3>
-		<p className="mb-6 text-sm leading-5 text-theme-secondary-700 dark:text-theme-dark-200">{description}</p>
+		<p className="mb-6 text-left text-sm leading-5 text-theme-secondary-700 dark:text-theme-dark-200">
+			{description}
+		</p>
 		<div className="mx-auto my-6 flex max-w-56 justify-center md:max-w-full">
 			<Image name={image} />
 		</div>
-		<Button variant={variant} className="w-full" onClick={onClick}>
+		<div className="w-full rounded bg-theme-primary-100 py-3 text-base font-semibold leading-5 text-theme-primary-600 transition-all duration-100 ease-linear group-hover:bg-theme-primary-800 group-hover:text-white green:group-hover:bg-theme-primary-700 dark:border dark:border-theme-dark-600 dark:bg-theme-secondary-800 dark:text-theme-secondary-200 dark:group-hover:border-theme-dark-navy-700 dark:group-hover:bg-theme-dark-navy-700">
 			{buttonText}
-		</Button>
-	</div>
+		</div>
+	</button>
 );
 
 export const DashboardSetupAddressCards = () => {
@@ -103,22 +104,19 @@ export const DashboardSetupAddressCards = () => {
 			</div>
 
 			<div className="flex items-center space-x-3">
-				<DashboardSetupAddressCard
-					image="ImportAddress"
-					title={t("COMMON.IMPORT_ADDRESS")}
-					description={t("DASHBOARD.WALLET_CONTROLS.IMPORT_ADDRESS_DESCRIPTION")}
-					buttonText={t("COMMON.IMPORT")}
-					onClick={handleImport}
-					variant="secondary"
-				/>
-
 				<DashboardSetupAddressCard
 					image="CreateAddress"
 					title={t("COMMON.CREATE_ADDRESS")}
 					description={t("DASHBOARD.WALLET_CONTROLS.CREATE_ADDRESS_DESCRIPTION")}
 					buttonText={t("COMMON.CREATE")}
 					onClick={handleCreate}
-					variant="primary"
+				/>
+				<DashboardSetupAddressCard
+					image="ImportAddress"
+					title={t("COMMON.IMPORT_ADDRESS")}
+					description={t("DASHBOARD.WALLET_CONTROLS.IMPORT_ADDRESS_DESCRIPTION")}
+					buttonText={t("COMMON.IMPORT")}
+					onClick={handleImport}
 				/>
 			</div>
 		</div>

src/domains/dashboard/pages/Dashboard/Dashboard.tsx

@@ -11,9 +11,10 @@ import { TransactionDetailModal } from "@/domains/transaction/components/Transac
 import { Transactions } from "@/domains/transaction/components/Transactions";
 import { Tab, TabList, Tabs, TabScroll } from "@/app/components/Tabs";
 import { TabId } from "@/app/components/Tabs/useTab";
-import { WalletHeader } from "@/domains/wallet/pages/WalletDetails/components/WalletHeader";
 import { WalletVote } from "@/domains/wallet/pages/WalletDetails/components";
 import { DashboardEmpty } from "./Dashboard.Empty";
+import { PortfolioHeader } from "@/domains/portfolio/components/PortfolioHeader";
+import { usePortfolio } from "@/domains/portfolio/hooks/use-portfolio";
 
 export const Dashboard = () => {
 	const [transactionModalItem, setTransactionModalItem] = useState<DTO.ExtendedConfirmedTransactionData>();
@@ -26,57 +27,69 @@ export const Dashboard = () => {
 
 	const { env } = useEnvironmentContext();
 	const activeProfile = useActiveProfile();
-	const activeWallet = activeProfile.wallets().first() as Contracts.IReadWriteWallet | undefined;
 	const { profileIsSyncing } = useConfiguration();
 
-	const networkAllowsVoting = useMemo(() => activeWallet?.network().allowsVoting(), [activeWallet]);
+	const { selectedWallets, selectedWallet } = usePortfolio({ profile: activeProfile });
 
 	const handleVoteButton = (filter?: string) => {
+		if (selectedWallets.length > 1) {
+			return history.push({
+				pathname: `/profiles/${activeProfile.id()}/votes`,
+			});
+		}
+
+		const wallet = selectedWallets.at(0);
 		/* istanbul ignore else -- @preserve */
 		if (filter) {
 			return history.push({
-				pathname: `/profiles/${activeProfile.id()}/wallets/${activeWallet?.id()}/votes`,
+				pathname: `/profiles/${activeProfile.id()}/wallets/${wallet?.id()}/votes`,
 				search: `?filter=${filter}`,
 			});
 		}
 
-		history.push(`/profiles/${activeProfile.id()}/wallets/${activeWallet?.id()}/votes`);
+		history.push(`/profiles/${activeProfile.id()}/wallets/${wallet?.id()}/votes`);
 	};
 
 	const [mobileActiveTab, setMobileActiveTab] = useState<TabId>("transactions");
-
 	const [isLoadingVotes, setIsLoadingVotes] = useState(true);
 
 	const [votes, setVotes] = useState<Contracts.VoteRegistryItem[]>([]);
+	const networkAllowsVoting = useMemo(() => selectedWallet?.network().allowsVoting(), [selectedWallet]);
 
 	useEffect(() => {
-		const syncVotes = async () => {
+		const syncVotes = async (wallet) => {
 			try {
-				if (!activeWallet) {
+				if (!wallet) {
 					return;
 				}
+				setIsLoadingVotes(true);
 
-				await env.delegates().sync(activeProfile, activeWallet.coinId(), activeWallet.networkId());
-				await activeWallet.synchroniser().votes();
+				await env.delegates().sync(activeProfile, wallet.coinId(), wallet.networkId());
+				await wallet.synchroniser().votes();
 
-				setVotes(activeWallet.voting().current());
+				setVotes(wallet.voting().current());
 			} catch {
 				// TODO: Retry sync if error code is greater than 499. Needs status code number from sdk.
 			}
 
 			setIsLoadingVotes(false);
 		};
 
-		syncVotes();
-	}, [activeWallet, env, activeProfile]);
+		if (!selectedWallet) {
+			setIsLoadingVotes(false);
+			return;
+		}
+
+		syncVotes(selectedWallet);
+	}, [selectedWallet, env, activeProfile]);
 
 	useEffect(() => {
 		if (!isUpdatingTransactions) {
 			setIsUpdatingWallet(false);
 		}
 	}, [isUpdatingTransactions]);
 
-	if (!activeWallet) {
+	if (activeProfile.wallets().count() === 0) {
 		if (activeProfile.status().isRestored() && !profileIsSyncing) {
 			return (
 				<Page pageTitle={t("COMMON.WELCOME")}>
@@ -89,14 +102,13 @@ export const Dashboard = () => {
 
 	return (
 		<>
-			<Page pageTitle={activeWallet.address()}>
+			<Page pageTitle={selectedWallet?.address()}>
 				<Section
 					className="pb-0 first:pt-0 md:px-0 md:pb-4 xl:mx-auto"
 					innerClassName="m-0 p-0 md:px-0 md:mx-auto"
 				>
-					<WalletHeader
+					<PortfolioHeader
 						profile={activeProfile}
-						wallet={activeWallet}
 						votes={votes}
 						handleVotesButtonClick={handleVoteButton}
 						isLoadingVotes={isLoadingVotes}
@@ -133,7 +145,7 @@ export const Dashboard = () => {
 						<WalletVote
 							isLoadingVotes={isLoadingVotes}
 							votes={votes}
-							wallet={activeWallet}
+							wallet={selectedWallets.at(0)}
 							onButtonClick={handleVoteButton}
 						/>
 					</Section>
@@ -147,7 +159,7 @@ export const Dashboard = () => {
 					>
 						<Transactions
 							profile={activeProfile}
-							wallets={[activeWallet]}
+							wallets={selectedWallets}
 							isLoading={profileIsSyncing}
 							isUpdatingWallet={isUpdatingWallet}
 							onLoading={setIsUpdatingTransactions}

src/domains/portfolio/components/PortfolioHeader/PortfolioHeader.blocks.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Address } from "@/app/components/Address";
+import { useWalletAlias } from "@/app/hooks";
+import { Contracts } from "@ardenthq/sdk-profiles";
+import { useTranslation } from "react-i18next";
+
+export const ViewingAddressInfo = ({
+	profile,
+	wallets,
+}: {
+	profile: Contracts.IProfile;
+	wallets: Contracts.IReadWriteWallet[];
+}) => {
+	const { t } = useTranslation();
+	const { getWalletAlias } = useWalletAlias();
+	const firstWallet = wallets.at(0);
+
+	if (wallets.length === 1 && firstWallet) {
+		const { alias } = getWalletAlias({
+			address: firstWallet.address(),
+			network: firstWallet.network(),
+			profile,
+		});
+
+		return (
+			<Address
+				alignment="center"
+				walletName={alias}
+				truncateOnTable
+				maxNameChars={20}
+				walletNameClass="text-theme-primary-600 text-sm leading-[17px] sm:text-base sm:leading-5 dark:textdark-theme-dark-navy-400"
+			/>
+		);
+	}
+
+	return (
+		<div className="dark:textdark-theme-dark-navy-400 text-base text-sm font-semibold leading-[17px] text-theme-primary-600 sm:text-base sm:leading-5">
+			{t("COMMON.MULTIPLE_ADDRESSES", {
+				count: wallets.length,
+			})}
+		</div>
+	);
+};