Fix/wallet issues OK-34910 OK-34875 OK-34849 (#6491)

* fix: data viewer style

* feat: display component assets

* fix: tx content with fee info

* fix: lin

packages/kit/src/views/SignatureConfirm/components/SignatureConfirmAdvanced/TxAdvancedSettings.tsx

@@ -21,12 +21,14 @@ import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/background
 import { usePromiseResult } from '@onekeyhq/kit/src/hooks/usePromiseResult';
 import {
   useDecodedTxsAtom,
+  useSendSelectedFeeInfoAtom,
   useSignatureConfirmActions,
   useUnsignedTxsAtom,
 } from '@onekeyhq/kit/src/states/jotai/contexts/signatureConfirm';
 import { useSettingsPersistAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import { appLocale } from '@onekeyhq/shared/src/locale/appLocale';
+import hexUtils from '@onekeyhq/shared/src/utils/hexUtils';
 
 import { TxDataViewer } from '../SignatureConfirmDataViewer';
 
@@ -74,7 +76,7 @@ function TxAdvancedSettings(props: IProps) {
   const [{ decodedTxs }] = useDecodedTxsAtom();
   const [settings] = useSettingsPersistAtom();
   const { updateTxAdvancedSettings } = useSignatureConfirmActions().current;
-
+  const [selectedFee] = useSendSelectedFeeInfoAtom();
   const vaultSettings = usePromiseResult(
     async () =>
       backgroundApiProxy.serviceNetwork.getVaultSettings({ networkId }),
@@ -91,23 +93,39 @@ function TxAdvancedSettings(props: IProps) {
     [unsignedTxs],
   );
 
-  const txContent = useMemo(() => {
+  const { result: txContent } = usePromiseResult(async () => {
     if (!unsignedTxs || unsignedTxs.length === 0) {
       return '';
     }
-    return unsignedTxs.reduce((acc, unsignedTx) => {
+
+    let txString = '';
+
+    for (let i = 0; i < unsignedTxs.length; i += 1) {
+      const unsignedTx = unsignedTxs[i];
+      const unsignedTxWithFeeInfo =
+        await backgroundApiProxy.serviceSend.updateUnsignedTx({
+          unsignedTx,
+          feeInfo: selectedFee?.feeInfos[i]?.feeInfo,
+          networkId,
+          accountId,
+        });
+
+      const encodedTx = unsignedTxWithFeeInfo.encodedTx as IEncodedTxEvm;
+
+      if (!isNil(encodedTx.nonce)) {
+        encodedTx.nonce = hexUtils.hexlify(encodedTx.nonce);
+      }
+
       try {
-        const tx = JSON.stringify(
-          unsignedTx.encodedTx as IEncodedTxEvm,
-          null,
-          2,
-        );
-        return acc ? `${acc}\n\n${tx}` : tx;
+        const tx = JSON.stringify(encodedTx, null, 2);
+        txString = txString ? `${txString}\n\n${tx}` : tx;
       } catch {
-        return acc;
+        // ignore
       }
-    }, '');
-  }, [unsignedTxs]);
+    }
+
+    return txString;
+  }, [unsignedTxs, selectedFee?.feeInfos, accountId, networkId]);
 
   const abiContent = useMemo(() => {
     if (!decodedTxs || decodedTxs.length === 0) {
@@ -263,7 +281,7 @@ function TxAdvancedSettings(props: IProps) {
         </Form>
         <TxDataViewer
           dataGroup={[
-            { title: 'DATA', data: txContent },
+            { title: 'DATA', data: txContent ?? '' },
             { title: 'ABI', data: abiContent },
             { title: 'HEX', data: hexContent },
           ]}

packages/kit/src/views/SignatureConfirm/components/SignatureConfirmComponents/Assets.tsx

@@ -20,11 +20,13 @@ import {
 } from '@onekeyhq/kit/src/states/jotai/contexts/signatureConfirm';
 import type { IApproveInfo } from '@onekeyhq/kit-bg/src/vaults/types';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
-import type {
-  IDisplayComponentApprove,
-  IDisplayComponentAssets,
-  IDisplayComponentNFT,
-  IDisplayComponentToken,
+import {
+  EParseTxComponentType,
+  type IDisplayComponentApprove,
+  type IDisplayComponentAssets,
+  type IDisplayComponentInternalAssets,
+  type IDisplayComponentNFT,
+  type IDisplayComponentToken,
 } from '@onekeyhq/shared/types/signatureConfirm';
 
 import { showApproveEditor } from '../ApproveEditor';
@@ -34,6 +36,7 @@ type IAssetsCommonProps = {
   networkId: string;
   showNetwork?: boolean;
   editable?: boolean;
+  hideLabel?: boolean;
 } & ISignatureConfirmItemType;
 
 type IAssetsTokenProps = IAssetsCommonProps & {
@@ -50,6 +53,10 @@ type IAssetsNFTProps = IAssetsCommonProps & {
   component: IDisplayComponentNFT;
 };
 
+type IInternalAssetsProps = IAssetsCommonProps & {
+  component: IDisplayComponentInternalAssets;
+};
+
 type IAssetsProps = IAssetsCommonProps & {
   component: IDisplayComponentAssets;
 };
@@ -66,6 +73,7 @@ function SignatureAssetDetailItem({
   tokenProps,
   isLoading,
   handleEdit,
+  hideLabel,
   ...rest
 }: {
   type?: 'token' | 'nft';
@@ -77,6 +85,7 @@ function SignatureAssetDetailItem({
   isLoading?: boolean;
   tokenProps?: Omit<ITokenProps, 'size' | 'showNetworkIcon'>;
   handleEdit?: () => void;
+  hideLabel?: boolean;
 } & ISignatureConfirmItemType) {
   const { network } = useAccountData({
     networkId: tokenProps?.networkId,
@@ -99,7 +108,9 @@ function SignatureAssetDetailItem({
 
   return (
     <SignatureConfirmItem {...rest}>
-      <SignatureConfirmItem.Label>{label}</SignatureConfirmItem.Label>
+      {!hideLabel ? (
+        <SignatureConfirmItem.Label>{label}</SignatureConfirmItem.Label>
+      ) : null}
       <XStack gap="$3" alignItems="center">
         <Token
           size="lg"
@@ -249,7 +260,7 @@ function AssetsNFT(props: IAssetsNFTProps) {
   );
 }
 
-function Assets(props: IAssetsProps) {
+function AssetsInternalAssets(props: IInternalAssetsProps) {
   const { component, ...rest } = props;
   return (
     <SignatureAssetDetailItem
@@ -267,9 +278,44 @@ function Assets(props: IAssetsProps) {
   );
 }
 
+function Assets(props: IAssetsProps) {
+  const { component, ...rest } = props;
+  return (
+    <SignatureConfirmItem {...rest}>
+      <SignatureConfirmItem.Label>{component.label}</SignatureConfirmItem.Label>
+      <YStack gap="$1">
+        {component.assets.map((asset, index) => {
+          if (asset.type === EParseTxComponentType.InternalAssets) {
+            return (
+              <AssetsInternalAssets
+                hideLabel
+                key={index}
+                component={asset}
+                {...rest}
+              />
+            );
+          }
+          if (asset.type === EParseTxComponentType.NFT) {
+            return (
+              <AssetsNFT hideLabel key={index} component={asset} {...rest} />
+            );
+          }
+          if (asset.type === EParseTxComponentType.Token) {
+            return (
+              <AssetsToken hideLabel key={index} component={asset} {...rest} />
+            );
+          }
+          return null;
+        })}
+      </YStack>
+    </SignatureConfirmItem>
+  );
+}
+
 Assets.Token = AssetsToken;
 Assets.TokenApproval = AssetsTokenApproval;
 
 Assets.NFT = AssetsNFT;
+Assets.InternalAssets = AssetsInternalAssets;
 
 export { Assets };

packages/kit/src/views/SignatureConfirm/components/SignatureConfirmDataViewer/DataViewer.tsx

@@ -1,4 +1,4 @@
-import { ScrollView, SizableText } from '@onekeyhq/components';
+import { ScrollView, SizableText, Stack } from '@onekeyhq/components';
 
 function DataViewer({ data }: { data: string }) {
   return (
@@ -9,14 +9,16 @@ function DataViewer({ data }: { data: string }) {
       bg="$bgSubdued"
       h="$60"
     >
-      <SizableText
-        size="$bodySm"
-        style={{
-          wordBreak: 'break-all',
-        }}
-      >
-        {data}
-      </SizableText>
+      <Stack pb="$6">
+        <SizableText
+          size="$bodySm"
+          style={{
+            wordBreak: 'break-all',
+          }}
+        >
+          {data}
+        </SizableText>
+      </Stack>
     </ScrollView>
   );
 }

packages/kit/src/views/SignatureConfirm/components/SignatureConfirmDetails/SignatureConfirmDetails.tsx

@@ -6,7 +6,10 @@ import {
   useDecodedTxsAtom,
   useUnsignedTxsAtom,
 } from '@onekeyhq/kit/src/states/jotai/contexts/signatureConfirm';
-import type { IDisplayComponent } from '@onekeyhq/shared/types/signatureConfirm';
+import type {
+  IDisplayComponent,
+  IDisplayComponentAssets,
+} from '@onekeyhq/shared/types/signatureConfirm';
 import { EParseTxComponentType } from '@onekeyhq/shared/types/signatureConfirm';
 
 import {
@@ -52,16 +55,73 @@ function SignatureConfirmDetails(props: IProps) {
       txIndex: number;
     }[] = [];
 
+    const isLocalParsed = decodedTxs[0]?.isLocalParsed;
+
     for (let i = 0; i < decodedTxs.length; i += 1) {
       const decodedTx = decodedTxs[i];
-      const components = decodedTx.txDisplay?.components?.map((component) => ({
-        component,
-        txIndex: i,
-      }));
 
-      if (components) {
-        txDisplayComponents = flatMap(txDisplayComponents.concat(components));
+      const components = decodedTx.txDisplay?.components ?? [];
+      let finalComponents: IDisplayComponent[] = [];
+
+      // merge token/nft components to assets component with same label
+      if (isLocalParsed) {
+        let currentLabel = '';
+        let currentAssets: IDisplayComponentAssets | null = null;
+
+        for (let j = 0; j < components.length; j += 1) {
+          const component = components[j];
+
+          if (
+            component.type === EParseTxComponentType.Token ||
+            component.type === EParseTxComponentType.NFT ||
+            component.type === EParseTxComponentType.InternalAssets
+          ) {
+            if (currentLabel === component.label) {
+              if (currentAssets) {
+                currentAssets.assets.push(component);
+              } else {
+                currentLabel = component.label;
+                currentAssets = {
+                  type: EParseTxComponentType.Assets,
+                  label: component.label,
+                  assets: [component],
+                };
+              }
+            } else {
+              if (currentAssets) {
+                finalComponents.push(currentAssets);
+              }
+              currentLabel = component.label;
+              currentAssets = {
+                type: EParseTxComponentType.Assets,
+                label: component.label,
+                assets: [component],
+              };
+            }
+          } else {
+            if (currentAssets) {
+              finalComponents.push(currentAssets);
+              currentAssets = null;
+            }
+            finalComponents.push(component);
+          }
+        }
+
+        if (currentAssets) {
+          finalComponents.push(currentAssets);
+        }
+      } else {
+        finalComponents = components;
       }
+
+      txDisplayComponents = flatMap(
+        txDisplayComponents.concat(
+          finalComponents.map((component) => ({
+            component,
+            txIndex: i,
+          })),
+        ),
+      );
     }
 
     return txDisplayComponents.map(({ component, txIndex }) => {
@@ -89,6 +149,14 @@ function SignatureConfirmDetails(props: IProps) {
               showNetwork={isBridge}
             />
           );
+        case EParseTxComponentType.InternalAssets:
+          return (
+            <Assets.InternalAssets
+              component={component}
+              networkId={networkId}
+              showNetwork={isBridge}
+            />
+          );
         case EParseTxComponentType.Token:
           return (
             <Assets.Token

packages/shared/src/utils/txActionUtils.ts

@@ -25,8 +25,8 @@ import type {
   IDisplayComponent,
   IDisplayComponentAddress,
   IDisplayComponentApprove,
-  IDisplayComponentAssets,
   IDisplayComponentDefault,
+  IDisplayComponentInternalAssets,
   IDisplayComponentNetwork,
   IDisplayComponentToken,
 } from '../../types/signatureConfirm';
@@ -274,8 +274,8 @@ function convertAssetTransferActionToSignatureConfirmComponent({
           id: ETranslations.global_asset,
         });
 
-    const assetsComponent: IDisplayComponentAssets = {
-      type: EParseTxComponentType.Assets,
+    const assetsComponent: IDisplayComponentInternalAssets = {
+      type: EParseTxComponentType.InternalAssets,
       label: assetsLabel,
       name: send.name,
       icon: send.icon,
@@ -298,8 +298,8 @@ function convertAssetTransferActionToSignatureConfirmComponent({
           id: ETranslations.global_asset,
         });
 
-    const assetsComponent: IDisplayComponentAssets = {
-      type: EParseTxComponentType.Assets,
+    const assetsComponent: IDisplayComponentInternalAssets = {
+      type: EParseTxComponentType.InternalAssets,
       label: assetsLabel,
       name: receive.name,
       icon: receive.icon,