chore: release v1.637.0

.env.base

@@ -38,6 +38,7 @@ REACT_APP_FEATURE_ACCOUNT_MANAGEMENT_LEDGER=true
 REACT_APP_FEATURE_RFOX=true
 REACT_APP_FEATURE_RFOX_REWARDS_TX_HISTORY=false
 REACT_APP_FEATURE_ARBITRUM_BRIDGE=false
+REACT_APP_FEATURE_CUSTOM_TOKEN_IMPORT=false
 
 # absolute URL prefix
 REACT_APP_ABSOLUTE_URL_PREFIX=https://app.shapeshift.com

.env.dev

@@ -2,6 +2,7 @@
 REACT_APP_FEATURE_RFOX_REWARDS_TX_HISTORY=true
 REACT_APP_FEATURE_ARBITRUM_BRIDGE=true
 REACT_APP_FEATURE_COWSWAP_ARBITRUM=true
+REACT_APP_FEATURE_CUSTOM_TOKEN_IMPORT=true
 
 # logging
 REACT_APP_REDUX_WINDOW=false

.env.develop

@@ -3,6 +3,7 @@ REACT_APP_FEATURE_RFOX_REWARDS_TX_HISTORY=true
 REACT_APP_FEATURE_CHATWOOT=true
 REACT_APP_FEATURE_ARBITRUM_BRIDGE=true
 REACT_APP_FEATURE_COWSWAP_ARBITRUM=true
+REACT_APP_FEATURE_CUSTOM_TOKEN_IMPORT=true
 
 # mixpanel
 REACT_APP_MIXPANEL_TOKEN=1c1369f6ea23a6404bac41b42817cc4b

package.json

@@ -193,7 +193,7 @@
     "react-swipeable-views-utils": "^0.14.0",
     "react-table": "^7.8.0",
     "react-virtualized-auto-sizer": "^1.0.5",
-    "react-virtuoso": "^4.7.1",
+    "react-virtuoso": "^4.7.11",
     "react-window": "^1.8.7",
     "redux-persist": "^6.0.0",
     "reselect": "^4.1.6",

react-app-rewired/headers/csps/alchemy.ts

@@ -14,5 +14,7 @@ export const csp: Csp = {
     'https://base-mainnet.g.alchemy.com/nft/v3/',
     // Mercle IPNS gateway for NFT resolution
     'https://backend.mercle.xyz/ipns/',
+    // Custom token metadata resolution
+    'https://*.g.alchemy.com/v2/',
   ],
 }

src/assets/translations/en/main.json

@@ -109,6 +109,7 @@
     "chartUnavailable": "Balance chart data is temporarily unavailable for %{unavailableAssetNames}.",
     "search": "Search",
     "searchAsset": "Search for asset",
+    "searchNameOrAddress": "Search by name or address",
     "enterAmount": "Enter Amount",
     "enterAddress": "Enter Address",
     "pageNotFound": "The page you're looking for cannot be found",
@@ -150,6 +151,7 @@
     "prices": "Prices",
     "symmetric": "Symmetric",
     "asymmetric": "Asymmetric (%{assetSymbol})",
+    "import": "Import",
     "carousel": {
       "next": "Next",
       "prev": "Previous",
@@ -2372,11 +2374,15 @@
     "highSlippageDeposit": "This deposit has high slippage (%{slippagePercentage}%). Proceed with caution.",
     "highSlippageBorrow": "This borrow has high slippage (%{slippagePercentage}%). Proceed with caution.",
     "highSlippageTrade": "This trade is impacted by price movement (%{slippagePercentage}%). Proceed with caution.",
-    "unsafeTrade": "This trade may be unsafe or below the recommended minimum size, proceed with caution."
+    "unsafeTrade": "This trade may be unsafe or below the recommended minimum size, proceed with caution.",
+    "customToken": "Anyone can create tokens, including fake ones, so caution is needed. Some tokens may not work with ShapeShift. By importing this token, you accept the risks. This token is not traded on major U.S. exchanges or frequently swapped on ShapeShift. Always research before trading."
   },
   "streamingAcknowledgement": {
     "description": "This is a streaming swap, while you get a better price it can take up to %{estimatedTimeHuman} to complete."
   },
