Feat/reown app kit

apps/cowswap-frontend/src/cosmos.decorator.tsx

@@ -6,8 +6,7 @@ import { ReactNode, StrictMode, useCallback, useContext } from 'react'
 import { CowAnalyticsProvider } from '@cowprotocol/analytics'
 import IMAGE_MOON from '@cowprotocol/assets/cow-swap/moon.svg'
 import IMAGE_SUN from '@cowprotocol/assets/cow-swap/sun.svg'
-import { injectedWalletConnection, WalletUpdater } from '@cowprotocol/wallet'
-import { Web3ReactProvider } from '@web3-react/core'
+import { WalletProvider, WalletUpdater } from '@cowprotocol/wallet'
 
 import { LanguageProvider } from 'i18n'
 import SVG from 'react-inlinesvg'
@@ -88,9 +87,6 @@ export const DemoContainer = styled.div`
 
 const chainId = 5
 
-const { connector, hooks } = injectedWalletConnection
-connector.activate(chainId)
-
 const Fixture = ({ children }: { children: ReactNode }) => {
   return (
     <StrictMode>
@@ -99,7 +95,7 @@ const Fixture = ({ children }: { children: ReactNode }) => {
           <ThemeProvider>
             <ThemedGlobalStyle />
             <LanguageProvider>
-              <Web3ReactProvider connectors={[[connector, hooks]]} network={chainId}>
+              <WalletProvider>
                 <BlockNumberProvider>
                   <WalletUpdater />
                   <Wrapper>
@@ -110,7 +106,7 @@ const Fixture = ({ children }: { children: ReactNode }) => {
                     </CowAnalyticsProvider>
                   </Wrapper>
                 </BlockNumberProvider>
-              </Web3ReactProvider>
+              </WalletProvider>
             </LanguageProvider>
           </ThemeProvider>
         </HashRouter>

apps/cowswap-frontend/src/cow-react/index.tsx

@@ -2,13 +2,13 @@ import '@reach/dialog/styles.css'
 import 'inter-ui'
 import './sentry'
 import { Provider as AtomProvider } from 'jotai'
-import { ReactNode, StrictMode } from 'react'
+import { StrictMode } from 'react'
 
 import { CowAnalyticsProvider } from '@cowprotocol/analytics'
 import { nodeRemoveChildFix } from '@cowprotocol/common-utils'
 import { jotaiStore } from '@cowprotocol/core'
 import { SnackbarsWidget } from '@cowprotocol/snackbars'
-import { Web3Provider } from '@cowprotocol/wallet'
+import { WalletProvider } from '@cowprotocol/wallet'
 
 import { LanguageProvider } from 'i18n'
 import { createRoot } from 'react-dom/client'
@@ -19,7 +19,6 @@ import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
 import { ThemedGlobalStyle, ThemeProvider } from 'theme'
 
 import { cowSwapStore } from 'legacy/state'
-import { useAppSelector } from 'legacy/state/hooks'
 
 import { cowAnalytics } from 'modules/analytics'
 import { App } from 'modules/application/containers/App'
@@ -47,10 +46,10 @@ function Main() {
           <AtomProvider store={jotaiStore}>
             <HashRouter>
               <LanguageProvider>
-                <Web3ProviderInstance>
-                  <ThemeProvider>
-                    <ThemedGlobalStyle />
-                    <BlockNumberProvider>
+                <ThemeProvider>
+                  <ThemedGlobalStyle />
+                  <BlockNumberProvider>
+                    <WalletProvider>
                       <WithLDProvider>
                         <CowAnalyticsProvider cowAnalytics={cowAnalytics}>
                           <WalletUnsupportedNetworkBanner />
@@ -60,9 +59,9 @@ function Main() {
                           <App />
                         </CowAnalyticsProvider>
                       </WithLDProvider>
-                    </BlockNumberProvider>
-                  </ThemeProvider>
-                </Web3ProviderInstance>
+                    </WalletProvider>
+                  </BlockNumberProvider>
+                </ThemeProvider>
               </LanguageProvider>
             </HashRouter>
           </AtomProvider>
@@ -72,17 +71,6 @@ function Main() {
   )
 }
 
-function Web3ProviderInstance({ children }: { children: ReactNode }) {
-  const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
-  const { standaloneMode } = useInjectedWidgetParams()
-
-  return (
-    <Web3Provider standaloneMode={standaloneMode} selectedWallet={selectedWallet}>
-      {children}
-    </Web3Provider>
-  )
-}
-
 function Toasts() {
   const { disableToastMessages = false } = useInjectedWidgetParams()
 

apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx

@@ -10,7 +10,6 @@ import { LinkStyledButton } from 'theme'
 
 import { TransactionStatusText } from 'legacy/components/Copy/index'
 
-// MOD imports
 export const CopyIcon = styled(LinkStyledButton)`
   --iconSize: var(${UI.ICON_SIZE_NORMAL});
   color: inherit;
