diff --git a/src/assets/graphics/eth-logo.png b/src/assets/graphics/eth-logo.png new file mode 100644 index 000000000..5cc4b8f6b Binary files /dev/null and b/src/assets/graphics/eth-logo.png differ diff --git a/src/assets/graphics/phantom-wallet.png b/src/assets/graphics/phantom-wallet.png new file mode 100644 index 000000000..171723529 Binary files /dev/null and b/src/assets/graphics/phantom-wallet.png differ diff --git a/src/components/wallets/UseMobileModal.tsx b/src/components/wallets/UseMobileModal.tsx new file mode 100644 index 000000000..829b46216 --- /dev/null +++ b/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 ( + +
+ + +
+
+ ) +} + +export default UseMobileModal diff --git a/src/modules/telegram/MenuPage/index.tsx b/src/modules/telegram/MenuPage/index.tsx index eb5cf2913..1c585da73 100644 --- a/src/modules/telegram/MenuPage/index.tsx +++ b/src/modules/telegram/MenuPage/index.tsx @@ -7,6 +7,7 @@ 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' @@ -14,6 +15,7 @@ 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(undefined) + const [modalKind, setModalKind] = useState() 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) { ) : 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 ? ( {truncateAddress(solanaProvider?.externalId)} @@ -247,19 +266,21 @@ function MyCryptoAddressesContent({ setPage }: ContentProps) { - {!evmProvider?.externalId && ( - setModalKind(undefined)} - /> - )} - {modalKind?.includes('unlink') && ( - setModalKind(undefined)} - /> - )} + setOpenEvmConnectWalletModal(false)} + /> + setOpenUnlinkModal(false)} + /> + + setIsOpenUseMobileModal(false)} + chain={modalKind as ModalChain} + /> ) } diff --git a/src/pages/solana/connect.tsx b/src/pages/solana/connect.tsx index e08f969c5..39c7d9bf2 100644 --- a/src/pages/solana/connect.tsx +++ b/src/pages/solana/connect.tsx @@ -1,6 +1,7 @@ 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' @@ -8,6 +9,7 @@ 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 (

diff --git a/src/pages/solana/sign.tsx b/src/pages/solana/sign.tsx index 921051675..c5042187f 100644 --- a/src/pages/solana/sign.tsx +++ b/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,