Update useQuotes: use v2 endpoint

Author: vyorkin

src/shared/types/Quote.ts

@@ -1,16 +1,11 @@
-interface Exchange {
-  icon_url: string | null;
-  share: number;
-}
-
-interface ExchangeWithName extends Exchange {
-  name: string;
-}
-
-interface ContractMetadata {
+export interface ContractMetadata {
   id: string;
   name: string;
   icon_url: string;
+  explorer: {
+    name: string;
+    tx_url: string;
+  };
 }
 
 export interface TransactionDescription {
@@ -22,28 +17,57 @@ export interface TransactionDescription {
   chain_id: string;
 }
 
+export type QuotedTransaction = Omit<
+  TransactionDescription,
+  'chain_id' | 'gas'
+> & {
+  chainId: string;
+  gasLimit: string;
+};
+
 export interface Quote {
-  input_amount_estimation: string;
-  input_token_address: string;
+  contract_metadata: ContractMetadata | null;
+  slippage_type?: 'normal' | 'zero-slippage';
+
   input_chain: string;
-  output_amount_estimation: string;
-  output_token_address: string;
+  input_asset_id: string;
+  input_token_address: string;
+  input_token_id: string | null;
+  input_amount_estimation: string;
+  input_amount_max: string;
+
   output_chain: string;
+  output_asset_id: string;
+  output_token_address: string;
+  output_token_id: string | null;
+  output_amount_estimation: string;
+
   guaranteed_output_amount: string;
+  output_amount_min: string;
+
   token_spender: string;
-  exchanges: ExchangeWithName[] | null;
-  contract_metadata: ContractMetadata | null;
-  gas_estimation: string | null;
+
+  gas_estimation: number | null;
+  seconds_estimation: number | null;
+
+  transaction: TransactionDescription | null;
+
   enough_allowance?: boolean;
   enough_balance: boolean;
-  slippage_type?: 'normal' | 'zero-slippage';
-  estimated_seconds?: string | null;
+
   base_protocol_fee: number;
-  marketplace_fee: number;
+
   protocol_fee: number;
   protocol_fee_amount: string;
+  protocol_fee_asset_id: string | null;
+  protocol_fee_asset_address: string | null;
+  protocol_fee_taken_on_top: boolean | null;
+
+  marketplace_fee: number;
+  marketplace_fee_amount: number;
+
   bridge_fee_asset_id: string | null;
+  bridge_fee_asset_address: string | null;
   bridge_fee_taken_on_top: boolean | null;
   bridge_fee_amount: string;
-  transaction: TransactionDescription | null;
 }

src/ui/pages/BridgeForm/BridgeForm.tsx

@@ -31,8 +31,6 @@ import {
   getChainWithMostAssetValue,
   useSearchParamsState,
 } from '@zeriontech/transactions';
-import type { QuotesData } from 'src/ui/shared/requests/useQuotes';
-import { useQuotes } from 'src/ui/shared/requests/useQuotes';
 import { HStack } from 'src/ui/ui-kit/HStack';
 import { UnstyledLink } from 'src/ui/ui-kit/UnstyledLink';
 import { WalletAvatar } from 'src/ui/components/WalletAvatar';
@@ -85,6 +83,8 @@ import { getGas } from 'src/modules/ethereum/transactions/getGas';
 import type { ZerionApiClient } from 'src/modules/zerion-api/zerion-api-bare';
 import { useTxEligibility } from 'src/ui/shared/requests/useTxEligibility';
 import { useGasbackEstimation } from 'src/modules/ethereum/account-abstraction/rewards';
+import type { QuotesData } from 'src/ui/shared/requests/useQuotes';
+import { getQuoteTx, useQuotes } from 'src/ui/shared/requests/useQuotes';
 import {
   DEFAULT_CONFIGURATION,
   applyConfiguration,
@@ -433,13 +433,16 @@ function BridgeFormComponent() {
     receivePosition,
   });
 
-  const {
-    transaction: bridgeTransaction,
-    quote,
-    refetch: refetchQuotes,
-  } = quotesData;
+  const { refetch: refetchQuotes } = quotesData;
 
-  const selectedQuote = quote;
+  const defaultQuote = quotesData.quotes?.[0] ?? null;
+  // TODO: add support for quote selection, useState
+  const selectedQuote = defaultQuote;
+
+  const bridgeTransaction = useMemo(
+    () => (selectedQuote ? getQuoteTx(selectedQuote) : null),
+    [selectedQuote]
+  );
 
   const reverseChains = useCallback(
     () =>
@@ -767,6 +770,7 @@ function BridgeFormComponent() {
     return (
       <SuccessState
         hash={transactionHash}
+        explorer={selectedQuote?.contract_metadata?.explorer ?? null}
         spendPosition={spendPosition}
         receivePosition={receivePosition}
         formState={snapshotRef.current}

src/ui/pages/BridgeForm/BridgeLine/BridgeLine.tsx

@@ -6,12 +6,12 @@ import { getCommonQuantity } from 'src/modules/networks/asset';
 import type { Quote } from 'src/shared/types/Quote';
 import { formatSeconds } from 'src/shared/units/formatSeconds';
 import { SlidingRectangle } from 'src/ui/components/SlidingRectangle';
-import type { QuotesData } from 'src/ui/shared/requests/useQuotes';
 import { noValueDash } from 'src/ui/shared/typography';
 import { HStack } from 'src/ui/ui-kit/HStack';
 import { UIText } from 'src/ui/ui-kit/UIText';
 import { TokenIcon } from 'src/ui/ui-kit/TokenIcon';
 import { formatCurrencyValue } from 'src/shared/units/formatCurrencyValue';
+import type { QuotesData } from 'src/ui/shared/requests/useQuotes';
 import { getQuotesErrorMessage } from '../../SwapForm/Quotes/getQuotesErrorMessage';
 
 function getFeePriceValue({
@@ -126,8 +126,8 @@ export function BridgeLine({
 
             <HStack gap={4} alignItems="center">
               <UIText color="var(--primary)" kind="small/accent">
-                {quote?.estimated_seconds
-                  ? `~${formatSeconds(Number(quote.estimated_seconds))}`
+                {quote?.seconds_estimation
+                  ? `~${formatSeconds(Number(quote.seconds_estimation))}`
                   : noValueDash}
               </UIText>
               <UIText color="var(--primary)" kind="small/accent">

src/ui/pages/BridgeForm/SuccessState/SuccessState.tsx

@@ -11,20 +11,23 @@ import { useActionStatusByHash } from 'src/ui/shared/forms/SuccessState/useActio
 import { NavigationTitle } from 'src/ui/components/NavigationTitle';
 import { GasbackDecorated } from 'src/ui/components/GasbackDecorated';
 import type { BareAddressPosition } from 'src/shared/types/BareAddressPosition';
+import type { ContractMetadata } from 'src/shared/types/Quote';
 import type { BridgeFormState } from '../shared/types';
 
 export function SuccessState({
   formState,
   spendPosition,
   receivePosition,
   hash,
+  explorer,
   onDone,
   gasbackValue,
 }: {
   formState: BridgeFormState;
   spendPosition: BareAddressPosition;
   receivePosition: BareAddressPosition;
   hash: string;
+  explorer: ContractMetadata['explorer'] | null;
   gasbackValue: number | null;
   onDone: () => void;
 }) {
@@ -57,6 +60,11 @@ export function SuccessState({
   const receiveChainName = networks.getChainName(receiveChain);
   const receiveChainIconUrl = networks.getNetworkByName(receiveChain)?.icon_url;
 
+  const explorerFallbackUrl = hash
+    ? networks.getExplorerTxUrlByName(spendChain, hash)
+    : undefined;
+  const explorerUrl = explorer?.tx_url.replace('{HASH}', hash);
+
   return (
     <>
       <NavigationTitle urlBar="none" title="Bridge Success" />
@@ -81,9 +89,7 @@ export function SuccessState({
         pendingTitle="Transferring"
         failedTitle="Transfer failed"
         dropppedTitle="Transfer cancelled"
-        explorerUrl={
-          hash ? networks.getExplorerTxUrlByName(spendChain, hash) : undefined
-        }
+        explorerUrl={explorerUrl ?? explorerFallbackUrl}
         confirmedContent={
           gasbackValue && FEATURE_GASBACK ? (
             <GasbackDecorated value={gasbackValue} />

src/ui/pages/BridgeForm/ZerionFeeLine/ZerionFeeLine.tsx

@@ -37,12 +37,12 @@ export function ZerionFeeLine({ quote }: { quote: Quote | null }) {
             target="_blank"
           >
             <QuestionIcon
-              role="decoration"
+              role="presentation"
               style={{
                 width: 20,
                 height: 20,
                 display: 'block',
-                color: 'var(--neutral-600)',
+                color: 'var(--neutral-500)',
               }}
             />
           </UnstyledAnchor>

src/ui/pages/BridgeForm/shared/types.ts

@@ -7,4 +7,7 @@ export type BridgeFormState = {
 
   spendTokenInput?: string;
   receiveTokenInput?: string;
+
+  receiverAddressInput?: string | null;
+  showReceiverAddressInput?: boolean;
 };

src/ui/pages/SendTransaction/TransactionConfiguration/TransactionConfiguration.tsx

@@ -40,8 +40,8 @@ export function GasbackHint() {
         <QuestionHintIcon
           role="presentation"
           style={{
-            width: 16,
-            height: 16,
+            width: 20,
+            height: 20,
             color: 'var(--neutral-500)',
             display: 'block',
           }}

src/ui/pages/SwapForm/Quotes/RateLine.tsx

@@ -8,8 +8,9 @@ import { getDecimals } from 'src/modules/networks/asset';
 import type { Chain } from 'src/modules/networks/Chain';
 import { createChain } from 'src/modules/networks/Chain';
 import { formatTokenValue } from 'src/shared/units/formatTokenValue';
-import type { QuotesData } from 'src/ui/shared/requests/useQuotes';
 import { SlidingRectangle } from 'src/ui/components/SlidingRectangle';
+import type { QuotesData } from 'src/ui/shared/requests/useQuotes';
+import type { Quote } from 'src/shared/types/Quote';
 import { getQuotesErrorMessage } from './getQuotesErrorMessage';
 
 function getRate({
@@ -66,19 +67,21 @@ export function RateLine({
   spendAsset,
   receiveAsset,
   quotesData,
+  selectedQuote,
 }: {
   spendAsset: Asset | null;
   receiveAsset: Asset | null;
   quotesData: QuotesData;
+  selectedQuote: Quote | null;
 }) {
-  const { isLoading, quote, error } = quotesData;
+  const { isLoading, error } = quotesData;
 
   const rate = getRate({
     spendAsset,
     receiveAsset,
-    receiveAmountBase: quote?.output_amount_estimation,
-    spendAmountBase: quote?.input_amount_estimation,
-    chain: quote ? createChain(quote.input_chain) : undefined,
+    receiveAmountBase: selectedQuote?.output_amount_estimation,
+    spendAmountBase: selectedQuote?.input_amount_estimation,
+    chain: selectedQuote ? createChain(selectedQuote.input_chain) : undefined,
   });
 
   // If we decide to _not_ circle the images,
@@ -92,18 +95,19 @@ export function RateLine({
       gap={8}
       justifyContent="space-between"
       style={{
-        visibility: !isLoading && !quote && !error ? 'hidden' : undefined,
+        visibility:
+          !isLoading && !selectedQuote && !error ? 'hidden' : undefined,
       }}
     >
       <UIText kind="small/regular" color="var(--neutral-700)">
         Rate
       </UIText>
       <span>
-        {isLoading && !quote ? (
+        {isLoading && !selectedQuote ? (
           <span style={{ color: 'var(--neutral-500)' }}>
             Fetching offers...
           </span>
-        ) : quote ? (
+        ) : selectedQuote ? (
           <HStack
             // in design it's 4, but design has circle images
             gap={gap}
@@ -113,7 +117,7 @@ export function RateLine({
               fontVariantNumeric: 'tabular-nums',
             }}
           >
-            {quote.contract_metadata?.icon_url ? (
+            {selectedQuote.contract_metadata?.icon_url ? (
               <div
                 style={{
                   position: 'relative',
@@ -124,10 +128,10 @@ export function RateLine({
               >
                 <SlidingRectangle
                   size={20}
-                  src={quote.contract_metadata.icon_url}
+                  src={selectedQuote.contract_metadata.icon_url}
                   render={(src, index) => (
                     <img
-                      title={quote.contract_metadata?.name}
+                      title={selectedQuote.contract_metadata?.name}
                       style={{
                         position: 'absolute',
                         left: 0,
@@ -139,7 +143,7 @@ export function RateLine({
                       }}
                       src={src}
                       // The alt here may be from a sibling image, but hopefully it doesn't matter
-                      alt={`${quote.contract_metadata?.name} logo`}
+                      alt={`${selectedQuote.contract_metadata?.name} logo`}
                     />
                   )}
                 />
@@ -151,7 +155,7 @@ export function RateLine({
                 rate.rightAsset.symbol
               )}`
             ) : (
-              <span>{quote.contract_metadata?.name ?? 'unknown'}</span>
+              <span>{selectedQuote.contract_metadata?.name ?? 'unknown'}</span>
             )}
           </HStack>
         ) : error ? (

src/ui/pages/SwapForm/Quotes/getQuotesErrorMessage.ts

@@ -1,12 +1,11 @@
 import { getError } from 'src/shared/errors/getError';
-import type { QuotesData } from 'src/ui/shared/requests/useQuotes';
 
 const quoteApiErrors: Record<string, string | undefined> = {
   'Cannot process input_amount parameter': 'Adjust amount value',
   'Cannot process output_amount parameter': 'Adjust amount value',
 };
 
-export function getQuotesErrorMessage(quotesData: QuotesData) {
-  const quotesMessage = getError(quotesData.error).message;
+export function getQuotesErrorMessage(error: Error | unknown) {
+  const quotesMessage = getError(error).message;
   return quoteApiErrors[quotesMessage] || quotesMessage;
 }