refactor(wallet): streamline Account component by replacing send butt…

…on with a more integrated button
3Dpass · Jan 23, 2025 · b272110 · b272110
1 parent ef53976
commit b272110
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 21 deletions.
diff --git a/app/components/wallet/Account.client.tsx b/app/components/wallet/Account.client.tsx
@@ -1,10 +1,4 @@
-import {
-	Icon,
-	IconSize,
-	Spinner,
-	SpinnerSize,
-	Tooltip,
-} from "@blueprintjs/core";
+import { Button, Icon, Spinner, SpinnerSize, Tooltip } from "@blueprintjs/core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAccount } from "../../hooks/useAccount";
@@ -84,9 +78,19 @@ export default function Account({ pair }: AccountProps) {
 									title={t("root.lbl_transferable")}
 									fontMono
 									value={
-										<FormattedAmount
-											value={state.balances.availableBalance.toBigInt()}
-										/>
+										<Button
+											minimal
+											small
+											className="p-0 px-1 -mx-1 h-auto font-mono"
+											onClick={() => handleSend()}
+										>
+											<div className="inline-flex items-center justify-start gap-1 text-lg">
+												<FormattedAmount
+													value={state.balances.availableBalance.toBigInt()}
+												/>
+												<Icon icon="send-to" size={10} className="opacity-50" />
+											</div>
+										</Button>
 									}
 								/>
 								<TitledValue
@@ -150,7 +154,6 @@ export default function Account({ pair }: AccountProps) {
 						pair={pair}
 						balances={state.balances}
 						accountLocked={accountLocked}
-						onSend={() => dialogToggle("send")}
 						onSignVerify={() => dialogToggle("sign_verify")}
 						onUnlockFunds={handleUnlockFunds}
 						onLockFunds={() => dialogToggle("lock_funds")}

diff --git a/app/components/wallet/AccountActions.tsx b/app/components/wallet/AccountActions.tsx
@@ -7,7 +7,6 @@ type AccountActionsProps = {
 	pair: KeyringPair;
 	balances: DeriveBalancesAll;
 	accountLocked: boolean;
-	onSend: () => void;
 	onSignVerify: () => void;
 	onUnlockFunds: () => void;
 	onLockFunds: () => void;
@@ -21,7 +20,6 @@ export function AccountActions({
 	pair,
 	balances,
 	accountLocked,
-	onSend,
 	onSignVerify,
 	onUnlockFunds,
 	onLockFunds,
@@ -34,13 +32,6 @@ export function AccountActions({
 
 	return (
 		<div className="grid grid-cols-3 gap-1">
-			<Button
-				className="text-xs"
-				icon="send-to"
-				text={t("root.lbl_btn_send")}
-				onClick={onSend}
-				disabled={accountLocked}
-			/>
 			<Button
 				className="text-xs"
 				icon="endorsed"
@@ -73,7 +64,7 @@ export function AccountActions({
 			{!accountLocked && (
 				<button
 					type="button"
-					className="flex items-center justify-center gap-1 cursor-pointer group bg-transparent border-0 p-0"
+					className="flex min-h-8 items-center justify-center gap-1 cursor-pointer group bg-transparent border-0 p-0"
 					onClick={onIdentity}
 				>
 					{isRegistrar ? (