added starknetkit wallet modal on connect

src/context/StarknetProvider.tsx

@@ -36,10 +36,10 @@ export const useAvailableConnectors = () => {
       new WebWalletConnector({
         url: isTestnet ? 'https://web.hydrogen.argent47.net' : 'https://web.argent.xyz/',
       }),
-      // new ArgentMobileConnector({
-      //   dappName: 'Jediswap Interface',
-      //   icons: ['https://app.starknet.id/visuals/StarknetIdLogo.svg'],
-      // }),
+      new ArgentMobileConnector({
+        dappName: 'Jediswap Interface',
+        icons: ['https://app.starknet.id/visuals/StarknetIdLogo.svg'],
+      }),
     ],
     [hasOKX]
   )

src/hooks/starknet-react.ts

@@ -5,6 +5,8 @@ import { ChainId, Currency, Token } from '@vnaysn/jediswap-sdk-core'
 import { WETH } from '@jediswap/sdk'
 import { useDefaultActiveTokens } from './Tokens'
 import formatBalance from 'utils/formatBalance'
+import { useAvailableConnectors } from 'context/StarknetProvider'
+import { useStarknetkitConnectModal } from 'starknetkit'
 // Define the type for the balances object
 declare enum StarknetChainId {
   SN_MAIN = '0x534e5f4d41494e',
@@ -56,6 +58,21 @@ export const useAccountDetails = (): {
   return { account, address, isConnected, chainId, connector }
 }
 
+export const useWalletConnect = () => {
+  const connectors = useAvailableConnectors()
+  const { connectAsync } = useConnect()
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors,
+  })
+  return async () => {
+    const { connector } = await starknetkitConnectModal()
+    if (!connector) {
+      return
+    }
+    await connectAsync({ connector })
+  }
+}
+
 export const useConnectors = () => {
   const { connect, connectors } = useConnect()
   return { connect, connectors }

src/pages/AddLiquidity/index.tsx

@@ -65,12 +65,14 @@ import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { Dots } from '../Pool/styled'
 import { Review } from './Review'
 import { DynamicSection, MediumOnly, ResponsiveTwoColumns, ScrollablePage, StyledInput, Wrapper } from './styled'
-import { useAccountDetails } from 'hooks/starknet-react'
-import { useContractWrite, useProvider } from '@starknet-react/core'
+import { useAccountDetails, useWalletConnect } from 'hooks/starknet-react'
+import { useConnect, useContractWrite, useProvider } from '@starknet-react/core'
 import { BigNumberish, cairo, Call, CallData, hash, num } from 'starknet'
 import JSBI from 'jsbi'
 import { toI32 } from 'utils/toI32'
 import { useApprovalCall } from 'hooks/useApproveCall'
+import { useStarknetkitConnectModal } from 'starknetkit'
+import { useAvailableConnectors } from 'context/StarknetProvider'
 
 const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
@@ -492,9 +494,11 @@ function AddLiquidity() {
   }, [searchParams])
   // END: sync values with query string
 
+  const toggleWalletModal = useWalletConnect()
+
   const Buttons = () =>
     !account ? (
-      <ButtonLight onClick={toggleWalletDrawer} $borderRadius="12px" padding="12px">
+      <ButtonLight onClick={toggleWalletModal} $borderRadius="12px" padding="12px">
         <Trans>Connect wallet</Trans>
       </ButtonLight>
     ) : (

src/pages/Pool/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, InterfaceEventName, InterfacePageName } from '@uniswap/analytics-events'
-import { useAccountDetails } from 'hooks/starknet-react'
+import { useAccountDetails, useWalletConnect } from 'hooks/starknet-react'
 import { useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, BookOpen, ChevronDown, ChevronsRight, Inbox, Layers } from 'react-feather'
 import { Link } from 'react-router-dom'
@@ -21,6 +21,9 @@ import { useUserHideClosedPositions } from 'state/user/hooks'
 import { ThemedText } from 'theme/components'
 import { LoadingRows } from './styled'
 import fetchTokenIds from 'api/fetchTokenId'
