[🧠 Smart Account] Batch sign UI + upgrade/downgrade fee editing

apps/extension/src/hooks/use-unmount-promise.ts

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { useUnmount } from "./use-unmount";
+
+export function useUnmountPromise() {
+  const [unmountPromise] = useState(() => {
+    let resolver: () => void;
+    const promise = new Promise<void>((resolve) => {
+      resolver = resolve;
+    });
+    return { promise, resolver: resolver! };
+  });
+
+  useUnmount(() => {
+    unmountPromise.resolver();
+  });
+
+  return unmountPromise;
+}

apps/extension/src/languages/en.json

@@ -430,10 +430,6 @@
   "page.wallet.smart-account.confirm.delegator": "Delegation Contract",
   "page.wallet.smart-account.confirm.network": "Network",
   "page.wallet.smart-account.confirm.account": "Account",
-  "page.wallet.smart-account.confirm.fee": "Network Fee",
-  "page.wallet.smart-account.confirm.fee.insufficient": "Insufficient balance for network fee.",
-  "page.wallet.smart-account.confirm.fee.failed": "Unable to estimate",
-  "page.wallet.smart-account.confirm.fee.retry": "Tap to retry",
 
   "page.wallet.change-name.previous-name-input-label": "Previous Wallet Name",
   "page.wallet.change-name.new-name-input-label": "New Wallet Name",
@@ -547,6 +543,26 @@
   "page.sign.ethereum.message": "Signing Message",
   "page.sign.ethereum.message.title": "Sign Message",
   "page.sign.ethereum.eip-712.title": "Sign Typed Data",
+  "page.sign.ethereum.batch.title": "Confirm Transaction",
+  "page.sign.ethereum.batch.section-title": "Transaction Summary",
+  "page.sign.ethereum.batch.upgrade-notice.title": "Smart Account upgrade is included in this transaction",
+  "page.sign.ethereum.batch.calls.item": "Transaction {index}",
+  "page.sign.ethereum.batch.calls.to": "To",
+  "page.sign.ethereum.batch.calls.value": "Value",
+  "page.sign.ethereum.batch.calls.data": "Data",
+  "page.sign.ethereum.batch.calls.contract-deploy": "Contract Deploy",
+  "page.sign.ethereum.batch.calls.intent.transfer": "Transfer",
+  "page.sign.ethereum.batch.calls.intent.approve": "Approve",
+  "page.sign.ethereum.batch.calls.intent.swap": "Swap",
+  "page.sign.ethereum.batch.calls.intent.deposit": "Deposit",
+  "page.sign.ethereum.batch.calls.intent.withdraw": "Withdraw",
+  "page.sign.ethereum.batch.summary.title": "Batch Transaction",
+  "page.sign.ethereum.batch.summary.desc": "{count} transactions will be bundled together",
+  "page.sign.ethereum.batch.detail.account": "Account",
+  "page.sign.ethereum.batch.detail.requester": "Requester",
+  "page.sign.ethereum.batch.detail.network": "Network",
+  "page.sign.ethereum.batch.advanced.title": "Advanced Details",
+  "page.sign.ethereum.batch.advanced.nonce": "Nonce",
 
   "page.sign.starknet.tx.calls": "Calls",
 

apps/extension/src/languages/ko.json

@@ -424,10 +424,6 @@
   "page.wallet.smart-account.confirm.delegator": "위임 컨트랙트",
   "page.wallet.smart-account.confirm.network": "네트워크",
   "page.wallet.smart-account.confirm.account": "계정",
-  "page.wallet.smart-account.confirm.fee": "네트워크 수수료",
-  "page.wallet.smart-account.confirm.fee.insufficient": "네트워크 수수료를 위한 잔액이 부족합니다.",
-  "page.wallet.smart-account.confirm.fee.failed": "추정 불가",
-  "page.wallet.smart-account.confirm.fee.retry": "탭하여 재시도",
 
   "page.wallet.change-name.previous-name-input-label": "현재 지갑 이름",
   "page.wallet.change-name.new-name-input-label": "새로운 지갑 이름",
@@ -539,6 +535,26 @@
   "page.sign.ethereum.message": "서명할 메시지",
   "page.sign.ethereum.message.title": "메시지 서명",
   "page.sign.ethereum.eip-712.title": "타입 데이터 서명",