@@ -33,13 +32,6 @@ export const CopyIcon = styled(LinkStyledButton)`
   }
 `
 
-/* const TransactionStatusText = styled.span`
-  margin-left: 0.25rem;
-  font-size: 0.825rem;
-  ${({ theme }) => theme.flexRowNoWrap};
-  align-items: center;
-` */
-
 export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode; clickableLink?: boolean }) {
   const { toCopy, children, clickableLink } = props
   const [isCopied, setCopied] = useCopyClipboard()

apps/cowswap-frontend/src/legacy/components/Header/NetworkSelector/index.tsx

@@ -7,7 +7,6 @@ import { useMediaQuery } from '@cowprotocol/common-hooks'
 import { UI } from '@cowprotocol/ui'
 import { Media } from '@cowprotocol/ui'
 import { useIsRabbyWallet, useIsSmartContractWallet, useWalletInfo } from '@cowprotocol/wallet'
-import { useWalletProvider } from '@cowprotocol/wallet-provider'
 
 import { Trans } from '@lingui/macro'
 import { darken, transparentize } from 'color2k'
@@ -155,7 +154,6 @@ const NetworkAlertLabel = styled.div`
 `
 
 export function NetworkSelector() {
-  const provider = useWalletProvider()
   const { chainId } = useWalletInfo()
   const node = useRef<HTMLDivElement>(null)
   const nodeMobile = useRef<HTMLDivElement>(null)
@@ -180,7 +178,7 @@ export function NetworkSelector() {
 
   const availableChains = useAvailableChains()
 
-  if (!provider || (isSmartContractWallet && !isRabbyWallet)) {
+  if (isSmartContractWallet && !isRabbyWallet) {
     return null
   }
 

apps/cowswap-frontend/src/legacy/components/Tokens/TokensTable.tsx

@@ -3,12 +3,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { BalancesState } from '@cowprotocol/balances-and-allowances'
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { useFilterTokens, usePrevious } from '@cowprotocol/common-hooks'
+import { useOpenWalletConnectionModal } from '@cowprotocol/wallet'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
 import { Trans } from '@lingui/macro'
 
 import { useErrorModal } from 'legacy/hooks/useErrorMessageAndModal'
-import { useToggleWalletModal } from 'legacy/state/application/hooks'
 
 import { usePendingApprovalModal } from 'common/hooks/usePendingApprovalModal'
 import { CowModal } from 'common/pure/Modal'
@@ -58,7 +58,7 @@ export default function TokenTable({
   prevQuery,
   debouncedQuery,
 }: TokenTableParams) {
-  const toggleWalletModal = useToggleWalletModal()
+  const toggleWalletModal = useOpenWalletConnectionModal()
   const tableRef = useRef<HTMLTableElement | null>(null)
 
   // reset pagination when user is in a page > 1, searching and deletes query
@@ -104,30 +104,30 @@ export default function TokenTable({
   const sortedTokens = useMemo(() => {
     return tokensData
       ? tokensData
-        .filter((x) => !!x)
-        .sort((tokenA, tokenB) => {
-          if (!sortField) {
-            // If there is no sort field selected (default)
-            return tokenComparator(tokenA, tokenB)
-          } else if (sortField === SORT_FIELD.BALANCE) {
-            // If the sort field is Balance
-            if (!balances) return 0
-
-            const balanceA = balances[tokenA.address.toLowerCase()]
-            const balanceB = balances[tokenB.address.toLowerCase()]
-            const balanceComp = balanceComparator(balanceA, balanceB)
-
-            return applyDirection(balanceComp > 0, sortDirection)
-          } else {
-            // If the sort field is something else
-            const sortA = tokenA[sortField]
-            const sortB = tokenB[sortField]
-
-            if (!sortA || !sortB) return 0
-            return applyDirection(sortA > sortB, sortDirection)
-          }
-        })
-        .slice(maxItems * (page - 1), page * maxItems)
+          .filter((x) => !!x)
+          .sort((tokenA, tokenB) => {
+            if (!sortField) {
+              // If there is no sort field selected (default)
+              return tokenComparator(tokenA, tokenB)
+            } else if (sortField === SORT_FIELD.BALANCE) {
+              // If the sort field is Balance
+              if (!balances) return 0
+
+              const balanceA = balances[tokenA.address.toLowerCase()]
+              const balanceB = balances[tokenB.address.toLowerCase()]
+              const balanceComp = balanceComparator(balanceA, balanceB)
+
+              return applyDirection(balanceComp > 0, sortDirection)
+            } else {
+              // If the sort field is something else
+              const sortA = tokenA[sortField]
+              const sortB = tokenB[sortField]
+
+              if (!sortA || !sortB) return 0
+              return applyDirection(sortA > sortB, sortDirection)
+            }
+          })
+          .slice(maxItems * (page - 1), page * maxItems)
       : []
   }, [tokensData, maxItems, page, sortField, tokenComparator, balances, applyDirection, sortDirection])
 
@@ -154,14 +154,14 @@ export default function TokenTable({
       setSortField(newField)
       setSortDirection(newDirection)
     },
-    [sortDirection, sortField]
+    [sortDirection, sortField],
   )
 
   const arrow = useCallback(
     (field: SORT_FIELD) => {
       return sortField === field ? (!sortDirection ? '↑' : '↓') : ''
     },
-    [sortDirection, sortField]
+    [sortDirection, sortField],
   )
 
   useEffect(() => {

apps/cowswap-frontend/src/legacy/state/application/hooks.ts

@@ -27,10 +27,6 @@ export function useCloseModal(_modal: ApplicationModal): Command {
   return useCallback(() => dispatch(setOpenModal(null)), [dispatch])
 }
 
-export function useToggleWalletModal(): Command {
-  return useToggleModal(ApplicationModal.WALLET)
-}
-
 // TODO: These two seem to be gone from original. Check whether they have been replaced
 export function useOpenModal(modal: ApplicationModal): Command {
   const dispatch = useAppDispatch()

apps/cowswap-frontend/src/legacy/state/user/hooks.tsx

@@ -118,10 +118,6 @@ export function useUserTransactionTTL(): [number, (slippage: number) => void] {
   return [deadline, setUserDeadline]
 }
 
-export function useSelectedWallet(): string | undefined {
-  return useAppSelector(({ user: { selectedWallet } }) => selectedWallet)
-}
-
 export function serializeToken(token: Currency | TokenWithLogo): SerializedToken {
   const address = getIsNativeToken(token) ? NATIVE_CURRENCIES[token.chainId as SupportedChainId].address : token.address
 

apps/cowswap-frontend/src/legacy/state/user/reducer.ts

@@ -1,15 +1,8 @@
 import { DEFAULT_DEADLINE_FROM_NOW, SupportedLocale } from '@cowprotocol/common-const'
-import { ConnectionType } from '@cowprotocol/wallet'
 
 import { createSlice } from '@reduxjs/toolkit'
 
-import { userWalletMigration } from './userWalletMigration'
-
-userWalletMigration()
-
 export interface UserState {
-  selectedWallet?: ConnectionType
-
   matchesDarkMode: boolean // whether the dark mode media query matches
 
   userDarkMode: boolean | null // the user's choice for dark mode or light mode
@@ -24,7 +17,6 @@ export interface UserState {
 }
 
 export const initialState: UserState = {
-  selectedWallet: undefined,
   matchesDarkMode: false,
   userDarkMode: null,
   // TODO: mod, shouldn't be here
@@ -38,9 +30,6 @@ const userSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {
-    updateSelectedWallet(state, { payload: { wallet } }) {
-      state.selectedWallet = wallet
-    },
     updateUserDarkMode(state, action) {
       state.userDarkMode = action.payload.userDarkMode
     },
@@ -63,7 +52,6 @@ const userSlice = createSlice({
 })
 
 export const {
-  updateSelectedWallet,
   updateMatchesDarkMode,
   updateUserDarkMode,
   updateHooksEnabled,

apps/cowswap-frontend/src/modules/account/containers/AccountDetails/AccountIcon.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 
 import { HoverTooltip } from '@cowprotocol/ui'
-import { useConnectionType, useWalletDetails } from '@cowprotocol/wallet'
+import { useWalletDetails } from '@cowprotocol/wallet'
 
 import { StatusIcon } from 'modules/wallet/pure/StatusIcon'
 
@@ -14,7 +14,6 @@ interface AccountIconProps {
 
 export const AccountIcon = ({ size = 16, account }: AccountIconProps) => {
   const walletDetails = useWalletDetails()
-  const connectionType = useConnectionType()
   const [imageLoadError, setImageLoadError] = useState(false)
 
   const { icon, walletName } = walletDetails
@@ -23,7 +22,7 @@ export const AccountIcon = ({ size = 16, account }: AccountIconProps) => {
   if (imageLoadError || isIdenticon || !icon) {
     return (
       <IconWrapper size={size}>
-        <StatusIcon size={size} account={account} connectionType={connectionType} />
+        <StatusIcon size={size} account={account} />
       </IconWrapper>
     )
   }
@@ -40,7 +39,7 @@ export const AccountIcon = ({ size = 16, account }: AccountIconProps) => {
 
   return (
     <IconWrapper size={size}>
-      <img src={icon} alt={walletName || connectionType} onError={() => setImageLoadError(true)} />
+      <img src={icon} alt={walletName} onError={() => setImageLoadError(true)} />
     </IconWrapper>
   )
 }