refactor: update QuoteRow to use primitive providerName prop

Author: infiniteflower

app/components/UI/Bridge/components/QuoteSelectorView/QuoteList.test.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import { QuoteList } from './QuoteList';
-import { QuoteRowProps } from './QuoteRow';
+import { QuoteRowProps, QuoteRowViewProps } from './QuoteRow';
 import { useSelector } from 'react-redux';
 import { getDisplayCurrencyValue } from '../../utils/exchange-rates';
 
 jest.mock('./QuoteRow', () => ({
-  QuoteRowView: ({ provider, quoteRequestId }: QuoteRowProps) => {
+  QuoteRowView: ({ providerName, quoteRequestId }: QuoteRowViewProps) => {
     const { Text } = jest.requireActual('react-native');
     return (
       <Text testID={`quote-row-${quoteRequestId}`}>
-        {provider.name} - {quoteRequestId}
+        {providerName} - {quoteRequestId}
       </Text>
     );
   },

app/components/UI/Bridge/components/QuoteSelectorView/QuoteList.tsx

@@ -31,10 +31,11 @@ export const QuoteList = ({ data }: Props) => {
   nonEvmMultichainAssetRates = useSelector(selectMultichainAssetsRates);
   ///: END:ONLY_INCLUDE_IF(keyring-snaps)
 
-  return data.map((quote) => (
+  return data.map(({ provider, ...quote }) => (
     <QuoteRowView
       key={quote.quoteRequestId}
       {...quote}
+      providerName={provider.name}
       formattedReceiveAmountFiat={getDisplayCurrencyValue({
         token: destToken,
         amount: quote.receiveAmount,

app/components/UI/Bridge/components/QuoteSelectorView/QuoteRow.tsx

@@ -38,15 +38,16 @@ export interface QuoteRowProps {
   receiveAmount?: string;
 }
 
-export interface QuoteRowViewProps extends QuoteRowProps {
+export interface QuoteRowViewProps extends Omit<QuoteRowProps, 'provider'> {
+  providerName: string;
   formattedReceiveAmountFiat: string;
   destTokenSymbol?: string;
 }
 
 export const QuoteRowView = React.memo(
   ({
     selected,
-    provider,
+    providerName,
     isLowestCost,
     formattedTotalCost,
     formattedReceiveAmountFiat,
@@ -94,7 +95,7 @@ export const QuoteRowView = React.memo(
                     fontWeight={FontWeight.Medium}
                     variant={TextVariantDS.BodyMd}
                   >
-                    {provider.name}
+                    {providerName}
                   </Text>
                 </View>
               </Skeleton>
@@ -151,7 +152,7 @@ export const QuoteRowView = React.memo(
   },
 );
 
-export const QuoteRow = (props: QuoteRowProps) => {
+export const QuoteRow = ({ provider, ...props }: QuoteRowProps) => {
   const destToken = useSelector(selectDestToken);
   const formattedReceiveAmountFiat = useDisplayCurrencyValue(
     props.receiveAmount,
@@ -161,6 +162,7 @@ export const QuoteRow = (props: QuoteRowProps) => {
   return (
     <QuoteRowView
       {...props}
+      providerName={provider.name}
       formattedReceiveAmountFiat={formattedReceiveAmountFiat}
       destTokenSymbol={destToken?.symbol}
     />