+  "page.sign.ethereum.batch.title": "트랜잭션 확인",
+  "page.sign.ethereum.batch.section-title": "트랜잭션 요약",
+  "page.sign.ethereum.batch.upgrade-notice.title": "이 트랜잭션에 스마트 어카운트 업그레이드가 포함됩니다",
+  "page.sign.ethereum.batch.calls.item": "트랜잭션 {index}",
+  "page.sign.ethereum.batch.calls.to": "수신",
+  "page.sign.ethereum.batch.calls.value": "금액",
+  "page.sign.ethereum.batch.calls.data": "데이터",
+  "page.sign.ethereum.batch.calls.contract-deploy": "컨트랙트 배포",
+  "page.sign.ethereum.batch.calls.intent.transfer": "전송",
+  "page.sign.ethereum.batch.calls.intent.approve": "승인",
+  "page.sign.ethereum.batch.calls.intent.swap": "스왑",
+  "page.sign.ethereum.batch.calls.intent.deposit": "예치",
+  "page.sign.ethereum.batch.calls.intent.withdraw": "인출",
+  "page.sign.ethereum.batch.summary.title": "배치 트랜잭션",
+  "page.sign.ethereum.batch.summary.desc": "{count}개의 트랜잭션이 함께 실행됩니다",
+  "page.sign.ethereum.batch.detail.account": "계정",
+  "page.sign.ethereum.batch.detail.requester": "요청자",
+  "page.sign.ethereum.batch.detail.network": "네트워크",
+  "page.sign.ethereum.batch.advanced.title": "상세 정보",
+  "page.sign.ethereum.batch.advanced.nonce": "논스",
 
   "page.sign.starknet.tx.calls": "실행할 호출",
 

apps/extension/src/languages/zh-cn.json

@@ -394,10 +394,6 @@
   "page.wallet.smart-account.confirm.delegator": "委托合约",
   "page.wallet.smart-account.confirm.network": "网络",
   "page.wallet.smart-account.confirm.account": "账户",
-  "page.wallet.smart-account.confirm.fee": "网络费用",
-  "page.wallet.smart-account.confirm.fee.insufficient": "余额不足以支付网络费用。",
-  "page.wallet.smart-account.confirm.fee.failed": "无法估算",
-  "page.wallet.smart-account.confirm.fee.retry": "点击重试",
 
   "page.wallet.change-name.previous-name-input-label": "原钱包名称",
   "page.wallet.change-name.new-name-input-label": "新钱包名称",
@@ -501,6 +497,26 @@
   "page.sign.ethereum.message": "签署信息",
   "page.sign.ethereum.message.title": "标志信息",
   "page.sign.ethereum.eip-712.title": "签署键入数据",
+  "page.sign.ethereum.batch.title": "确认交易",
+  "page.sign.ethereum.batch.section-title": "交易摘要",
+  "page.sign.ethereum.batch.upgrade-notice.title": "此交易包含智能账户升级",
+  "page.sign.ethereum.batch.calls.item": "交易 {index}",
+  "page.sign.ethereum.batch.calls.to": "接收",
+  "page.sign.ethereum.batch.calls.value": "金额",
+  "page.sign.ethereum.batch.calls.data": "数据",
+  "page.sign.ethereum.batch.calls.contract-deploy": "合约部署",
+  "page.sign.ethereum.batch.calls.intent.transfer": "转账",
+  "page.sign.ethereum.batch.calls.intent.approve": "批准",
+  "page.sign.ethereum.batch.calls.intent.swap": "兑换",
+  "page.sign.ethereum.batch.calls.intent.deposit": "存入",
+  "page.sign.ethereum.batch.calls.intent.withdraw": "提取",
+  "page.sign.ethereum.batch.summary.title": "批量交易",
+  "page.sign.ethereum.batch.summary.desc": "{count}笔交易将被打包执行",
+  "page.sign.ethereum.batch.detail.account": "账户",
+  "page.sign.ethereum.batch.detail.requester": "请求者",
+  "page.sign.ethereum.batch.detail.network": "网络",
+  "page.sign.ethereum.batch.advanced.title": "高级详情",
+  "page.sign.ethereum.batch.advanced.nonce": "Nonce",
 
   "page.sign.bitcoin.transaction.data": "交易数据",
   "page.sign.bitcoin.transaction.input": "输入",

apps/extension/src/pages/sign/ethereum/views/sign-batch-view/advanced-details.tsx

