Merge branch 'develop' into add-arbitrum

.env.app

@@ -1,5 +1,6 @@
 # feature flags
 REACT_APP_FEATURE_CHATWOOT=true
+REACT_APP_FEATURE_WALLET_CONNECT_V2=true
 
 # mixpanel
 REACT_APP_MIXPANEL_TOKEN=9d304465fc72224aead9e027e7c24356

.env.dev

@@ -2,7 +2,6 @@
 REACT_APP_FEATURE_NFT_METADATA=true
 REACT_APP_FEATURE_ARBITRUM=true
 REACT_APP_FEATURE_FOX_DISCOUNTS=true
-REACT_APP_FEATURE_WALLET_CONNECT_V2=true
 
 # logging
 REACT_APP_REDUX_WINDOW=false

.env.develop

@@ -2,7 +2,6 @@
 REACT_APP_FEATURE_NFT_METADATA=true
 REACT_APP_FEATURE_CHATWOOT=true
 REACT_APP_FEATURE_ARBITRUM=true
-REACT_APP_FEATURE_WALLET_CONNECT_V2=true
 
 # mixpanel
 REACT_APP_MIXPANEL_TOKEN=1c1369f6ea23a6404bac41b42817cc4b

.env.e2e

@@ -1,5 +1,6 @@
 # mixpanel
 REACT_APP_MIXPANEL_TOKEN=1c1369f6ea23a6404bac41b42817cc4b
+REACT_APP_FEATURE_WALLET_CONNECT_V2=true
 
 # unchained
 REACT_APP_UNCHAINED_ETHEREUM_HTTP_URL=http://localhost:8081

.env.private

@@ -1,6 +1,7 @@
 # feature flags
 REACT_APP_FEATURE_MIXPANEL=false
 REACT_APP_FEATURE_CHATWOOT=false
+REACT_APP_FEATURE_WALLET_CONNECT_V2=true
 
 # unchained
 REACT_APP_UNCHAINED_ETHEREUM_HTTP_URL=https://api.ethereum.shapeshift.com

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

@@ -31,6 +31,17 @@ export const SellAssetInput = memo(
       selectMarketDataByFilter(state, { assetId: asset.assetId }),
     )
 
