Fix modals in crypto addresses menu item

src/components/wallets/UseMobileModal.tsx

@@ -0,0 +1,31 @@
+import EvmWallets from '@/assets/graphics/eth-logo.png'
+import PhantomWallet from '@/assets/graphics/phantom-wallet.png'
+import Image from 'next/image'
+import Button from '../Button'
+import Modal, { ModalFunctionalityProps } from '../modals/Modal'
+
+const UseMobileModal = ({
+  chain,
+  ...props
+}: ModalFunctionalityProps & { chain: 'evm' | 'solana' }) => {
+  const imagePath = chain === 'evm' ? EvmWallets : PhantomWallet
+
+  return (
+    <Modal
+      {...props}
+      title={`Please use your phone with ${
+        chain === 'evm' ? 'EVM' : 'Phantom'
+      } wallet`}
+      description={'For the best experience, use your phone'}
+    >
+      <div className='mt-2 flex flex-col items-center gap-6'>
+        <Image src={imagePath} alt='' className='h-[150px] w-[150px]' />
+        <Button size='lg' className='w-full' onClick={() => props.closeModal()}>
+          Got it!
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default UseMobileModal

src/modules/telegram/MenuPage/index.tsx

@@ -7,13 +7,15 @@ import LayoutWithBottomNavigation from '@/components/layouts/LayoutWithBottomNav
 import { getReferralLink } from '@/components/referral/utils'
 import SubsocialProfileModal from '@/components/subsocial-profile/SubsocialProfileModal'
 import UnlinkWalletModal from '@/components/wallets/UnlinkWalletModal'
+import UseMobileModal from '@/components/wallets/UseMobileModal'
 import EvmConnectWalletModal from '@/components/wallets/evm/EvmConnectWalletModal'
 import useIsModerationAdmin from '@/hooks/useIsModerationAdmin'
 import { useLinkedProviders } from '@/hooks/useLinkedEvmAddress'
 import useTgNoScroll from '@/hooks/useTgNoScroll'
 import PointsWidget from '@/modules/points/PointsWidget'
 import { useMyMainAddress } from '@/stores/my-account'
 import { truncateAddress } from '@/utils/account'
+import { isTouchDevice } from '@/utils/device'
 import { copyToClipboard } from '@/utils/strings'
 import { IdentityProvider } from '@subsocial/data-hub-sdk'
 import Image from 'next/image'
@@ -181,18 +183,17 @@ function MyAccountPageContent({ setPage }: ContentProps) {
   )
 }
 
-type AddressesModalKind =
-  | 'evm'
-  | 'solana'
-  | 'unlink-solana'
-  | 'unlink-evm'
-  | undefined
+type ModalChain = 'evm' | 'solana'
 
 function MyCryptoAddressesContent({ setPage }: ContentProps) {
   const myAddress = useMyMainAddress()
-  const [modalKind, setModalKind] = useState<AddressesModalKind>(undefined)
+  const [modalKind, setModalKind] = useState<ModalChain>()
   const solanaWalletUrl = useGetSolanaWalletUrl()
   const router = useRouter()
+  const [isOpenUseMobileModal, setIsOpenUseMobileModal] = useState(false)
+  const [openEvmConnectWalletModal, setOpenEvmConnectWalletModal] =
+    useState(false)
+  const [openUnlinkModal, setOpenUnlinkModal] = useState(false)
 
   const { providers } = useLinkedProviders(myAddress || '')
 
@@ -214,16 +215,34 @@ function MyCryptoAddressesContent({ setPage }: ContentProps) {
           </span>
         ) : undefined,
         icon: evmProvider?.externalId ? '🖇️' : '🛠️',
-        onClick: () =>
-          setModalKind(evmProvider?.externalId ? 'unlink-evm' : 'evm'),
+        onClick: () => {
+          setModalKind('evm')
+          if (!isTouchDevice()) {
+            setIsOpenUseMobileModal(true)
+            return
+          }
+
+          evmProvider?.externalId
+            ? setOpenUnlinkModal(true)
+            : setOpenEvmConnectWalletModal(true)
+        },
       },
       {
-        title: `${solanaProvider?.externalId ? 'Edit' : 'Add'} Solana Address`,
+        title: `${
+          solanaProvider?.externalId ? 'Unlink' : 'Add'
+        } Solana Address`,
         icon: solanaProvider?.externalId ? '🖇️' : '🛠️',
-        onClick: () =>
+        onClick: () => {
+          setModalKind('solana')
+          if (!isTouchDevice()) {
+            setIsOpenUseMobileModal(true)
+            return
+          }
+
           solanaProvider?.externalId
-            ? setModalKind('unlink-solana')
-            : router.push(solanaWalletUrl),
+            ? setOpenUnlinkModal(true)
+            : router.push(solanaWalletUrl)
+        },
         desc: solanaProvider?.externalId ? (
           <span className='font-medium leading-none text-slate-400'>
             {truncateAddress(solanaProvider?.externalId)}
@@ -247,19 +266,21 @@ function MyCryptoAddressesContent({ setPage }: ContentProps) {
         </div>
         <Menu menuItems={cryptoAddressesItems} />
       </div>
-      {!evmProvider?.externalId && (
-        <EvmConnectWalletModal
-          isOpen={modalKind === 'evm'}
-          closeModal={() => setModalKind(undefined)}
-        />
-      )}
-      {modalKind?.includes('unlink') && (
-        <UnlinkWalletModal
-          chain={modalKind.includes('solana') ? 'solana' : 'evm'}
-          isOpen={!!modalKind}
-          closeModal={() => setModalKind(undefined)}
-        />
-      )}
+      <EvmConnectWalletModal
+        isOpen={openEvmConnectWalletModal}
+        closeModal={() => setOpenEvmConnectWalletModal(false)}
+      />
+      <UnlinkWalletModal
+        chain={modalKind || 'evm'}
+        isOpen={openUnlinkModal}
+        closeModal={() => setOpenUnlinkModal(false)}
+      />
+
+      <UseMobileModal
+        isOpen={isOpenUseMobileModal}
+        closeModal={() => setIsOpenUseMobileModal(false)}
+        chain={modalKind as ModalChain}
+      />
     </>
   )
 }

src/pages/solana/connect.tsx

@@ -1,13 +1,15 @@
 import Button from '@/components/Button'
 import Container from '@/components/Container'
 import { env } from '@/env.mjs'
+import useLinkedAddress from '@/hooks/useLinkedEvmAddress'
 import { addExternalProviderToIdentity } from '@/server/datahub-queue/identity'
 import { createSignedSocialDataEvent } from '@/services/datahub/utils'
 import { decryptPayload } from '@/stores/encryption'
 import { decodeSecretKey, loginWithSecretKey } from '@/utils/account'
 import { getCommonServerSideProps } from '@/utils/page'
 import { IdentityProvider } from '@subsocial/data-hub-sdk'
 import bs58 from 'bs58'
+import { useEffect } from 'react'
 import nacl from 'tweetnacl'
 
 export const getServerSideProps = getCommonServerSideProps(
@@ -81,10 +83,22 @@ export const getServerSideProps = getCommonServerSideProps(
 export default function SolanaConnectPage({
   solanaAddress,
   error,
+  address,
 }: {
   solanaAddress: string
   error: string
+  address: string
 }) {
+  const { refetch } = useLinkedAddress(
+    address,
+    { enabled: true },
+    IdentityProvider.SOLANA
+  )
+
+  useEffect(() => {
+    refetch()
+  }, [refetch])
+
   return (
     <Container className='flex h-screen w-full flex-col items-center justify-center text-center'>
       <h1 className='text-2xl font-bold'>

src/pages/solana/sign.tsx

@@ -95,13 +95,6 @@ export const getServerSideProps = getCommonServerSideProps<{
     sharedSecretDapp
   )
 
-  const params = {
-    dapp_encryption_public_key: env.NEXT_PUBLIC_DAPP_PUBLIC_KEY,
-    nonce: bs58.encode(signNonce),
-    payload: bs58.encode(encrypted),
-    redirect_link: `${env.NEXT_PUBLIC_BASE_URL}/solana/connect?solana_address=${connectData.public_key}&signer=${signer}&signer_nonce=${signerNonce}&address=${address}&message=${message}&phantom_encryption_public_key=${phantomEncryptionPublicKey}`,
-  }
-
   return {
     props: {
       address,