chore: release v1.713.0

.env.base

@@ -59,7 +59,12 @@ REACT_APP_FEATURE_DYNAMIC_LP_ASSETS=false
 # Fetch read-only assets from various providers (Zapper only for now)
 REACT_APP_FEATURE_READ_ONLY_ASSETS=true
 
-# swapper feature flags - other .env files will override these
+# Swapper chain-specific flags. Use me if you're working on a swapper which brings first time swapper support for a chain,
+# meaning we don't want to enable the selection for said chain in prod just yet 
+# Or alternatively, if we know that a given chain is very unstable and we may want to disable it in swapper altogether.
+REACT_APP_FEATURE_SWAPPER_SOLANA=false
+
+# Swapper feature flags - other .env files will override these
 REACT_APP_FEATURE_CHAINFLIP=false
 REACT_APP_FEATURE_CHAINFLIP_DCA=false
 REACT_APP_FEATURE_COWSWAP=true

.env.dev

@@ -1,4 +1,9 @@
-# feature flags
+# Swapper chain-specific flags. Use me if you're working on a swapper which brings first time swapper support for a chain,
+# meaning we don't want to enable the selection for said chain in prod just yet 
+# Or alternatively, if we know that a given chain is very unstable and we may want to disable it in swapper altogether.
+REACT_APP_FEATURE_SWAPPER_SOLANA=true
+
+# Swapper feature flags
 REACT_APP_FEATURE_CHAINFLIP=true
 REACT_APP_FEATURE_CHAINFLIP_DCA=false
 REACT_APP_FEATURE_PUBLIC_TRADE_ROUTE=true

.env.develop

@@ -1,4 +1,10 @@
-# feature flags
+# Swapper chain-specific flags. Use me if you're working on a swapper which brings first time swapper support for a chain,
+# meaning we don't want to enable the selection for said chain in prod just yet 
+# Or alternatively, if we know that a given chain is very unstable and we may want to disable it in swapper altogether.
+
+REACT_APP_FEATURE_SWAPPER_SOLANA=true
+
+# Swapper feature flags
 REACT_APP_FEATURE_LIMIT_ORDERS=true
 REACT_APP_FEATURE_CHAINFLIP=true
 REACT_APP_FEATURE_CHAINFLIP_DCA=false

src/AppProviders.tsx