+import { useStarknetkitConnectModal } from 'starknetkit'
+import { useAvailableConnectors } from 'context/StarknetProvider'
+import { useConnect } from '@starknet-react/core'
 
 const PageWrapper = styled(AutoColumn)`
   padding: 0px 8px 0px;
@@ -294,7 +297,7 @@ function WrongNetworkCard() {
 
 function PositionDetails(props: any) {
   const { address } = useAccountDetails()
-  const { tokenIds, showConnectAWallet, toggleWalletDrawer } = props
+  const { tokenIds, showConnectAWallet } = props
   const [userHideClosedPositions, setUserHideClosedPositions] = useUserHideClosedPositions()
   const { positions, loading: positionsLoading } = useV3PositionsFromTokenId(tokenIds, address)
   const theme = useTheme()
@@ -311,6 +314,8 @@ function PositionDetails(props: any) {
     [closedPositions, openPositions, userHideClosedPositions]
   )
 
+  const toggleWalletModal = useWalletConnect()
+
   return (
     <>
       <>
@@ -341,7 +346,7 @@ function PositionDetails(props: any) {
             {showConnectAWallet && (
               <ButtonPrimary
                 style={{ marginTop: '2em', marginBottom: '2em', padding: '8px 16px', width: 'fit-content' }}
-                onClick={toggleWalletDrawer}
+                onClick={toggleWalletModal}
               >
                 <Trans>Connect wallet</Trans>
               </ButtonPrimary>

src/pages/RemoveLiquidity/index.tsx

@@ -4,7 +4,7 @@ import type { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, InterfaceEventName, LiquidityEventName } from '@uniswap/analytics-events'
 import { Currency, Percent } from '@vnaysn/jediswap-sdk-core'
-import { useAccountDetails } from 'hooks/starknet-react'
+import { useAccountDetails, useWalletConnect } from 'hooks/starknet-react'
 import { useCallback, useMemo, useState } from 'react'
 import { ArrowDown, Plus } from 'react-feather'
 import { useNavigate, useParams } from 'react-router-dom'
@@ -47,7 +47,9 @@ import { calculateSlippageAmount } from '../../utils/calculateSlippageAmount'
 import { currencyId } from '../../utils/currencyId'
 import AppBody from '../AppBody'
 import { ClickableText, MaxButton, Wrapper } from '../Pool/styled'
-import { useProvider } from '@starknet-react/core'
+import { useConnect, useProvider } from '@starknet-react/core'
+import { useAvailableConnectors } from 'context/StarknetProvider'
+import { useStarknetkitConnectModal } from 'starknetkit'
 
 const DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100)
 
@@ -73,7 +75,7 @@ function RemoveLiquidity() {
   const trace = useTrace()
 
   // toggle wallet when disconnected
-  const toggleWalletDrawer = useToggleAccountDrawer()
+  const toggleWalletModal = useWalletConnect()
 
   // burn state
   const { independentField, typedValue } = useBurnState()
@@ -659,7 +661,7 @@ function RemoveLiquidity() {
                   properties={{ received_swap_quote: false }}
                   element={InterfaceElementName.CONNECT_WALLET_BUTTON}
                 >
-                  <ButtonLight onClick={toggleWalletDrawer}>
+                  <ButtonLight onClick={toggleWalletModal}>
                     <Trans>Connect wallet</Trans>
                   </ButtonLight>
                 </TraceEvent>

src/pages/Swap/index.tsx

@@ -2,7 +2,7 @@
 
 import { Trans } from '@lingui/macro'
 import { ChainId, Currency, CurrencyAmount, Percent, Token } from '@vnaysn/jediswap-sdk-core'
-import { useAccountDetails } from 'hooks/starknet-react'
+import { useAccountDetails, useWalletConnect } from 'hooks/starknet-react'
 import JSBI from 'jsbi'
 import { ReactNode, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { ArrowDown } from 'react-feather'
@@ -301,8 +301,10 @@ export function Swap({
 
   const theme = useTheme()
 
-  // toggle wallet when disconnected
-  const toggleWalletDrawer = useToggleAccountDrawer()
+  // // toggle wallet when disconnected
+  // const toggleWalletDrawer = useToggleAccountDrawer()
+
+  const toggleWalletModal = useWalletConnect()
 
   // swap state
   const prefilledState = useMemo(
@@ -917,7 +919,7 @@ export function Swap({
               <Trans>Unsupported asset</Trans>
             </ButtonPrimary>
           ) : connectionReady && !account ? (
-            <ButtonPrimary onClick={toggleWalletDrawer} size={ButtonSize.large}>
+            <ButtonPrimary onClick={toggleWalletModal} size={ButtonSize.large}>
               <Trans>Connect wallet</Trans>
             </ButtonPrimary>
           ) : isFetchingOutput ? (