Merge pull request #505 from dappforce/deploy/ux

Minor UX Improvements
dappforce · Dec 22, 2023 · d52356f · d52356f
2 parents 69b8625 + b7b5682
commit d52356f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 19 deletions.
diff --git a/src/assets/icons/ens-dynamic-size.svg b/src/assets/icons/ens-dynamic-size.svg
diff --git a/src/components/auth/ProfileModal/contents/notifications/PushNotificationContent.tsx b/src/components/auth/ProfileModal/contents/notifications/PushNotificationContent.tsx
@@ -34,6 +34,7 @@ export default function PushNotificationContent(
 ) {
   const myAddress = useMyAccount((state) => state.address)
   const [isRegistered, setIsRegistered] = useState(false)
+  const [isAfterRegister, setIsAfterRegister] = useState(false)
 
   useEffect(() => {
     if (!myAddress) return
@@ -62,16 +63,32 @@ export default function PushNotificationContent(
     return (
       <div className='flex flex-col gap-6'>
         <Notice leftIcon='✅'>Push Notifications Enabled</Notice>
-        <DisableNotificationButton
-          setIsRegistered={setIsRegistered}
-          {...props}
-        />
+        {isAfterRegister ? (
+          <Button
+            variant='primary'
+            onClick={() => props.setCurrentState('notifications')}
+            size='lg'
+          >
+            Got it
+          </Button>
+        ) : (
+          <DisableNotificationButton
+            setIsRegistered={setIsRegistered}
+            {...props}
+          />
+        )}
       </div>
     )
   }
 
   return (
-    <EnableNotificationButton setIsRegistered={setIsRegistered} {...props} />
+    <EnableNotificationButton
+      setIsRegistered={(v) => {
+        setIsAfterRegister(true)
+        setIsRegistered(v)
+      }}
+      {...props}
+    />
   )
 }
 

diff --git a/src/components/auth/ProfileModal/contents/notifications/TelegramNotificationContent.tsx b/src/components/auth/ProfileModal/contents/notifications/TelegramNotificationContent.tsx
@@ -16,6 +16,7 @@ export default function TelegramNotificationContent(
 ) {
   const { address } = props
   const [isAfterDisconnect, setIsAfterDisconnect] = useState(false)
+  const [isAfterConnect, setIsAfterConnect] = useState(false)
 
   const {
     data: linkedAccounts,
@@ -26,17 +27,20 @@ export default function TelegramNotificationContent(
   })
   const isLoadingAccount = isLoading || isFetching
   const { IntegratedSkeleton } = useIntegratedSkeleton(isLoadingAccount)
-  const firstLinkedAccount = !isLoadingAccount ? linkedAccounts?.[0] : null
+  const hasLinkedAccount = !isLoadingAccount ? linkedAccounts?.[0] : null
 
-  if (!isLoadingAccount && !firstLinkedAccount) {
+  if (!isLoadingAccount && !hasLinkedAccount) {
     return (
       <>
         {isAfterDisconnect && (
           <Notice className='mb-6' leftIcon='✅'>
             You have disconnected your account from Grill&apos;s telegram bot.
           </Notice>
         )}
-        <ConnectTelegramButton {...props} />
+        <ConnectTelegramButton
+          {...props}
+          afterConnect={() => setIsAfterConnect(true)}
+        />
       </>
     )
   }
@@ -45,7 +49,7 @@ export default function TelegramNotificationContent(
     <div className='flex flex-col gap-6'>
       <Card className='flex justify-between gap-4 overflow-hidden'>
         <IntegratedSkeleton
-          content={firstLinkedAccount?.userName}
+          content={hasLinkedAccount?.userName}
           className='bg-black/20'
         >
           {(userName) => (
@@ -55,7 +59,7 @@ export default function TelegramNotificationContent(
           )}
         </IntegratedSkeleton>
         <IntegratedSkeleton
-          content={firstLinkedAccount?.userName}
+          content={hasLinkedAccount?.userName}
           className='w-24 bg-black/20'
         >
           {() => (
@@ -71,12 +75,21 @@ export default function TelegramNotificationContent(
           )}
         </IntegratedSkeleton>
       </Card>
-      {firstLinkedAccount && (
-        <DisconnectButton
-          {...props}
-          afterDisconnect={() => setIsAfterDisconnect(true)}
-        />
-      )}
+      {hasLinkedAccount &&
+        (isAfterConnect ? (
+          <Button
+            variant='primary'
+            size='lg'
+            onClick={() => props.setCurrentState('notifications')}
+          >
+            Got it
+          </Button>
+        ) : (
+          <DisconnectButton
+            {...props}
+            afterDisconnect={() => setIsAfterDisconnect(true)}
+          />
+        ))}
     </div>
   )
 }
@@ -108,7 +121,10 @@ function DisconnectButton({
   )
 }
 
-function ConnectTelegramButton({ address }: ProfileModalContentProps) {
+function ConnectTelegramButton({
+  address,
+  afterConnect,
+}: ProfileModalContentProps & { afterConnect?: () => void }) {
   const queryClient = useQueryClient()
   const { isFetching: isFetchingAccount } =
     getLinkedTelegramAccountsQuery.useQuery({
@@ -138,6 +154,7 @@ function ConnectTelegramButton({ address }: ProfileModalContentProps) {
 
   const handleClickReload = () => {
     getLinkedTelegramAccountsQuery.invalidate(queryClient, { address })
+    afterConnect?.()
   }
 
   return url ? (

diff --git a/src/utils/profile.ts b/src/utils/profile.ts
@@ -1,4 +1,4 @@
-import EthIcon from '@/assets/icons/eth-dynamic-size.svg'
+import EnsIcon from '@/assets/icons/ens-dynamic-size.svg'
 import KiltIcon from '@/assets/icons/kilt-dynamic-size.svg'
 import KusamaIcon from '@/assets/icons/kusama-dynamic-size.svg'
 import PolkadotIcon from '@/assets/icons/polkadot-dynamic-size.svg'
@@ -72,7 +72,7 @@ export const profileSourceData: {
     link: () => '',
   },
   ens: {
-    icon: EthIcon,
+    icon: EnsIcon,
     tooltip: 'ENS',
     link: (id) => `https://app.ens.domains/${id}`,
   },