From 4791ff4ee718f7ee03ca77d2e1c2171af70651f9 Mon Sep 17 00:00:00 2001
From: 49659410+tx0c <>
Date: Thu, 7 Dec 2023 13:48:32 +0000
Subject: [PATCH] feat(nomad-badges): Implementation of Digital Nomad program

for thematters/developer-resource#326
---
 .../UserProfile/AsideUserProfile/index.tsx    | 17 ++++++-------
 .../UserProfile/BadgeNomadDialog/index.tsx    | 25 ++++++++++++++-----
 .../UserProfile/BadgeNomadLabel/index.tsx     |  1 -
 src/views/User/UserProfile/Badges/index.tsx   | 17 ++-----------
 src/views/User/UserProfile/index.tsx          | 21 ++++++++--------
 5 files changed, 38 insertions(+), 43 deletions(-)

diff --git a/src/views/User/UserProfile/AsideUserProfile/index.tsx b/src/views/User/UserProfile/AsideUserProfile/index.tsx
index d99997fb13..d4239ee90b 100644
--- a/src/views/User/UserProfile/AsideUserProfile/index.tsx
+++ b/src/views/User/UserProfile/AsideUserProfile/index.tsx
@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic'
 import { useContext, useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
+
 import {
   OPEN_SHOW_NOMAD_BADGE_DIALOG,
   TEST_ID,
@@ -44,7 +45,10 @@ const DynamicWalletLabel = dynamic(() => import('../WalletLabel'), {
 })
 
 export const AsideUserProfile = () => {
-  const { isInPath, getQuery, deleteQuery } = useRoute()
+  const {
+    isInPath,
+    getQuery, // deleteQuery
+  } = useRoute()
   const viewer = useContext(ViewerContext)
 
   // public user data
@@ -251,21 +255,14 @@ export const AsideUserProfile = () => {
                 totalReferredCount={user.status?.totalReferredCount || 0}
                 shareLink={shareLink}
               >
-                {({ openDialog }) => {
-                  if (showBadges) {
-                    setTimeout(() => {
-                      deleteQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key)
-                      openDialog()
-                    })
-                  }
-                  return (
+                {({ openDialog }) => (
                     <BadgeNomadLabel
                       hasTooltip
                       nomadBadgeLevel={nomadBadgeLevel}
                       onClick={openDialog}
                     />
                   )
-                }}
+                }
               </BadgeNomadDialog>
             )}
             {hasTraveloggersBadge && <TraveloggersBadge hasTooltip />}
diff --git a/src/views/User/UserProfile/BadgeNomadDialog/index.tsx b/src/views/User/UserProfile/BadgeNomadDialog/index.tsx
index 01c7e530f5..7149689632 100644
--- a/src/views/User/UserProfile/BadgeNomadDialog/index.tsx
+++ b/src/views/User/UserProfile/BadgeNomadDialog/index.tsx
@@ -1,6 +1,12 @@
 import dynamic from 'next/dynamic'
 
-import { Dialog, Spinner, useDialogSwitch } from '~/components'
+import { OPEN_SHOW_NOMAD_BADGE_DIALOG } from '~/common/enums'
+import {
+  Dialog,
+  Spinner,
+  useDialogSwitch,
+  useEventListener,
+} from '~/components'
 import { UserStatus } from '~/gql/graphql'
 
 type BadgeNomadLabelProps = {
@@ -43,8 +49,15 @@ export const BaseBadgeNomadDialog: React.FC<BadgeNomadDialogProps> = ({
   )
 }
 
-export const BadgeNomadDialog = (props: BadgeNomadDialogProps) => (
-  <Dialog.Lazy mounted={<BaseBadgeNomadDialog {...props} />}>
-    {({ openDialog }) => <>{props.children({ openDialog })}</>}
-  </Dialog.Lazy>
-)
+export const BadgeNomadDialog = (props: BadgeNomadDialogProps) => {
+  const Children = ({ openDialog }: { openDialog: () => void }) => {
+    useEventListener(OPEN_SHOW_NOMAD_BADGE_DIALOG, openDialog)
+    return <>{props?.children({ openDialog })}</>
+  }
+
+  return (
+    <Dialog.Lazy mounted={<BaseBadgeNomadDialog {...props} />}>
+      {({ openDialog }) => <Children openDialog={openDialog} />}
+    </Dialog.Lazy>
+  )
+}
diff --git a/src/views/User/UserProfile/BadgeNomadLabel/index.tsx b/src/views/User/UserProfile/BadgeNomadLabel/index.tsx
index 626cca2799..87534b1cef 100644
--- a/src/views/User/UserProfile/BadgeNomadLabel/index.tsx
+++ b/src/views/User/UserProfile/BadgeNomadLabel/index.tsx
@@ -50,4 +50,3 @@ export const BadgeNomadLabel: React.FC<BadgeNomadLabelProps> = ({
     </>
   )
 }
-
diff --git a/src/views/User/UserProfile/Badges/index.tsx b/src/views/User/UserProfile/Badges/index.tsx
index 8a39c92988..8bcaaf720c 100644
--- a/src/views/User/UserProfile/Badges/index.tsx
+++ b/src/views/User/UserProfile/Badges/index.tsx
@@ -10,23 +10,10 @@ import { ReactComponent as IconNomad3Badge } from '@/public/static/icons/48px/ba
 import { ReactComponent as IconNomad4Badge } from '@/public/static/icons/48px/badge-nomad4-fire.svg'
 import { ReactComponent as IconSeedBadge } from '@/public/static/icons/48px/badge-seed.svg'
 import { ReactComponent as IconTraveloggersBadge } from '@/public/static/icons/48px/badge-traveloggers.svg'
-import { Tooltip, Translate, withIcon } from '~/components'
-import { IconArrowAction24 } from '~/components/Icon/IconArrowAction24'
+import { IconArrowAction24, Tooltip, Translate, withIcon } from '~/components'
 import { UserStatus } from '~/gql/graphql'
 
-import { ReactComponent as IconArchitectBadge } from '@/public/static/icons/48px/badge-architect.svg'
-import { ReactComponent as IconCivicLikerBadge } from '@/public/static/icons/48px/badge-civic-liker.svg'
-import { ReactComponent as IconGoldenMotorBadge } from '@/public/static/icons/48px/badge-golden-motor.svg'
-import { ReactComponent as IconNomad1Badge } from '@/public/static/icons/48px/badge-nomad1-moon.svg'
-import { ReactComponent as IconNomad2Badge } from '@/public/static/icons/48px/badge-nomad2-star.svg'
-import { ReactComponent as IconNomad3Badge } from '@/public/static/icons/48px/badge-nomad3-light.svg'
-import { ReactComponent as IconNomad4Badge } from '@/public/static/icons/48px/badge-nomad4-fire.svg'
-import { ReactComponent as IconSeedBadge } from '@/public/static/icons/48px/badge-seed.svg'
-import { ReactComponent as IconTraveloggersBadge } from '@/public/static/icons/48px/badge-traveloggers.svg'
-import { IconArrowAction, Tooltip, Translate, withIcon } from '~/components'
-import { UserStatus } from '~/gql/graphql'
-
-import { BadgeNomadDialog } from '../BadgeNomadLabel'
+// import { BadgeNomadDialog } from '../BadgeNomadLabel'
 import styles from './styles.module.css'
 
 type badgePros = {
diff --git a/src/views/User/UserProfile/index.tsx b/src/views/User/UserProfile/index.tsx
index fc33c2ad58..fa336d0a86 100644
--- a/src/views/User/UserProfile/index.tsx
+++ b/src/views/User/UserProfile/index.tsx
@@ -3,7 +3,11 @@ import dynamic from 'next/dynamic'
 import { useContext, useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import { TEST_ID, URL_USER_PROFILE } from '~/common/enums'
+import {
+  OPEN_SHOW_NOMAD_BADGE_DIALOG,
+  TEST_ID,
+  URL_USER_PROFILE,
+} from '~/common/enums'
 import { numAbbr, toPath } from '~/common/utils'
 import {
   Avatar,
@@ -39,7 +43,9 @@ const DynamicWalletLabel = dynamic(() => import('./WalletLabel'), {
 })
 
 export const UserProfile = () => {
-  const { getQuery, deleteQuery } = useRoute()
+  const {
+    getQuery, // deleteQuery
+  } = useRoute()
   const viewer = useContext(ViewerContext)
 
   // public user data
@@ -216,14 +222,7 @@ export const UserProfile = () => {
                 isCivicLiker={isCivicLiker}
                 shareLink={shareLink}
               >
-                {({ openDialog }) => {
-                  if (showBadges && hasNomadBadge) {
-                    setTimeout(() => {
-                      deleteQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key)
-                      openDialog('nomad')
-                    })
-                  }
-                  return (
+                {({ openDialog }) => (
                     <span
                       className={styles.badges}
                       onClick={() => openDialog()}
@@ -239,7 +238,7 @@ export const UserProfile = () => {
                       />
                     </span>
                   )
-                }}
+                }
               </BadgesDialog>
 
               {user?.info.ethAddress && (