+    // this is separated from handleSellAssetInputChange to prevent resetting the input value to 0
+    // when the market data changes between keystrokes
+    const handleSellAssetInputChangeInner = useCallback(
+      (sellAmountUserCurrencyHuman: string, sellAmountCryptoPrecision: string) => {
+        setSellAmountUserCurrencyHuman(sellAmountUserCurrencyHuman)
+        setSellAmountCryptoPrecision(sellAmountCryptoPrecision)
+        dispatch(swappers.actions.setSellAmountCryptoPrecision(sellAmountCryptoPrecision))
+      },
+      [dispatch],
+    )
+
     const handleSellAssetInputChange = useCallback(
       (value: string, isFiat: boolean | undefined) => {
         const sellAmountUserCurrencyHuman = isFiat
@@ -39,16 +50,15 @@ export const SellAssetInput = memo(
         const sellAmountCryptoPrecision = isFiat
           ? bnOrZero(value).div(sellAssetUserCurrencyRate).toFixed()
           : value
-        setSellAmountUserCurrencyHuman(sellAmountUserCurrencyHuman)
-        setSellAmountCryptoPrecision(sellAmountCryptoPrecision)
-        dispatch(swappers.actions.setSellAmountCryptoPrecision(sellAmountCryptoPrecision))
+        handleSellAssetInputChangeInner(sellAmountUserCurrencyHuman, sellAmountCryptoPrecision)
       },
-      [dispatch, sellAssetUserCurrencyRate],
+      [handleSellAssetInputChangeInner, sellAssetUserCurrencyRate],
     )
 
+    // reset the input value to 0 when the asset changes
     useEffect(() => {
-      handleSellAssetInputChange('0', undefined)
-    }, [asset, handleSellAssetInputChange])
+      handleSellAssetInputChangeInner('0', '0')
+    }, [asset, handleSellAssetInputChangeInner])
 
     return (
       <TradeAssetInput

src/context/WalletProvider/WalletConnectV2/config.ts

@@ -8,7 +8,6 @@ import type { SupportedWalletInfo } from 'context/WalletProvider/config'
 
 export const WalletConnectV2Config: Omit<SupportedWalletInfo, 'routes'> = {
   adapters: [WalletConnectV2Adapter],
-  supportsMobile: 'browser',
   icon: WalletConnectIcon,
   name: 'WalletConnect',
   description: 'v2',

src/context/WalletProvider/WalletProvider.tsx

@@ -158,6 +158,11 @@ const reducer = (state: InitialState, action: ActionTypes): InitialState => {
     case WalletActions.SET_ADAPTERS:
       return { ...state, adapters: action.payload }
     case WalletActions.SET_WALLET:
+      const currentConnectedType = state.connectedType
+      if (currentConnectedType === 'walletconnectv2') {
+        state.wallet?.disconnect?.()
+        clearLocalWallet()
+      }
       const deviceId = action?.payload?.deviceId
       // set walletId in redux store
       const walletMeta = { walletId: deviceId, walletName: action?.payload?.name }
@@ -780,7 +785,6 @@ export const WalletProvider = ({ children }: { children: React.ReactNode }): JSX
   }, [isDarkMode, state.keyring])
 
   const connect = useCallback((type: KeyManager) => {
-    // remove existing dapp or wallet connections
     dispatch({ type: WalletActions.SET_CONNECTOR_TYPE, payload: type })
     const routeIndex = findIndex(SUPPORTED_WALLETS[type]?.routes, ({ path }) =>
       String(path).endsWith('connect'),

src/plugins/walletConnectToDapps/components/header/DappHeaderMenuSummary.tsx

@@ -0,0 +1,94 @@
+import { Accordion, Box, MenuDivider, MenuGroup } from '@chakra-ui/react'
+import type { SessionTypes } from '@walletconnect/types'
+import { useWalletConnectV2 } from 'plugins/walletConnectToDapps/WalletConnectV2Provider'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslate } from 'react-polyglot'
+
+import { WalletConnectButtons } from './ConnectDapp'
+import { Session } from './Session'
+
+export const DappHeaderMenuSummary = () => {
+  const translate = useTranslate()
+
+  const { sessionsByTopic, web3wallet } = useWalletConnectV2()
+  const menuListRef = useRef<HTMLDivElement>(null)
+  const [maxHeight, setMaxHeight] = useState('65vh')
+
+  const sessions = useMemo(() => Object.values(sessionsByTopic), [sessionsByTopic])
+
+  const { connectedSessions, expiredSessions } = useMemo(() => {
+    const nowTtl = Date.now() / 1000
+    return sessions.reduce<{
+      connectedSessions: SessionTypes.Struct[]
+      expiredSessions: SessionTypes.Struct[]
+    }>(
+      (acc, session) => {
+        if (!session) return acc
+        if (session.expiry < nowTtl) {
+          acc.expiredSessions.push(session)
+        } else {
+          acc.connectedSessions.push(session)
+        }
+        return acc
+      },
+      { connectedSessions: [], expiredSessions: [] },
+    )
+  }, [sessions])
+
+  useEffect(() => {
+    const updateMaxHeight = () => {
+      if (menuListRef.current) {
+        const rect = menuListRef.current.getBoundingClientRect()
+        const distanceFromBottom = window.innerHeight - rect.top - 100
+        setMaxHeight(`${distanceFromBottom}px`)
+      }
+    }
+
+    // call once to set initial value
+    updateMaxHeight()
+
+    // update when window resizes
+    window.addEventListener('resize', updateMaxHeight)
+
+    // cleanup event listener
+    return () => window.removeEventListener('resize', updateMaxHeight)
+  }, [])
+
+  if (!sessions.length || !web3wallet) return null
+
+  return (
+    <>
+      <Box ref={menuListRef} maxHeight={maxHeight} overflowY='auto'>
+        {connectedSessions.length > 0 && (
+          <MenuGroup
+            title={translate('plugins.walletConnectToDapps.header.connectedDapp')}
+            ml={3}
+            color='text.subtle'
+          >
+            <Accordion allowToggle defaultIndex={0} variant='default'>
+              {connectedSessions.map(session => (
+                <Session key={session.topic} session={session} />
+              ))}
+            </Accordion>
+          </MenuGroup>
+        )}
+        {connectedSessions.length > 0 && expiredSessions.length > 0 && <MenuDivider />}
+        {expiredSessions.length > 0 && (
+          <MenuGroup
+            title={translate('plugins.walletConnectToDapps.header.staleDapp')}
+            ml={3}
+            color='text.subtle'
+          >
+            <Accordion allowToggle defaultIndex={0} variant='default'>
+              {expiredSessions.map(session => (
+                <Session key={session.topic} session={session} />
+              ))}
+            </Accordion>
+          </MenuGroup>
+        )}
+      </Box>
+      <MenuDivider />
+      <WalletConnectButtons m={4} />
+    </>
+  )
+}

src/plugins/walletConnectToDapps/components/header/WalletConnectToDappsHeaderButton.tsx

@@ -1,7 +1,7 @@
 import { ChevronDownIcon } from '@chakra-ui/icons'
 import { AvatarGroup, Button, Menu, MenuButton, MenuList } from '@chakra-ui/react'
 import type { SessionTypes } from '@walletconnect/types'
-import { DappHeaderMenuSummaryV2 } from 'plugins/walletConnectToDapps/components/header/DappHeaderMenuSummaryV2'
+import { DappHeaderMenuSummary } from 'plugins/walletConnectToDapps/components/header/DappHeaderMenuSummary'
 import { useWalletConnectV2 } from 'plugins/walletConnectToDapps/WalletConnectV2Provider'
 import { type FC, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
@@ -100,7 +100,7 @@ const WalletConnectV2ConnectedButton = () => {
         flexDir='column'
         pb={0}
       >
-        <DappHeaderMenuSummaryV2 />
+        <DappHeaderMenuSummary />
       </MenuList>
     </Menu>
   )