From 7706d719a9eeb2781b52c6f4d497e3a765387cad Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Fri, 22 Dec 2023 23:22:47 +0700
Subject: [PATCH 1/2] chore: change eth icon to ens in profile

---
 src/assets/icons/ens-dynamic-size.svg | 14 ++++++++++++++
 src/utils/profile.ts                  |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/icons/ens-dynamic-size.svg

diff --git a/src/assets/icons/ens-dynamic-size.svg b/src/assets/icons/ens-dynamic-size.svg
new file mode 100644
index 000000000..8fdb2f04c
--- /dev/null
+++ b/src/assets/icons/ens-dynamic-size.svg
@@ -0,0 +1,14 @@
+<svg width="1em" height="1em" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_933_2718)">
+<path d="M2.79359 7.48702C2.94764 7.82324 3.33279 8.49567 3.33279 8.49567L7.74269 1L3.44833 4.08529C3.19799 4.26329 2.98616 4.50062 2.8321 4.7775C2.4277 5.62794 2.4277 6.61681 2.79359 7.48702Z" fill="currentColor"/>
+<path d="M1.06044 9.93943C1.15672 11.3832 1.86924 12.7281 2.98616 13.5983L7.74269 17C7.74269 17 4.75782 12.5896 2.25439 8.19901C2.00404 7.74413 1.83073 7.22991 1.7537 6.69592C1.71518 6.45859 1.71518 6.22126 1.7537 5.98393C1.69593 6.1026 1.56113 6.3597 1.56113 6.3597C1.31078 6.8937 1.13747 7.46725 1.04118 8.06057C0.983409 8.69345 0.983409 9.32633 1.06044 9.93943Z" fill="currentColor"/>
+<path d="M13.1925 10.5328C13.0385 10.1965 12.6533 9.52411 12.6533 9.52411L8.24341 17L12.557 13.9345C12.8074 13.7565 13.0192 13.5192 13.1733 13.2423C13.5584 12.3918 13.5777 11.403 13.1925 10.5328Z" fill="currentColor"/>
+<path d="M14.9449 8.06057C14.8486 6.61681 14.1361 5.27194 13.0192 4.40173L8.26263 1C8.26263 1 11.2475 5.41038 13.7509 9.80099C14.0013 10.2559 14.1746 10.7701 14.2516 11.3041C14.2901 11.5414 14.2901 11.7787 14.2516 12.0161C14.3094 11.8974 14.4442 11.6403 14.4442 11.6403C14.6945 11.1063 14.8679 10.5328 14.9641 9.95921C15.0027 9.30655 15.0027 8.69345 14.9449 8.06057Z" fill="currentColor"/>
+<path d="M2.8321 4.7775C2.98616 4.50062 3.17873 4.26329 3.44833 4.08529L7.74269 1L3.33279 8.4759C3.33279 8.4759 2.94765 7.80346 2.79359 7.46724C2.4277 6.61681 2.4277 5.62794 2.8321 4.7775ZM1.06044 9.93943C1.15672 11.3832 1.86924 12.7281 2.98616 13.5983L7.74269 17C7.74269 17 4.75782 12.5896 2.25439 8.19901C2.00404 7.74413 1.83073 7.22991 1.7537 6.69592C1.71518 6.45859 1.71518 6.22126 1.7537 5.98393C1.69593 6.1026 1.56113 6.3597 1.56113 6.3597C1.31078 6.8937 1.13747 7.46724 1.04118 8.06057C0.983409 8.69345 0.983409 9.32633 1.06044 9.93943ZM13.1925 10.5328C13.0384 10.1965 12.6533 9.5241 12.6533 9.5241L8.24338 17L12.557 13.9345C12.8073 13.7565 13.0192 13.5192 13.1732 13.2423C13.5584 12.3918 13.5776 11.403 13.1925 10.5328ZM14.9256 8.08035C14.8294 6.63659 14.1168 5.29172 12.9999 4.42151L8.26264 1C8.26264 1 11.2475 5.41038 13.7509 9.80099C14.0013 10.2559 14.1746 10.7701 14.2516 11.3041C14.2902 11.5414 14.2902 11.7787 14.2516 12.0161C14.3094 11.8974 14.4442 11.6403 14.4442 11.6403C14.6946 11.1063 14.8679 10.5328 14.9642 9.95921C15.0027 9.30655 15.0027 8.69345 14.9256 8.08035Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_933_2718">
+<rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/utils/profile.ts b/src/utils/profile.ts
index 98a5c8e82..42ee929bf 100644
--- 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}`,
   },

From b7b56829e250f778534895d0b54b23c09810b894 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Fri, 22 Dec 2023 23:31:15 +0700
Subject: [PATCH 2/2] feat: show got it button instead of disconnect after
 enabling notif

---
 .../notifications/PushNotificationContent.tsx | 27 +++++++++---
 .../TelegramNotificationContent.tsx           | 41 +++++++++++++------
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/components/auth/ProfileModal/contents/notifications/PushNotificationContent.tsx b/src/components/auth/ProfileModal/contents/notifications/PushNotificationContent.tsx
index 8c729b8b2..0679d26bc 100644
--- 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
index 16d3a2f2d..b7be1cb61 100644
--- 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,9 +27,9 @@ 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 && (
@@ -36,7 +37,10 @@ export default function TelegramNotificationContent(
             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 ? (