@@ -76,9 +76,9 @@ export function AppProviders({ children }: ProvidersProps) {
                   <BrowserRouterProvider>
                     <I18nProvider>
                       <WalletProvider>
-                        <ModalProvider>
-                          <WalletConnectV2Provider>
-                            <KeepKeyProvider>
+                        <KeepKeyProvider>
+                          <ModalProvider>
+                            <WalletConnectV2Provider>
                               <ErrorBoundary FallbackComponent={ErrorPage} onError={handleError}>
                                 <WagmiProvider config={wagmiConfig}>
                                   <TransactionsProvider>
@@ -94,9 +94,9 @@ export function AppProviders({ children }: ProvidersProps) {
                                   </TransactionsProvider>
                                 </WagmiProvider>
                               </ErrorBoundary>
-                            </KeepKeyProvider>
-                          </WalletConnectV2Provider>
-                        </ModalProvider>
+                            </WalletConnectV2Provider>
+                          </ModalProvider>
+                        </KeepKeyProvider>
                       </WalletProvider>
                     </I18nProvider>
                   </BrowserRouterProvider>

src/components/Modals/TradeAssetSearch/TradeAssetSearchModal.tsx

@@ -17,13 +17,15 @@ import { useModal } from 'hooks/useModal/useModal'
 export type TradeAssetSearchModalProps = TradeAssetSearchProps & {
   title?: string
   onAssetClick: Required<TradeAssetSearchProps>['onAssetClick']
-  assetFilterPredicate?: (asset: Asset) => boolean
-  chainIdFilterPredicate?: (chainId: ChainId) => boolean
+  assetFilterPredicate: (asset: Asset) => boolean
+  chainIdFilterPredicate: (chainId: ChainId) => boolean
 }
 
 type AssetSearchModalBaseProps = TradeAssetSearchModalProps & {
   isOpen: boolean
   close: () => void
+  assetFilterPredicate: (asset: Asset) => boolean
+  chainIdFilterPredicate: (chainId: ChainId) => boolean
 }
 
 export const TradeAssetSearchModalBase: FC<AssetSearchModalBaseProps> = ({

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx

@@ -118,6 +118,10 @@ export const Hop = ({
   } = useAppSelector(state => selectHopExecutionMetadata(state, hopExecutionMetadataFilter))
 
   // Get allowance approval data from initial (rate) tradeId
+  // We need to keep track of initialActiveTradeId and use it as a filter as we lose the original tradeId when we go from rate to final quote,
+  // since the two are entirely different IDs
+  // As a result, we would lose all allowance approval data, meaning the allowance step row would disappear right after completing it,
+  // as well as from the "Trade Confirmed" summary
   const { allowanceApproval } = useAppSelector(state =>
     selectHopExecutionMetadata(state, rateHopExecutionMetadataFilter),
   )

src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInputBody.tsx

@@ -38,8 +38,8 @@ type SharedTradeInputBodyProps = {
   sellAmountUserCurrency: string | undefined
   sellAsset: Asset
   sellAccountId: AccountId | undefined
-  assetFilterPredicate?: (asset: Asset) => boolean
-  chainIdFilterPredicate?: (chainId: ChainId) => boolean
+  assetFilterPredicate: (asset: Asset) => boolean
+  chainIdFilterPredicate: (chainId: ChainId) => boolean
   onSwitchAssets: () => void
   onChangeIsInputtingFiatSellAmount: (isInputtingFiatSellAmount: boolean) => void
   onChangeSellAmountCryptoPrecision: (sellAmountCryptoPrecision: string) => void

src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx

@@ -1,7 +1,9 @@
+import type { ChainId } from '@shapeshiftoss/caip'
 import { isLedger } from '@shapeshiftoss/hdwallet-ledger'
 import { isArbitrumBridgeTradeQuote } from '@shapeshiftoss/swapper/dist/swappers/ArbitrumBridgeSwapper/getTradeQuote/getTradeQuote'
 import type { ThorTradeQuote } from '@shapeshiftoss/swapper/dist/swappers/ThorchainSwapper/types'
 import type { Asset } from '@shapeshiftoss/types'
+import { KnownChainIds } from '@shapeshiftoss/types'
 import { positiveOrZero } from '@shapeshiftoss/utils'
 import type { FormEvent } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -14,18 +16,17 @@ import {
   WarningAcknowledgement,
 } from 'components/Acknowledgement/Acknowledgement'
 import { TradeAssetSelect } from 'components/AssetSelection/AssetSelection'
-import { MessageOverlay } from 'components/MessageOverlay/MessageOverlay'
 import { getMixpanelEventData } from 'components/MultiHopTrade/helpers'
 import { useInputOutputDifferenceDecimalPercentage } from 'components/MultiHopTrade/hooks/useInputOutputDifference'
 import { TradeInputTab, TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { WalletActions } from 'context/WalletProvider/actions'
 import { useErrorHandler } from 'hooks/useErrorToast/useErrorToast'
+import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useModal } from 'hooks/useModal/useModal'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { fromBaseUnit } from 'lib/math'
 import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton'
 import { MixPanelEvent } from 'lib/mixpanel/types'
-import { isKeplrHDWallet } from 'lib/utils'
 import { selectIsVotingPowerLoading } from 'state/apis/snapshot/selectors'
 import type { ApiQuote } from 'state/apis/swapper/types'
 import { selectIsAnyAccountMetadataLoadedForChainId, selectWalletId } from 'state/slices/selectors'
@@ -131,8 +132,6 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
     isLoading: isWalletReceiveAddressLoading,
   } = useTradeReceiveAddress()
 
-  const isKeplr = useMemo(() => !!wallet && isKeplrHDWallet(wallet), [wallet])
-
   const isVotingPowerLoading = useAppSelector(selectIsVotingPowerLoading)
 
   const isLoading = useMemo(
@@ -157,11 +156,6 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
     ],
   )
 
-  const overlayTitle = useMemo(
-    () => translate('trade.swappingComingSoonForWallet', { walletName: 'Keplr' }),
-    [translate],
-  )
-
   useEffect(() => {
     // Reset the trade warning if the active quote has changed, i.e. a better quote has come in and the
     // user has not yet confirmed the previous one
@@ -310,12 +304,33 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
     [dispatch],
   )
 
+  const isSolanaSwapperEnabled = useFeatureFlag('SolanaSwapper')
+  const assetFilterPredicate = useCallback(
+    (asset: Asset) => {
+      if (asset.chainId === KnownChainIds.SolanaMainnet) return isSolanaSwapperEnabled
+
+      return true
+    },
+    [isSolanaSwapperEnabled],
+  )
+
+  const chainIdFilterPredicate = useCallback(
+    (chainId: ChainId) => {
+      if (chainId === KnownChainIds.SolanaMainnet) return isSolanaSwapperEnabled
+
+      return true
+    },
+    [isSolanaSwapperEnabled],
+  )
+
   const handleBuyAssetClick = useCallback(() => {
     buyAssetSearch.open({
       onAssetClick: setBuyAsset,
       title: 'trade.tradeTo',
+      assetFilterPredicate,
+      chainIdFilterPredicate,
     })
-  }, [buyAssetSearch, setBuyAsset])
+  }, [assetFilterPredicate, buyAssetSearch, chainIdFilterPredicate, setBuyAsset])
 
   const buyTradeAssetSelect = useMemo(
     () => (
@@ -324,9 +339,10 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
         onAssetClick={handleBuyAssetClick}
         onAssetChange={setBuyAsset}
         onlyConnectedChains={false}
+        chainIdFilterPredicate={chainIdFilterPredicate}
       />
     ),
-    [buyAsset.assetId, handleBuyAssetClick, setBuyAsset],
+    [buyAsset.assetId, handleBuyAssetClick, setBuyAsset, chainIdFilterPredicate],
   )
 
   const bodyContent = useMemo(() => {
@@ -344,6 +360,8 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
         setSellAccountId={setSellAssetAccountId}
         onChangeIsInputtingFiatSellAmount={handleIsInputtingFiatSellAmountChange}
         onChangeSellAmountCryptoPrecision={handleChangeSellAmountCryptoPrecision}
+        assetFilterPredicate={assetFilterPredicate}
+        chainIdFilterPredicate={chainIdFilterPredicate}
       >
         <TradeAssetInput
           // Disable account selection when user set a manual receive address
@@ -386,6 +404,8 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
     sellAsset,
     sellAssetAccountId,
     translate,
+    assetFilterPredicate,
+    chainIdFilterPredicate,
     handleChangeSellAmountCryptoPrecision,
     handleIsInputtingFiatSellAmountChange,
     handleSwitchAssets,
@@ -410,15 +430,15 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
   // accident and we should implement better control flow to handle this in a more robust way so if
   // we make any changes to these we aren't left in a broken state.
   return (
-    <MessageOverlay show={isKeplr} title={overlayTitle}>
+    <>
       <ArbitrumBridgeAcknowledgement
         onAcknowledge={handleFormSubmit}
-        shouldShowAcknowledgement={shouldShowArbitrumBridgeAcknowledgement}
+        shouldShowAcknowledgement={Boolean(walletId && shouldShowArbitrumBridgeAcknowledgement)}
         setShouldShowAcknowledgement={setShouldShowArbitrumBridgeAcknowledgement}
       />
       <StreamingAcknowledgement
         onAcknowledge={handleFormSubmit}
-        shouldShowAcknowledgement={shouldShowStreamingAcknowledgement}
+        shouldShowAcknowledgement={Boolean(walletId && shouldShowStreamingAcknowledgement)}
         setShouldShowAcknowledgement={setShouldShowStreamingAcknowledgement}
         estimatedTimeMs={
           tradeQuoteStep?.estimatedExecutionTimeMs ? tradeQuoteStep.estimatedExecutionTimeMs : 0
@@ -427,7 +447,7 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
       <WarningAcknowledgement
         message={warningAcknowledgementMessage}
         onAcknowledge={handleWarningAcknowledgementSubmit}
-        shouldShowAcknowledgement={shouldShowWarningAcknowledgement}
+        shouldShowAcknowledgement={Boolean(walletId && shouldShowWarningAcknowledgement)}
         setShouldShowAcknowledgement={setShouldShowWarningAcknowledgement}
       />
       <SharedTradeInput
@@ -443,6 +463,6 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput
         onSubmit={handleTradeQuoteConfirm}
         onChangeTab={onChangeTab}
       />
-    </MessageOverlay>
+    </>
   )
 }

src/components/MultiHopTrade/components/TradeInput/components/TradeQuotes/TradeQuote.tsx

@@ -1,5 +1,5 @@
 import { WarningIcon } from '@chakra-ui/icons'
-import { Flex, Skeleton, Tag, Tooltip } from '@chakra-ui/react'
+import { Circle, Flex, Skeleton, Tag, Tooltip } from '@chakra-ui/react'
 import type { AssetId } from '@shapeshiftoss/caip'
 import {
   DEFAULT_GET_TRADE_QUOTE_POLLING_INTERVAL,
@@ -187,17 +187,23 @@ export const TradeQuote: FC<TradeQuoteProps> = memo(
         case !quote || error !== undefined:
           const translationParams = getQuoteErrorTranslation(error ?? defaultError)
           return (
-            <Tag size='sm' colorScheme='red'>
-              {translate(
+            <Tooltip
+              label={translate(
                 ...(Array.isArray(translationParams) ? translationParams : [translationParams]),
               )}
-            </Tag>
+            >
+              <Circle size={6}>
+                <WarningIcon color='text.error' boxSize={4} />
+              </Circle>
+            </Tooltip>
           )
         case !hasAmountWithPositiveReceive && isAmountEntered:
           return (
-            <Tag size='sm' colorScheme='red'>
-              {translate('trade.rates.tags.negativeRatio')}
-            </Tag>
+            <Tooltip label={translate('trade.rates.tags.negativeRatio')}>
+              <Circle size={6}>
+                <WarningIcon color='text.error' boxSize={4} />
+              </Circle>
+            </Tooltip>
           )
         case isBest:
           return (

src/components/MultiHopTrade/components/TradeInput/components/TradeQuotes/components/TradeQuoteCard.tsx

@@ -67,9 +67,17 @@ export const TradeQuoteCard = ({
     >
       <CardHeader fontWeight='normal' fontSize='sm' pl={3} pr={4}>
         <Flex justifyContent='space-between' alignItems='center'>
-          <Flex gap={2} alignItems='center'>
+          <Flex
+            gap={2}
+            alignItems='center'
+            overflow='hidden'
+            textOverflow='ellipsis'
+            whiteSpace='nowrap'
+          >
             <SwapperIcon swapperName={swapperName} />
-            <RawText fontWeight='medium'>{title}</RawText>
+            <RawText fontWeight='medium' isTruncated>
+              {title}
+            </RawText>
           </Flex>
           {headerContent}
         </Flex>

src/config.ts

@@ -175,6 +175,7 @@ const validators = {
   REACT_APP_FEATURE_LIMIT_ORDERS: bool({ default: false }),
   REACT_APP_ZRX_BASE_URL: url(),
   REACT_APP_FEATURE_CHAINFLIP: bool({ default: false }),
+  REACT_APP_FEATURE_SWAPPER_SOLANA: bool({ default: false }),
   REACT_APP_FEATURE_CHAINFLIP_DCA: bool({ default: false }),
   REACT_APP_CHAINFLIP_API_KEY: str(),
   REACT_APP_CHAINFLIP_API_URL: url(),

src/context/AppProvider/AppContext.tsx

@@ -6,7 +6,6 @@ import { DEFAULT_HISTORY_TIMEFRAME } from 'constants/Config'
 import { LanguageTypeEnum } from 'constants/LanguageTypeEnum'
 import React, { useEffect } from 'react'
 import { useTranslate } from 'react-polyglot'
-import { useNfts } from 'components/Nfts/hooks/useNfts'
 import { usePlugins } from 'context/PluginProvider/PluginProvider'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useIsSnapInstalled } from 'hooks/useIsSnapInstalled/useIsSnapInstalled'
@@ -87,8 +86,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     }
   })
 
-  useNfts()
-
   // track anonymous portfolio
   useMixpanelPortfolioTracking()