feat(solana-wallet-snap): use the shared EstimatedChanges UI component

eslint-suppressions.json

@@ -795,11 +795,6 @@
       "count": 1
     }
   },
-  "packages/solana-wallet-snap/src/features/confirmation/components/AssetChange/AssetChange.tsx": {
-    "@typescript-eslint/no-shadow": {
-      "count": 1
-    }
-  },
   "packages/solana-wallet-snap/src/features/confirmation/components/BasicNullableField/BasicNullableField.tsx": {
     "@typescript-eslint/explicit-function-return-type": {
       "count": 1
@@ -808,16 +803,6 @@
       "count": 1
     }
   },
-  "packages/solana-wallet-snap/src/features/confirmation/components/EstimatedChanges/EstimatedChanges.tsx": {
-    "@typescript-eslint/no-shadow": {
-      "count": 1
-    }
-  },
-  "packages/solana-wallet-snap/src/features/confirmation/components/EstimatedChanges/EstimatedChangesHeader.tsx": {
-    "@typescript-eslint/no-shadow": {
-      "count": 1
-    }
-  },
   "packages/solana-wallet-snap/src/features/confirmation/components/Instruction/Instruction.tsx": {
     "@typescript-eslint/explicit-function-return-type": {
       "count": 2

packages/solana-wallet-snap/CHANGELOG.md

@@ -26,6 +26,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **BREAKING** Bump `@metamask/keyring-api` from `^23.7.0` to `^24.1.0` ([#214](https://github.com/MetaMask/internal-snaps/pull/214))
 - **BREAKING** Bump `@metamask/keyring-snap-sdk` from `^9.2.1` to `^10.0.0` ([#214](https://github.com/MetaMask/internal-snaps/pull/214))
 - **BREAKING** Bump `@metamask/snaps-sdk` from `^11.2.0` to `^12.0.1` ([#214](https://github.com/MetaMask/internal-snaps/pull/214))
+- Render the confirmation "Estimated changes" section with the shared `EstimatedChanges` component from `@metamask/snap-networks-utils` ([#384](https://github.com/MetaMask/internal-snaps/pull/384))
+  - Estimated changes from the previous scan now stay visible while a confirmation re-scans, instead of showing a loading skeleton
 
 ### Removed
 

packages/solana-wallet-snap/jest.config.js

@@ -27,10 +27,10 @@ module.exports = {
 
   coverageThreshold: {
     global: {
-      branches: 68.38,
-      functions: 78.28,
-      lines: 87.1,
-      statements: 87.24,
+      branches: 69,
+      functions: 79.01,
+      lines: 87.2,
+      statements: 87.37,
     },
   },
 };

packages/solana-wallet-snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/internal-snaps.git"
   },
   "source": {
-    "shasum": "JcoWP+Q/tJLW3D8uvcA0dYPPvQhgSut5+27i+w0RNMY=",
+    "shasum": "urQPGAYX3VKpvLrahiRnEZXB4FZfanxpgEwTiLwKOJY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/solana-wallet-snap/src/features/confirmation/components/EstimatedChanges/EstimatedChanges.test.tsx

@@ -0,0 +1,58 @@
+import type { TransactionScanAssetChange } from '../../../../core/services/transaction-scan/types';
+import type { Preferences } from '../../../../core/types/snap';
+import { EstimatedChanges } from './EstimatedChanges';
+
+const preferences = { locale: 'en', currency: 'usd' } as Preferences;
+
+const sol: TransactionScanAssetChange = {
+  type: 'out',
+  value: 1.5,
+  price: 300,
+  symbol: 'SOL',
+  name: 'Solana',
+  logo: 'https://example.com/sol.png',
+};
+
+const render = (
+  props: Partial<Parameters<typeof EstimatedChanges>[0]>,
+): string =>
+  JSON.stringify(
+    EstimatedChanges({
+      changes: { assets: [sol] },
+      scanStatus: 'SUCCESS',
+      scanFetchStatus: 'fetched',
+      preferences,
+      ...props,
+    }),
+  );
+
+describe('EstimatedChanges', () => {
+  it('renders formatted amounts, fiat and translated labels', () => {
+    const serialized = render({});
+
+    expect(serialized).toContain('Estimated changes');
+    expect(serialized).toContain('You send');
+    expect(serialized).toContain('-1.5 SOL');
+    expect(serialized).toContain('$300.00');
+    expect(serialized).toContain(sol.logo);
+  });
+
+  it('omits fiat when the asset has no price', () => {
+    const serialized = render({
+      changes: { assets: [{ ...sol, price: null }] },
+    });
+
+    expect(serialized).not.toContain('$');
+  });
+
+  it('renders not available when the scan result is an error', () => {
+    const serialized = render({ changes: null, scanStatus: 'ERROR' });
+
+    expect(serialized).toContain('Not available');
+    expect(serialized).not.toContain('No changes');
+  });
+
+  it('renders no changes when there are no estimated changes', () => {
+    expect(render({ changes: null })).toContain('No changes');
+  });
+});

packages/solana-wallet-snap/src/features/confirmation/components/EstimatedChanges/EstimatedChanges.tsx

@@ -1,15 +1,14 @@
-import { Box, Section, Text } from '@metamask/snaps-sdk/jsx';
+import { EstimatedChanges as SharedEstimatedChanges } from '@metamask/snap-networks-utils';
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 
 import type {
   TransactionScanEstimatedChanges,
   TransactionScanStatus,
 } from '../../../../core/services/transaction-scan/types';
 import type { FetchStatus, Preferences } from '../../../../core/types/snap';
+import { formatCryptoBalance } from '../../../../core/utils/formatCryptoBalance';
+import { formatFiat } from '../../../../core/utils/formatFiat';
 import { i18n } from '../../../../core/utils/i18n';
-import { AssetChange } from '../AssetChange/AssetChange';
-import { EstimatedChangesHeader } from './EstimatedChangesHeader';
-import { EstimatedChangesSkeleton } from './EstimatedChangesSkeleton';
 
 type EstimatedChangesProps = {
   changes: TransactionScanEstimatedChanges | null;
@@ -25,74 +24,32 @@ export const EstimatedChanges: SnapComponent<EstimatedChangesProps> = ({
   scanStatus,
 }) => {
   const translate = i18n(preferences.locale);
-
-  const isFetching = scanFetchStatus === 'fetching';
-  const isFetched = scanFetchStatus === 'fetched';
-  const isError = scanFetchStatus === 'error';
-
-  if (isFetching) {
-    return <EstimatedChangesSkeleton preferences={preferences} />;
-  }
-
-  if (isError || (isFetched && scanStatus === 'ERROR')) {
-    return (
-      <Section direction="vertical">
-        <EstimatedChangesHeader preferences={preferences} />
-        <Text color="alternative">
-          {translate('confirmation.estimatedChanges.notAvailable')}
-        </Text>
-      </Section>
-    );
-  }
-
-  const send = changes?.assets.filter((asset) => asset.type === 'out') ?? [];
-  const receive = changes?.assets.filter((asset) => asset.type === 'in') ?? [];
-
-  const hasChanges = send.length > 0 || receive.length > 0;
-
-  if (isFetched && !hasChanges) {
-    return (
-      <Section direction="vertical">
-        <EstimatedChangesHeader preferences={preferences} />
-        <Text color="alternative">
-          {translate('confirmation.estimatedChanges.noChanges')}
-        </Text>
-      </Section>
-    );
-  }
+  const { locale, currency } = preferences;
 
   return (
-    <Section>
-      <EstimatedChangesHeader preferences={preferences} />
-      {send?.length > 0 ? (
-        <Box alignment="space-between" direction="horizontal">
-          <Text fontWeight="medium" color="alternative">
-            {translate('confirmation.estimatedChanges.send')}
-          </Text>
-          <Box>
-            <Box>
-              {send?.map((asset) => (
-                <AssetChange asset={asset} preferences={preferences} />
-              ))}
-            </Box>
-          </Box>
-        </Box>
-      ) : null}
-      <Box>{null}</Box>
-      {receive?.length > 0 ? (
-        <Box alignment="space-between" direction="horizontal">
-          <Text fontWeight="medium" color="alternative">
-            {translate('confirmation.estimatedChanges.receive')}
-          </Text>
-          <Box>
-            <Box>
-              {receive?.map((asset) => (
-                <AssetChange asset={asset} preferences={preferences} />
-              ))}
-            </Box>
-          </Box>
-        </Box>
-      ) : null}
-    </Section>
+    <SharedEstimatedChanges
+      assets={(changes?.assets ?? []).map((asset) => ({
+        type: asset.type,
+        value:
+          asset.value === null
+            ? null
+            : formatCryptoBalance(asset.value, locale),
+        symbol: asset.symbol,
+        logo: asset.logo,
+        fiat: asset.price
+          ? formatFiat(asset.price.toString(), currency, locale)
+          : null,
+      }))}
+      labels={{
+        title: translate('confirmation.estimatedChanges'),
+        tooltip: translate('confirmation.estimatedChanges.tooltip'),
+        send: translate('confirmation.estimatedChanges.send'),
+        receive: translate('confirmation.estimatedChanges.receive'),
+        notAvailable: translate('confirmation.estimatedChanges.notAvailable'),
+        noChanges: translate('confirmation.estimatedChanges.noChanges'),
+      }}
+      scanFetchStatus={scanFetchStatus}
+      scanError={scanStatus === 'ERROR'}
+    />
   );
 };