feat(solana): use the shared Asset UI component

packages/solana-wallet-snap/CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Estimated changes from the previous scan now stay visible while a confirmation re-scans, instead of showing a loading skeleton
 - Render the confirmation security alert banner with the shared `TransactionAlert` component from `@metamask/snap-networks-utils` ([#409](https://github.com/MetaMask/internal-snaps/pull/409))
   - A "Checking for security issues" banner is now shown while the transaction scan is in progress, instead of no banner
+- Render the confirmation network fee with the shared `Asset` component from `@metamask/snap-networks-utils` ([#427](https://github.com/MetaMask/internal-snaps/pull/427))
 
 ## [7.0.0]
 

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

@@ -27,10 +27,10 @@ module.exports = {
 
   coverageThreshold: {
     global: {
-      branches: 70.54,
-      functions: 79.32,
-      lines: 87.6,
-      statements: 87.76,
+      branches: 70.77,
+      functions: 79.28,
+      lines: 87.59,
+      statements: 87.75,
     },
   },
 };

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/internal-snaps.git"
   },
   "source": {
-    "shasum": "sBM046Sahl2/hyH2vdMDpfs9i2iYhxlCO4AFdIjAiAI=",
+    "shasum": "xtwTLlWoCEUuz3djadLclyo0kw2YT5psQ+a2TDK1FKE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -1,11 +1,11 @@
+import { Asset } from '@metamask/snap-networks-utils';
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
 import {
   Address,
   Box,
   Icon,
   Image,
   Section,
-  Skeleton,
   Text,
   Tooltip,
 } from '@metamask/snaps-sdk/jsx';
@@ -15,7 +15,7 @@ import type { Network } from '../../../../core/constants/solana';
 import { METAMASK_ORIGIN, Networks } from '../../../../core/constants/solana';
 import type { FetchStatus, Preferences } from '../../../../core/types/snap';
 import { addressToCaip10 } from '../../../../core/utils/addressToCaip10';
-import { formatCrypto } from '../../../../core/utils/formatCrypto';
+import { formatCryptoBalance } from '../../../../core/utils/formatCryptoBalance';
 import { formatFiat } from '../../../../core/utils/formatFiat';
 import { i18n } from '../../../../core/utils/i18n';
 import { parseOrigin } from '../../../../core/utils/parseOrigin';
@@ -60,7 +60,7 @@ export const TransactionDetails: SnapComponent<TransactionDetailsProps> = ({
   const feeInFiat =
     feeInSol && nativePrice && !pricesError
       ? formatFiat(tokenToFiat(feeInSol, nativePrice), currency, locale)
-      : '';
+      : null;
 
   return (
     <Section>
@@ -142,20 +142,13 @@ export const TransactionDetails: SnapComponent<TransactionDetailsProps> = ({
           {translate('confirmation.fee')}
         </Text>
         {feeInSol ? (
-          <Box direction="horizontal" alignment="center">
-            {pricesFetching ? (
-              <Skeleton width={80} />
-            ) : (
-              <Text color="muted">{feeInFiat}</Text>
-            )}
-            <Text>
-              {formatCrypto(
-                feeInSol,
-                Networks[scope].nativeToken.symbol,
-                locale,
-              )}
-            </Text>
-          </Box>
+          <Asset
+            symbol={Networks[scope].nativeToken.symbol}
+            amount={formatCryptoBalance(feeInSol, locale)}
+            hideIcon
+            fiat={feeInFiat}
+            isFiatLoading={pricesFetching}
+          />
         ) : (
           <Tooltip content={translate('confirmation.feeError')}>
             <Icon name="warning" />

packages/solana-wallet-snap/src/features/confirmation/views/ConfirmTransactionRequest/ConfirmTransactionRequest.test.tsx

@@ -1,8 +1,11 @@
 import { SolMethod } from '@metamask/keyring-api';
 
-import { Network } from '../../../../core/constants/solana';
+import type { SpotPrices } from '../../../../core/clients/price-api/types';
+import { KnownCaip19Id, Network } from '../../../../core/constants/solana';
 import type { TransactionScanResult } from '../../../../core/services/transaction-scan/types';
 import type { Preferences } from '../../../../core/types/snap';
+import { formatFiat } from '../../../../core/utils/formatFiat';
+import { tokenToFiat } from '../../../../core/utils/tokenToFiat';
 import { ConfirmTransactionRequest } from './ConfirmTransactionRequest';
 import type { ConfirmTransactionRequestContext } from './types';
 
@@ -110,4 +113,51 @@ describe('ConfirmTransactionRequest', () => {
       expect(serialized).not.toContain('"type":"Banner"');
     });
   });
+
+  describe('fee', () => {
+    const tokenPrices = {
+      [KnownCaip19Id.SolMainnet]: { price: 150 },
+    } as unknown as SpotPrices;
+    const fiat = formatFiat(tokenToFiat('0.000005', 150), 'usd', 'en');
+
+    it('renders the fiat value before the fee in SOL', () => {
+      const serialized = render({ feeEstimatedInSol: '0.000005', tokenPrices });
+
+      expect(serialized).toContain('"children":"0.000005 SOL"');
+      expect(serialized.indexOf(fiat)).toBeGreaterThan(-1);
+      expect(serialized.indexOf(fiat)).toBeLessThan(
+        serialized.indexOf('0.000005 SOL'),
+      );
+    });
+
+    it('renders a skeleton instead of the fiat value while prices load', () => {
+      const serialized = render({
+        feeEstimatedInSol: '0.000005',
+        tokenPrices,
+        tokenPricesFetchStatus: 'fetching',
+      });
+
+      expect(serialized).toContain('"type":"Skeleton"');
+      expect(serialized).not.toContain(fiat);
+      expect(serialized).toContain('"children":"0.000005 SOL"');
+    });
+
+    it('renders only the fee in SOL when prices failed to load', () => {
+      const serialized = render({
+        feeEstimatedInSol: '0.000005',
+        tokenPrices,
+        tokenPricesFetchStatus: 'error',
+      });
+
+      expect(serialized).not.toContain(fiat);
+      expect(serialized).toContain('"children":"0.000005 SOL"');
+    });
+
+    it('renders a warning when the fee could not be estimated', () => {
+      const serialized = render({ feeEstimatedInSol: null });
+
+      expect(serialized).toContain('"name":"warning"');
+      expect(serialized).not.toContain(' SOL"');
+    });
+  });
 });