Merge branch 'develop' of https://github.com/shapeshift/web into feat…

…ure-walletconnect-wallet

package.json

@@ -86,25 +86,25 @@
     "@formatjs/intl-pluralrules": "^5.0.2",
     "@metamask/detect-provider": "^1.2.0",
     "@reduxjs/toolkit": "^1.8.0",
-    "@shapeshiftoss/asset-service": "^6.3.1",
+    "@shapeshiftoss/asset-service": "^6.4.0",
     "@shapeshiftoss/caip": "^6.3.0",
     "@shapeshiftoss/chain-adapters": "^7.7.0",
     "@shapeshiftoss/errors": "^1.1.2",
-    "@shapeshiftoss/hdwallet-core": "^1.26.0",
-    "@shapeshiftoss/hdwallet-keepkey": "^1.26.0",
-    "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.26.0",
-    "@shapeshiftoss/hdwallet-keplr": "^1.26.0",
-    "@shapeshiftoss/hdwallet-metamask": "^1.26.0",
-    "@shapeshiftoss/hdwallet-native": "^1.26.0",
-    "@shapeshiftoss/hdwallet-native-vault": "^1.26.0",
-    "@shapeshiftoss/hdwallet-portis": "^1.26.0",
-    "@shapeshiftoss/hdwallet-tallyho": "^1.26.0",
-    "@shapeshiftoss/hdwallet-walletconnect": "^1.26.0",
-    "@shapeshiftoss/hdwallet-xdefi": "^1.26.0",
-    "@shapeshiftoss/investor-foxy": "^4.0.3",
-    "@shapeshiftoss/investor-yearn": "^4.0.3",
+    "@shapeshiftoss/hdwallet-core": "^1.27.0",
+    "@shapeshiftoss/hdwallet-keepkey": "^1.27.0",
+    "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.27.0",
+    "@shapeshiftoss/hdwallet-keplr": "^1.27.0",
+    "@shapeshiftoss/hdwallet-metamask": "^1.27.0",
+    "@shapeshiftoss/hdwallet-native": "^1.27.0",
+    "@shapeshiftoss/hdwallet-native-vault": "^1.27.0",
+    "@shapeshiftoss/hdwallet-portis": "^1.27.0",
+    "@shapeshiftoss/hdwallet-tallyho": "^1.27.0",
+    "@shapeshiftoss/hdwallet-walletconnect": "^1.27.0",
+    "@shapeshiftoss/hdwallet-xdefi": "^1.27.0",
+    "@shapeshiftoss/investor-foxy": "^4.0.4",
+    "@shapeshiftoss/investor-yearn": "^4.0.4",
     "@shapeshiftoss/logger": "^1.1.2",
-    "@shapeshiftoss/market-service": "^6.4.1",
+    "@shapeshiftoss/market-service": "^6.4.2",
     "@shapeshiftoss/swapper": "^8.4.0",
     "@shapeshiftoss/types": "^7.0.0",
     "@shapeshiftoss/unchained-client": "^9.2.0",

src/assets/translations/en/main.json

@@ -1182,7 +1182,7 @@
         "title": "Help us improve ShapeShift",
         "description": "ShapeShift would like to gather usage data to better understand how our users interact with the app. This data will be used to continually improve the usability and user experience of our product.",
         "actionsSentence": "ShapeShift will...",
-        "noThanks": "No Thanks, take me to the private version",
+        "noThanks": "No thanks, take me to the private version",
         "sendEvents": "Send anonymized click and pageview events",
         "neverCollectPersonalInformations": "Never collect keys, addresses, transactions, balances, or any personal information ",
         "neverCollectIp": "Never collect your full IP address",

src/components/Modals/FiatRamps/views/Overview.tsx

@@ -12,7 +12,7 @@ import {
   Text as RawText,
   useToast,
 } from '@chakra-ui/react'
-import { btcChainId, cosmosChainId, ethChainId } from '@shapeshiftoss/caip'
+import { btcChainId, cosmosChainId, ethChainId, fromAssetId } from '@shapeshiftoss/caip'
 import { ChainAdapterManager } from '@shapeshiftoss/chain-adapters'
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
@@ -22,7 +22,7 @@ import { SlideTransition } from 'components/SlideTransition'
 import { Text } from 'components/Text'
 import { useModal } from 'hooks/useModal/useModal'
 import { useWallet } from 'hooks/useWallet/useWallet'
