Add link evm address modal

src/components/modals/LinkEvmAddressModal.tsx

@@ -1,17 +1,28 @@
+import useLinkedEvmAddress from '@/hooks/useLinkedEvmAddress'
 import { useAddExternalProviderToIdentity } from '@/services/datahub/identity/mutation'
 import { IdentityProvider } from '@subsocial/data-hub-sdk'
 import { getAddress, isAddress } from 'ethers'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Button from '../Button'
 import Input from '../inputs/Input'
-import Modal, { ModalFunctionalityProps } from './Modal'
+import Modal, { ModalFunctionalityProps, ModalProps } from './Modal'
 
-export default function LinkEvmAddressModal(props: ModalFunctionalityProps) {
+export default function LinkEvmAddressModal(
+  props: ModalFunctionalityProps & Pick<ModalProps, 'title' | 'description'>
+) {
   const [evmAddress, setEvmAddress] = useState('')
   const [evmAddressError, setEvmAddressError] = useState('')
   const { mutate, isLoading } = useAddExternalProviderToIdentity({
     onSuccess: () => props.closeModal(),
   })
+
+  const { evmAddress: myEvmAddress } = useLinkedEvmAddress()
+  useEffect(() => {
+    if (props.isOpen && myEvmAddress) {
+      setEvmAddress(myEvmAddress)
+    }
+  }, [myEvmAddress, props.isOpen])
+
   const onSubmit = (e: any) => {
     e.preventDefault()
     const checksumAddress = getAddress(evmAddress)
@@ -21,12 +32,20 @@ export default function LinkEvmAddressModal(props: ModalFunctionalityProps) {
   }
 
   return (
-    <Modal {...props} title='Link your EVM Address' withCloseButton>
-      <form onSubmit={onSubmit} className='mt-2 flex flex-col gap-4'>
+    <Modal
+      {...props}
+      title={props.title || 'Your EVM address for rewards'}
+      description={
+        props.description ??
+        'We will send your token rewards to this address if you win this contest.'
+      }
+      withCloseButton
+    >
+      <form onSubmit={onSubmit} className='mt-2 flex flex-col gap-6 pb-2'>
         <Input
           error={evmAddressError}
           value={evmAddress}
-          placeholder='0x...'
+          placeholder='Your EVM address'
           onChange={(e) => {
             const address = e.target.value
             setEvmAddress(address)

src/modules/points/PointsWidget.tsx

@@ -9,11 +9,14 @@ import Button from '@/components/Button'
 import Card from '@/components/Card'
 import LinkText from '@/components/LinkText'
 import Name from '@/components/Name'
+import LinkEvmAddressModal from '@/components/modals/LinkEvmAddressModal'
 import RewardPerDayModal from '@/components/modals/RewardPerDayModal'
 import SubsocialProfileModal from '@/components/subsocial-profile/SubsocialProfileModal'
 import useIsMounted from '@/hooks/useIsMounted'
+import useLinkedEvmAddress from '@/hooks/useLinkedEvmAddress'
 import { useSendEvent } from '@/stores/analytics'
 import { useMyMainAddress } from '@/stores/my-account'
+import { truncateAddress } from '@/utils/account'
 import { cx } from '@/utils/class-names'
 import { allowWindowScroll, preventWindowScroll } from '@/utils/window'
 import { Transition } from '@headlessui/react'
@@ -208,12 +211,17 @@ const UserStatsSection = ({
   const sendEvent = useSendEvent()
   const [openProfileModal, setOpenProfileModal] = useState(false)
   const [openRewardModal, setOpenRewardModal] = useState(false)
+  const [openEvmLinkModal, setOpenEvmLinkModal] = useState(false)
+  const { evmAddress } = useLinkedEvmAddress()
 
   return (
     <>
       <div className='mb-10 flex w-full flex-col rounded-xl bg-slate-800 hover:cursor-pointer'>
         <div
-          className='border-b border-slate-700 p-4'
+          className={cx(
+            'border-b border-slate-700 p-4',
+            evmAddress && 'border-none'
+          )}
           onClick={() => {
             setDrawerContentState('leaderboard')
           }}
@@ -225,12 +233,13 @@ const UserStatsSection = ({
                 <div className='flex items-center gap-3'>
                   <Name
                     address={myAddress ?? ''}
+                    clipText
                     className='text-lg font-medium !text-text'
                   />
                   <Button
                     size='circleSm'
                     variant='muted'
-                    className='inline'
+                    className='inline flex-shrink-0'
                     onClick={(e) => {
                       e.preventDefault()
                       e.stopPropagation()
@@ -253,6 +262,28 @@ const UserStatsSection = ({
             <IoIosArrowForward className={cx('fill-slate-400 text-2xl')} />
           </div>
         </div>
+        {evmAddress && (
+          <Card className='mx-4 flex items-center justify-between gap-4 p-4 py-3'>
+            <div className='flex flex-col gap-1'>
+              <span className='text-sm font-medium text-text-muted'>
+                My EVM Address
+              </span>
+              <span className='font-semibold'>
+                {truncateAddress(evmAddress ?? '')}
+              </span>
+            </div>
+            <LinkText
+              variant='primary'
+              className='mr-1'
+              onClick={() => {
+                sendEvent('edit_evm_address_click')
+                setOpenEvmLinkModal(true)
+              }}
+            >
+              Edit
+            </LinkText>
+          </Card>
+        )}
         <div className='flex w-full items-center gap-4 p-4'>
           <div className='flex w-full flex-col gap-2'>
             <span className='text-text-muted'>LIKES LEFT TODAY:</span>
@@ -300,6 +331,12 @@ const UserStatsSection = ({
         closeModal={() => setOpenProfileModal(false)}
         isOpen={openProfileModal}
       />
+      <LinkEvmAddressModal
+        isOpen={openEvmLinkModal}
+        closeModal={() => setOpenEvmLinkModal(false)}
+        title='Edit your EVM address for rewards'
+        description='We will send your token rewards to this address if you win in contest.'
+      />
     </>
   )
 }