+  "customTokenAcknowledgement": {
+    "understand": "I understand the risks"
+  },
   "watchlist": {
     "empty": {
       "title": "Start building your watchlist",

src/assets/translations/fr/main.json

@@ -2412,7 +2412,7 @@
     "rewards": "Récompenses",
     "claims": "Réclamations",
     "chainNotSupportedByWallet": "Chaîne non prise en charge par le porte-monnaie",
-    "changeAddress": "Adr. de change",
+    "changeAddress": "Changer d'adresse",
     "sameAddressNotAllowed": "Même adresse non autorisée",
     "stakingDetails": "Détails de mise",
     "stakeAmount": "Montant à miser",

src/components/Acknowledgement/Acknowledgement.tsx

@@ -179,7 +179,7 @@ export const Acknowledgement = ({
               />
               <Box
                 textAlign={'center'}
-                maxWidth='90%'
+                maxWidth='100%'
                 mb={8}
                 fontWeight='medium'
                 color='text.subtle'

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

@@ -273,10 +273,10 @@ export const TradeInput = ({ isCompact, tradeInputRef }: TradeInputProps) => {
   const receiveAddress = manualReceiveAddress ?? walletReceiveAddress
 
   const { data: _isSmartContractSellAddress, isLoading: isSellAddressByteCodeLoading } =
-    useIsSmartContractAddress(userAddress, sellAsset.chainId)
+    useIsSmartContractAddress(userAddress)
 
   const { data: _isSmartContractReceiveAddress, isLoading: isReceiveAddressByteCodeLoading } =
-    useIsSmartContractAddress(receiveAddress ?? '', buyAsset.chainId)
+    useIsSmartContractAddress(receiveAddress ?? '')
 
   const disableSmartContractSwap = useMemo(() => {
     // Swappers other than THORChain shouldn't be affected by this limitation

src/components/TradeAssetSearch/TradeAssetSearch.tsx

@@ -20,6 +20,7 @@ import { useAppSelector } from 'state/store'
 
 import { DefaultAssetList } from './components/DefaultAssetList'
 import { SearchTermAssetList } from './components/SearchTermAssetList'
+import { CustomAssetAcknowledgement } from './hooks/CustomAssetAcknowledgement'
 import { useGetPopularAssetsQuery } from './hooks/useGetPopularAssetsQuery'
 
 const buttonProps = {
@@ -51,6 +52,8 @@ export const TradeAssetSearch: FC<TradeAssetSearchProps> = ({
   const translate = useTranslate()
   const history = useHistory()
   const [activeChainId, setActiveChainId] = useState<ChainId | 'All'>('All')
+  const [assetToImport, setAssetToImport] = useState<Asset | undefined>(undefined)
+  const [shouldShowWarningAcknowledgement, setShouldShowWarningAcknowledgement] = useState(false)
 
   const portfolioAssetsSortedByBalance = useAppSelector(
     selectPortfolioFungibleAssetsSortedByBalance,
@@ -84,7 +87,7 @@ export const TradeAssetSearch: FC<TradeAssetSearchProps> = ({
     () => ({
       ...register('search'),
       type: 'text',
-      placeholder: translate('common.searchAsset'),
+      placeholder: translate('common.searchNameOrAddress'),
       pl: 10,
       variant: 'filled',
       borderWidth: 0,
@@ -170,8 +173,18 @@ export const TradeAssetSearch: FC<TradeAssetSearchProps> = ({
     })
   }, [handleAssetClick, isPopularAssetIdsLoading, quickAccessAssets])
 
+  const handleImportIntent = useCallback((asset: Asset) => {
+    setAssetToImport(asset)
+    setShouldShowWarningAcknowledgement(true)
+  }, [])
+
   return (
-    <>
+    <CustomAssetAcknowledgement
+      asset={assetToImport}
+      handleAssetClick={handleAssetClick}
+      shouldShowWarningAcknowledgement={shouldShowWarningAcknowledgement}
+      setShouldShowWarningAcknowledgement={setShouldShowWarningAcknowledgement}
+    >
       <Stack
         gap={4}
         px={4}
@@ -210,6 +223,7 @@ export const TradeAssetSearch: FC<TradeAssetSearchProps> = ({
           activeChainId={activeChainId}
           searchString={searchString}
           onAssetClick={handleAssetClick}
+          onImportClick={handleImportIntent}
           isLoading={isPopularAssetIdsLoading}
           allowWalletUnsupportedAssets={allowWalletUnsupportedAssets}
         />
@@ -220,6 +234,6 @@ export const TradeAssetSearch: FC<TradeAssetSearchProps> = ({
           onAssetClick={handleAssetClick}
         />
       )}
-    </>
+    </CustomAssetAcknowledgement>
   )
 }

src/components/TradeAssetSearch/components/GroupedAssetList/GroupedAssetList.tsx

@@ -21,6 +21,7 @@ export type GroupedAssetListProps = {
   groupCounts: number[]
   groupIsLoading: boolean[]
   onAssetClick: (asset: Asset) => void
+  onImportClick?: (asset: Asset) => void
   hideZeroBalanceAmounts: boolean
 }
 
@@ -30,6 +31,7 @@ export const GroupedAssetList = ({
   groupCounts,
   groupIsLoading,
   onAssetClick,
+  onImportClick,
   hideZeroBalanceAmounts,
 }: GroupedAssetListProps) => {
   const renderGroupContent = useCallback(
@@ -68,13 +70,14 @@ export const GroupedAssetList = ({
       return (
         <GroupedAssetRow
           index={index}
-          onClick={onAssetClick}
+          onAssetClick={onAssetClick}
+          onImportClick={onImportClick}
           assets={assets}
           hideZeroBalanceAmounts={hideZeroBalanceAmounts}
         />
       )
     },
-    [assets, hideZeroBalanceAmounts, onAssetClick],
+    [assets, hideZeroBalanceAmounts, onAssetClick, onImportClick],
   )
 
   return (