-import { assetIdToChainId, ChainIdType } from 'state/slices/portfolioSlice/utils'
+import { ChainIdType } from 'state/slices/portfolioSlice/utils'
 
 import { FiatRampActionButtons } from '../components/FiatRampActionButtons'
 import { FiatRamp, supportedFiatRamps } from '../config'
@@ -62,7 +62,7 @@ const generateAddresses: GenerateAddresses = props => {
   const assetId = selectedAsset?.assetId
   const empty: GenerateAddressesReturn = ['', '', '']
   if (!assetId) return empty
-  const chainId = assetIdToChainId(assetId)
+  const chainId = fromAssetId(assetId).chainId
   switch (chainId) {
     case ethChainId:
       return [ensName || ethAddress, ethAddress, ensName || middleEllipsis(ethAddress, 11)]
@@ -112,7 +112,9 @@ export const Overview: React.FC<OverviewProps> = ({
   useEffect(() => {
     if (!wallet) return
     supportsAddressVerifying && setSupportsAddressVerifying(true)
-    setChainId(assetIdToChainId(selectedAsset?.assetId ?? '') ?? ethChainId)
+    const maybeAssetId = selectedAsset?.assetId
+    const chainId = maybeAssetId ? fromAssetId(maybeAssetId).chainId : ethChainId
+    setChainId(chainId)
     // supportsAddressVerifying will cause infinite loop
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedAsset, setChainId, setSupportsAddressVerifying, wallet])

src/components/Trade/TradeConfirm/TradeConfirm.tsx

@@ -163,6 +163,9 @@ export const TradeConfirm = ({ history }: RouterProps) => {
                   <RawText>{`1 ${trade.sellAsset.symbol} = ${firstNonZeroDecimal(
                     bnOrZero(trade?.rate),
                   )} ${trade?.buyAsset?.symbol}`}</RawText>
+                  {!!fees?.tradeFeeSource && (
+                    <RawText color='gray.500'>@{fees?.tradeFeeSource}</RawText>
+                  )}
                 </Box>
               </Row>
               <Row>
@@ -180,10 +183,7 @@ export const TradeConfirm = ({ history }: RouterProps) => {
                 <HelperTooltip label={translate('trade.tooltip.shapeshiftFee')}>
                   <Row.Label>
                     <Text
-                      translation={[
-                        'trade.tradeFeeSource',
-                        { tradeFeeSource: fees?.tradeFeeSource ?? 'Trade' },
-                      ]}
+                      translation={['trade.tradeFeeSource', { tradeFeeSource: 'ShapeShift' }]}
                     />
                   </Row.Label>
                 </HelperTooltip>

src/context/WalletProvider/WalletViewsSwitch.tsx

@@ -59,6 +59,11 @@ export const WalletViewsSwitch = () => {
     await cancelWalletRequests()
   }
 
+  const onContinue = useCallback(() => {
+    // Without this check we'll fire again once a KeepKey initializes and ask the user to select a wallet again
+    if (!initialRoute || initialRoute === '/') history.push('/select')
+  }, [history, initialRoute])
+
   useEffect(() => {
     if (initialRoute) {
       history.push(initialRoute)
@@ -107,10 +112,7 @@ export const WalletViewsSwitch = () => {
                   })}
 
                 <Route path={'/select'} children={() => <SelectModal />} />
-                <Route
-                  path={'/'}
-                  children={() => <OptInModalBody onContinue={() => history.push('/select')} />}
-                />
+                <Route path={'/'} children={() => <OptInModalBody onContinue={onContinue} />} />
               </Switch>
             </SlideTransition>
           </AnimatePresence>

src/state/slices/portfolioSlice/selectors.ts

@@ -3,8 +3,10 @@ import {
   AccountId,
   AssetId,
   btcAssetId,
+  ChainId,
   cosmosAssetId,
   ethAssetId,
+  fromAssetId,
   osmosisAssetId,
 } from '@shapeshiftoss/caip'
 import { cosmos } from '@shapeshiftoss/chain-adapters'
@@ -46,7 +48,6 @@ import {
   PortfolioBalancesById,
 } from './portfolioSliceCommon'
 import {
-  assetIdToChainId,
   findAccountsByAssetId,
   makeBalancesByChainBucketsFlattened,
   makeSortedAccountBalances,
@@ -123,6 +124,7 @@ export const selectIsPortfolioLoaded = createSelector(
      * until the portfolioAssetIds includes supported chains fee assets, it's not fully loaded
      * the golf below ensures that's the case
      */
+    const assetIdToChainId = (assetId: AssetId): ChainId => fromAssetId(assetId).chainId
 
     return !size(
       difference(

src/state/slices/portfolioSlice/utils.test.ts

@@ -1,31 +1,15 @@
-import { AssetId, btcChainId, ethChainId } from '@shapeshiftoss/caip'
+import { AssetId } from '@shapeshiftoss/caip'
 import { Asset, KnownChainIds } from '@shapeshiftoss/types'
 
 import {
-  accountIdToChainId,
   accountIdToLabel,
   accountIdToSpecifier,
-  assetIdToChainId,
   findAccountsByAssetId,
   makeBalancesByChainBucketsFlattened,
   makeSortedAccountBalances,
   trimWithEndEllipsis,
 } from './utils'
 
-describe('accountIdToChainId', () => {
-  it('can get eth chainId from accountId', () => {
-    const accountId = 'eip155:1:0xdef1cafe'
-    const chainId = accountIdToChainId(accountId)
-    expect(chainId).toEqual(ethChainId)
-  })
-
-  it('can get btc chainId from accountId', () => {
-    const accountId = 'bip122:000000000019d6689c085ae165831e93:xpubfoobarbaz'
-    const chainId = accountIdToChainId(accountId)
-    expect(chainId).toEqual(btcChainId)
-  })
-})
-
 describe('accountIdToSpecifier', () => {
   it('can get eth address from accountId', () => {
     const address = '0xdef1cafe'
@@ -72,22 +56,6 @@ describe('accountIdToLabel', () => {
   })
 })
 
-describe('assetIdToChainId', () => {
-  it('returns a ETH chainId for a given ETH assetId', () => {
-    const ethAssetId = 'eip155:1/erc20:0x3155ba85d5f96b2d030a4966af206230e46849cb'
-    const chainId = 'eip155:1'
-    const result = assetIdToChainId(ethAssetId)
-    expect(result).toEqual(chainId)
-  })
-
-  it('returns a BTC chainId for a given BTC assetId', () => {
-    const btcAssetId = 'bip122:000000000019d6689c085ae165831e93/slip44:0'
-    const btcChainId = 'bip122:000000000019d6689c085ae165831e93'
-    const result = assetIdToChainId(btcAssetId)
-    expect(result).toEqual(btcChainId)
-  })
-})
-
 describe('findAccountsByAssetId', () => {
   const ethAccountId = 'eip155:1:0xdef1cafe'
   const ethAccount2Id = 'eip155:1:0xryankk'

src/state/slices/portfolioSlice/utils.ts

@@ -37,15 +37,6 @@ import {
 export const chainIds = [ethChainId, btcChainId, cosmosChainId, osmosisChainId] as const
 export type ChainIdType = typeof chainIds[number]
 
-export const assetIdToChainId = (assetId: AssetId): ChainIdType =>
-  assetId.split('/')[0] as ChainIdType
-
-export const accountIdToChainId = (accountId: AccountSpecifier): ChainId => {
-  // accountId = 'eip155:1:0xdef1...cafe
-  const [chain, network] = accountId.split(':')
-  return `${chain}:${network}`
-}
-
 export const accountIdToSpecifier = (accountId: AccountSpecifier): string => {
   // in the case of account based chains (eth), this is an address
   // in the case of utxo based chains, this is an x/y/zpub
@@ -84,7 +75,7 @@ export const accountIdToLabel = (accountId: AccountSpecifier): string => {
    * for now, for all intents and purposes, this is sufficient and works.
    *
    */
-  const chainId = accountIdToChainId(accountId)
+  const chainId = fromAccountId(accountId).chainId
   const specifier = accountIdToSpecifier(accountId)
   switch (chainId) {
     case ethChainId: {
@@ -112,7 +103,7 @@ export const accountIdToLabel = (accountId: AccountSpecifier): string => {
 
 // note - this is not really a selector, more of a util
 export const accountIdToFeeAssetId = (accountId: AccountSpecifier): AssetId =>
-  chainIdToFeeAssetId(accountIdToChainId(accountId))
+  chainIdToFeeAssetId(fromAccountId(accountId).chainId)
 
 export const accountIdToAccountType = (accountId: AccountSpecifier): UtxoAccountType | null => {
   const pubkeyVariant = last(accountId.split(':'))
@@ -146,7 +137,7 @@ export const findAccountsByAssetId = (
   // return the account(s) for that given assets chain
   if (result.length === 0) {
     return Object.keys(portfolioAccounts).filter(
-      accountId => assetIdToChainId(assetId) === accountIdToChainId(accountId),
+      accountId => fromAssetId(assetId).chainId === fromAccountId(accountId).chainId,
     )
   }
   return result