@@ -0,0 +1,125 @@
+import React, { FunctionComponent, useState } from "react";
+import { useIntl } from "react-intl";
+import styled from "styled-components";
+import { DSColor, DSTypography } from "@keplr-wallet/design-system";
+import { Buffer } from "buffer/";
+
+export const AdvancedDetails: FunctionComponent<{
+  signingDataBuff: Buffer;
+  nonce: number;
+}> = ({ signingDataBuff, nonce }) => {
+  const intl = useIntl();
+  const [expanded, setExpanded] = useState(false);
+
+  const rawData = (() => {
+    try {
+      return JSON.stringify(
+        JSON.parse(Buffer.from(signingDataBuff).toString("utf8")),
+        null,
+        2
+      );
+    } catch {
+      return Buffer.from(signingDataBuff).toString("utf8");
+    }
+  })();
+
+  return (
+    <Card>
+      <Header onClick={() => setExpanded((v) => !v)}>
+        <DSTypography
+          size="textXxs"
+          weight="medium"
+          color={DSColor.typography.secondary}
+        >
+          {intl.formatMessage({
+            id: "page.sign.ethereum.batch.advanced.title",
+          })}
+        </DSTypography>
+        <Chevron $open={expanded}>▾</Chevron>
+      </Header>
+
+      <CollapseOuter $expanded={expanded}>
+        <CollapseInner>
+          <Body>
+            <InfoRow>
+              <DSTypography
+                size="textXxs"
+                weight="regular"
+                color={DSColor.typography.secondary}
+              >
+                {intl.formatMessage({
+                  id: "page.sign.ethereum.batch.advanced.nonce",
+                })}
+              </DSTypography>
+              <DSTypography size="textXxs" weight="regular">
+                {nonce}
+              </DSTypography>
+            </InfoRow>
+            <RawDataBlock>{rawData}</RawDataBlock>
+          </Body>
+        </CollapseInner>
+      </CollapseOuter>
+    </Card>
+  );
+};
+
+const Card = styled.div`
+  border-radius: 0.375rem;
+  background-color: ${DSColor.background.surface.elevated};
+  overflow: hidden;
+`;
+
+const Header = styled.button`
+  width: 100%;
+  padding: 0.75rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+`;
+
+const CollapseOuter = styled.div<{ $expanded: boolean }>`
+  display: grid;
+  grid-template-rows: ${(p) => (p.$expanded ? "1fr" : "0fr")};
+  transition: grid-template-rows 0.22s ease;
+`;
+
+const CollapseInner = styled.div`
+  overflow: hidden;
+`;
+
+const Body = styled.div`
+  padding: 0 1rem 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const InfoRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const RawDataBlock = styled.pre`
+  font-size: 0.625rem;
+  line-height: 1.4;
+  color: ${DSColor.typography.tertiary};
+  background-color: ${DSColor.background.surface.ground};
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  margin: 0 0 0.75rem 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 10rem;
+  overflow-y: auto;
+`;
+
+const Chevron = styled.span<{ $open: boolean }>`
+  transform: ${(p) => (p.$open ? "rotate(0deg)" : "rotate(-90deg)")};
+  transition: transform 0.15s ease;
+  font-size: 0.625rem;
+  color: ${DSColor.typography.secondary};
+`;

apps/extension/src/pages/sign/ethereum/views/sign-batch-view/batch-detail-card.tsx

@@ -0,0 +1,111 @@
+import React, { FunctionComponent } from "react";
+import { useIntl } from "react-intl";
+import styled from "styled-components";
+import { DSColor, DSTypography } from "@keplr-wallet/design-system";
+import { XAxis, YAxis } from "../../../../../components/axis";
+import { ChainImageFallback } from "../../../../../components/image";
+import type { IModularChainInfoImpl } from "@keplr-wallet/stores";
+
+export const BatchDetailCard: FunctionComponent<{
+  accountName: string;
+  hexAddress: string;
+  origin: string;
+  chainName: string;
+  chainInfo: IModularChainInfoImpl;
+}> = ({ accountName, hexAddress, origin, chainName, chainInfo }) => {
+  const intl = useIntl();
+
+  const originDisplay = (() => {
+    try {
+      return new URL(origin).hostname;
+    } catch {
+      return origin;
+    }
+  })();
+
+  const truncatedAddress = hexAddress
+    ? `${hexAddress.slice(0, 10)}...${hexAddress.slice(-8)}`
+    : "";
+
+  return (
+    <Card>
+      <YAxis gap="0.625rem">
+        <InfoRow>
+          <Label>
+            {intl.formatMessage({
+              id: "page.sign.ethereum.batch.detail.account",
+            })}
+          </Label>
+          <YAxis alignX="right">
+            <DSTypography size="textXxs" weight="medium">
+              {accountName}
+            </DSTypography>
+            {truncatedAddress && (
+              <DSTypography
+                size="textXxs"
+                weight="regular"
+                color={DSColor.typography.secondary}
+                style={{ fontFamily: "monospace" }}
+              >
+                {truncatedAddress}
+              </DSTypography>
+            )}
+          </YAxis>
+        </InfoRow>
+        <Divider />
+        <InfoRow>
+          <Label>
+            {intl.formatMessage({
+              id: "page.sign.ethereum.batch.detail.requester",
+            })}
+          </Label>
+          <DSTypography size="textXxs" weight="medium">
+            {originDisplay}
+          </DSTypography>
+        </InfoRow>
+        <Divider />
+        <InfoRow>
+          <Label>
+            {intl.formatMessage({
+              id: "page.sign.ethereum.batch.detail.network",
+            })}
+          </Label>
+          <XAxis alignY="center" gap="0.375rem">
+            <ChainImageFallback chainInfo={chainInfo} size="0.75rem" />
+            <DSTypography size="textXxs" weight="regular">
+              {chainName}
+            </DSTypography>
+          </XAxis>
+        </InfoRow>
+      </YAxis>
+    </Card>
+  );
+};
+
+const Card = styled.div`
+  border-radius: 0.375rem;
+  background-color: ${DSColor.background.surface.elevated};
+  padding: 1rem;
+`;
+
+const Label: FunctionComponent<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <DSTypography
+    size="textXxs"
+    weight="regular"
+    color={DSColor.typography.secondary}
+  >
+    {children}
+  </DSTypography>
+);
+
+const InfoRow = styled(XAxis)`
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Divider = styled.div`
+  height: 1px;
+  background-color: ${DSColor.stroke.separator.primary};
+`;