From 08b0ce9817060d9cb1c31ebfdc568fc6ac568039 Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Wed, 11 Oct 2023 21:52:13 +0200
Subject: [PATCH 1/6] ref: StatusLabel

---
 src/components/common/StatusLabel/cmp.tsx     | 39 ++-----------------
 src/components/common/StatusLabel/types.ts    |  6 +--
 .../dashboard/manage/ManageDomain/cmp.tsx     |  6 ++-
 .../dashboard/manage/ManageInstance/cmp.tsx   | 17 ++++++--
 4 files changed, 21 insertions(+), 47 deletions(-)

diff --git a/src/components/common/StatusLabel/cmp.tsx b/src/components/common/StatusLabel/cmp.tsx
index 2a6e704c..ec27b279 100644
--- a/src/components/common/StatusLabel/cmp.tsx
+++ b/src/components/common/StatusLabel/cmp.tsx
@@ -1,48 +1,15 @@
 import React, { useMemo } from 'react'
 import { StatusLabelProps } from './types'
 import Label from '../Label/cmp'
-import { LabelVariant } from '../Label/types'
-import { RotatingLines } from 'react-loader-spinner'
-import { Icon } from '@aleph-front/aleph-core'
 import { useTheme } from 'styled-components'
 
 export const StatusLabel = React.memo(
-  ({ variant, ...rest }: StatusLabelProps) => {
+  ({ variant, children, ...rest }: StatusLabelProps) => {
     const theme = useTheme()
 
-    const labelVariant: LabelVariant = useMemo(
-      () =>
-        variant === 'running' || variant === 'ready'
-          ? 'success'
-          : variant === 'confirming'
-          ? 'warning'
-          : 'error',
-      [variant],
-    )
-
-    const labelContent = useMemo(
-      () =>
-        variant === 'ready' ? (
-          <>READY</>
-        ) : variant === 'running' ? (
-          <>RUNNING</>
-        ) : variant === 'confirming' ? (
-          <div tw="flex items-center">
-            <div tw="mr-2">CONFIRMING</div>
-            <RotatingLines strokeColor={theme.color.base2} width=".8rem" />
-          </div>
-        ) : (
-          <div tw="flex items-center">
-            <Icon name="warning" tw="mr-2" size="xs" />
-            <div>INSTANCE UNRESPONSIVE</div>
-          </div>
-        ),
-      [theme, variant],
-    )
-
     return (
-      <Label {...rest} variant={labelVariant}>
-        {labelContent}
+      <Label {...rest} variant={variant}>
+        { children }
       </Label>
     )
   },
diff --git a/src/components/common/StatusLabel/types.ts b/src/components/common/StatusLabel/types.ts
index 95862c11..874e8a82 100644
--- a/src/components/common/StatusLabel/types.ts
+++ b/src/components/common/StatusLabel/types.ts
@@ -1,10 +1,6 @@
 import { HTMLAttributes } from 'react'
 
-export type StatusLabelVariant =
-  | 'ready'
-  | 'running'
-  | 'confirming'
-  | 'unresponsive'
+export type StatusLabelVariant = 'success' | 'warning' | 'error'
 
 export type StatusLabelProps = HTMLAttributes<HTMLSpanElement> & {
   variant?: StatusLabelVariant
diff --git a/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx b/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
index 676f3b02..067a94e9 100644
--- a/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
@@ -46,9 +46,11 @@ export default function ManageDomain() {
               <Icon name="input-text" tw="mr-4" className="text-main1" />
               <div className="tp-body2">{name}</div>
               <StatusLabel
-                variant={domain.confirmed ? 'ready' : 'confirming'}
+                variant={status?.status ? 'success' : 'error'}
                 tw="ml-4"
-              />
+              >
+                DOMAIN RECORDS NOT CONFIGURED
+              </StatusLabel>
             </div>
             <div>
               <Button
diff --git a/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx b/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
index 64e7b4cb..cb8941aa 100644
--- a/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
@@ -14,7 +14,7 @@ import {
 import { Container, GrayText, Separator } from '../common'
 import VolumeList from '../VolumeList'
 import StatusLabel from '@/components/common/StatusLabel'
-import { ThreeDots } from 'react-loader-spinner'
+import { RotatingLines, ThreeDots } from 'react-loader-spinner'
 import { useTheme } from 'styled-components'
 import Link from 'next/link'
 
@@ -59,11 +59,20 @@ export default function ManageInstance() {
               <StatusLabel
                 variant={
                   instance.confirmed && status?.vm_ipv6
-                    ? 'running'
-                    : 'confirming'
+                    ? 'success'
+                    : 'warning'
                 }
                 tw="ml-4"
-              />
+              >
+                { 
+                  (instance.confirmed && status?.vm_ipv6) ?
+                    'READY' :
+                    <div tw="flex items-center">
+                      <div tw="mr-2">CONFIRMING</div>
+                      <RotatingLines strokeColor={theme.color.base2} width=".8rem" />
+                    </div>
+                }
+              </StatusLabel>
             </div>
             <div>
               <Button

From e807a617773f9b8c503fe187370800fce9150457 Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Wed, 11 Oct 2023 23:19:43 +0200
Subject: [PATCH 2/6] ref: custom domain layout

---
 src/components/pages/dashboard/manage/ManageDomain/cmp.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx b/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
index 067a94e9..ac61eb2e 100644
--- a/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
@@ -216,13 +216,12 @@ export default function ManageDomain() {
                     </div>
 
                     <div tw="my-5">
-                      <div className="tp-info text-main0">ERROR</div>
-                      <GrayText>{status.err}</GrayText>
+                      <div className="tp-info text-main0">FINAL STEP</div>
+                      <GrayText>After configuring the domain records you can retry to link them again here</GrayText>
                     </div>
 
                     <div tw="my-5">
-                      <div className="tp-info text-main0">TIPS</div>
-                      <GrayText>{status.help}</GrayText>
+                      <Button size="regular" variant="secondary" color="main0" kind="neon">Retry</Button>
                     </div>
                   </>
                 )}

From bc9b6d8d555f97dfe3152d7e849861808133f423 Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Thu, 12 Oct 2023 19:17:16 +0200
Subject: [PATCH 3/6] add: retry method in manager

---
 .../dashboard/manage/ManageDomain/cmp.tsx     |  4 ++--
 src/domain/domain.ts                          | 21 ++++++++++++++++++-
 .../pages/dashboard/manage/useManageDomain.ts | 21 ++++++++++++++++++-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx b/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
index ac61eb2e..1aa1bcda 100644
--- a/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
@@ -20,7 +20,7 @@ import StatusLabel from '@/components/common/StatusLabel'
 import ButtonLink from '@/components/common/ButtonLink'
 
 export default function ManageDomain() {
-  const { domain, status, refEntity, account, handleDelete, handleCopyRef } =
+  const { domain, status, refEntity, account, handleDelete, handleCopyRef, handleRetry } =
     useManageDomain()
 
   if (!domain) {
@@ -221,7 +221,7 @@ export default function ManageDomain() {
                     </div>
 
                     <div tw="my-5">
-                      <Button size="regular" variant="secondary" color="main0" kind="neon">Retry</Button>
+                      <Button onClick={handleRetry} size="regular" variant="secondary" color="main0" kind="neon">Retry</Button>
                     </div>
                   </>
                 )}
diff --git a/src/domain/domain.ts b/src/domain/domain.ts
index bb690301..cf34ee50 100644
--- a/src/domain/domain.ts
+++ b/src/domain/domain.ts
@@ -23,7 +23,7 @@ export type DomainAggregate = Record<string, DomainAggregateItem | null>
 export type AddDomain = {
   name: string
   target: AddDomainTarget
-  programType: EntityType.Instance | EntityType.Program
+  programType?: EntityType.Instance | EntityType.Program
   ref: string
 }
 
@@ -73,6 +73,25 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
     return entities.find((entity) => entity.id === id)
   }
 
+  async retry(domain: Domain) {
+    const content = {
+      message_id: domain.ref,
+      type: domain.target,
+      programType: domain.programType,
+    }
+
+    try {
+      await aggregate.Publish({
+        account: this.account,
+        key: this.key,
+        channel: this.channel,
+        content,
+      })
+    } catch (err) {
+      throw E_.RequestFailed(err)
+    }
+  }
+
   async add(
     domains: AddDomain | AddDomain[],
     throwOnCollision?: boolean,
diff --git a/src/hooks/pages/dashboard/manage/useManageDomain.ts b/src/hooks/pages/dashboard/manage/useManageDomain.ts
index e89570a3..c3d06a73 100644
--- a/src/hooks/pages/dashboard/manage/useManageDomain.ts
+++ b/src/hooks/pages/dashboard/manage/useManageDomain.ts
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { useCallback } from 'react'
-import { Domain, DomainStatus } from '@/domain/domain'
+import { AddDomain, Domain, DomainStatus } from '@/domain/domain'
 import { useAccountDomain } from '@/hooks/common/useAccountEntity/useAccountDomain'
 import { useCopyToClipboardAndNotify } from '@/hooks/common/useCopyToClipboard'
 import { useRequestState } from '@/hooks/common/useRequestState'
@@ -20,6 +20,7 @@ export type ManageDomain = {
   account?: Account
   handleCopyRef: () => void
   handleDelete: () => void
+  handleRetry: () => void
 }
 
 export function useManageDomain(): ManageDomain {
@@ -67,6 +68,23 @@ export function useManageDomain(): ManageDomain {
     }
   }, [domain, manager, onLoad, dispatch, onSuccess, router, onError])
 
+  const handleRetry = useCallback(async () => {
+    if (!domain) throw new Error('Invalid key')
+    if (!manager) throw new Error('Manager not ready')
+
+    console.log(domain)
+
+    try {
+      onLoad()
+
+      await manager.retry(domain)
+
+      onSuccess(true)
+    } catch (e) {
+      onError(e as Error)
+    }
+  }, [domain, manager, onLoad, onSuccess, onError])
+
   return {
     domain,
     status,
@@ -74,5 +92,6 @@ export function useManageDomain(): ManageDomain {
     account,
     handleCopyRef,
     handleDelete,
+    handleRetry,
   }
 }

From de8bd4dfe69a6dcf046010bdf3ad11c0b26fc52b Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:48:59 +0200
Subject: [PATCH 4/6] feat: add timestamp to refresh the aggregate value

---
 src/domain/domain.ts                                | 8 ++++++++
 src/hooks/pages/dashboard/manage/useManageDomain.ts | 1 +
 2 files changed, 9 insertions(+)

diff --git a/src/domain/domain.ts b/src/domain/domain.ts
index cf34ee50..fbe9b277 100644
--- a/src/domain/domain.ts
+++ b/src/domain/domain.ts
@@ -16,6 +16,7 @@ export type DomainAggregateItem = {
   type: AddDomainTarget
   message_id: string
   programType?: EntityType.Instance | EntityType.Program
+  updated_at: string
 }
 
 export type DomainAggregate = Record<string, DomainAggregateItem | null>
@@ -32,6 +33,7 @@ export type Domain = Omit<AddDomain, 'programType'> & {
   id: string
   confirmed?: boolean
   programType?: EntityType.Instance | EntityType.Program
+  updated_at: string
 }
 
 export type DomainStatus = {
@@ -78,6 +80,7 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
       message_id: domain.ref,
       type: domain.target,
       programType: domain.programType,
+      updated_at: new Date().toISOString(),
     }
 
     try {
@@ -110,6 +113,7 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
           message_id: ref,
           programType,
           type: target,
+          updated_at: new Date().toISOString(),
         }
 
         // @note: legacy domains don't include programType (default to Instance)
@@ -220,6 +224,9 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
     content: DomainAggregateItem,
   ): Domain {
     const { message_id, type } = content
+    // @note: legacy domains don't have updated_at property
+    // Cast to string to avoid type errors
+    const updated_at = content?.updated_at || 'unknown'
 
     const domain: Domain = {
       type: EntityType.Domain,
@@ -228,6 +235,7 @@ export class DomainManager implements EntityManager<Domain, AddDomain> {
       target: type,
       ref: message_id,
       confirmed: true,
+      updated_at: updated_at,
     }
 
     // @note: legacy domains don't include programType (default to Instance)
diff --git a/src/hooks/pages/dashboard/manage/useManageDomain.ts b/src/hooks/pages/dashboard/manage/useManageDomain.ts
index c3d06a73..475ccf08 100644
--- a/src/hooks/pages/dashboard/manage/useManageDomain.ts
+++ b/src/hooks/pages/dashboard/manage/useManageDomain.ts
@@ -80,6 +80,7 @@ export function useManageDomain(): ManageDomain {
       await manager.retry(domain)
 
       onSuccess(true)
+      router.replace('/dashboard')
     } catch (e) {
       onError(e as Error)
     }

From cfde92ee7165c12a3f5662b43b074edb386460cd Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Fri, 13 Oct 2023 16:14:46 +0200
Subject: [PATCH 5/6] fix: lint

---
 src/components/common/StatusLabel/cmp.tsx     |  2 +-
 .../dashboard/manage/ManageDomain/cmp.tsx     | 26 ++++++++++++++++---
 .../dashboard/manage/ManageInstance/cmp.tsx   | 23 ++++++++--------
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/components/common/StatusLabel/cmp.tsx b/src/components/common/StatusLabel/cmp.tsx
index ec27b279..5b481d0f 100644
--- a/src/components/common/StatusLabel/cmp.tsx
+++ b/src/components/common/StatusLabel/cmp.tsx
@@ -9,7 +9,7 @@ export const StatusLabel = React.memo(
 
     return (
       <Label {...rest} variant={variant}>
-        { children }
+        {children}
       </Label>
     )
   },
diff --git a/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx b/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
index 1aa1bcda..da8dea3f 100644
--- a/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageDomain/cmp.tsx
@@ -20,8 +20,15 @@ import StatusLabel from '@/components/common/StatusLabel'
 import ButtonLink from '@/components/common/ButtonLink'
 
 export default function ManageDomain() {
-  const { domain, status, refEntity, account, handleDelete, handleCopyRef, handleRetry } =
-    useManageDomain()
+  const {
+    domain,
+    status,
+    refEntity,
+    account,
+    handleDelete,
+    handleCopyRef,
+    handleRetry,
+  } = useManageDomain()
 
   if (!domain) {
     return (
@@ -217,11 +224,22 @@ export default function ManageDomain() {
 
                     <div tw="my-5">
                       <div className="tp-info text-main0">FINAL STEP</div>
-                      <GrayText>After configuring the domain records you can retry to link them again here</GrayText>
+                      <GrayText>
+                        After configuring the domain records you can retry to
+                        link them again here
+                      </GrayText>
                     </div>
 
                     <div tw="my-5">
-                      <Button onClick={handleRetry} size="regular" variant="secondary" color="main0" kind="neon">Retry</Button>
+                      <Button
+                        onClick={handleRetry}
+                        size="regular"
+                        variant="secondary"
+                        color="main0"
+                        kind="neon"
+                      >
+                        Retry
+                      </Button>
                     </div>
                   </>
                 )}
diff --git a/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx b/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
index cb8941aa..14239da2 100644
--- a/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
@@ -58,20 +58,21 @@ export default function ManageInstance() {
               <div className="tp-body2">{name}</div>
               <StatusLabel
                 variant={
-                  instance.confirmed && status?.vm_ipv6
-                    ? 'success'
-                    : 'warning'
+                  instance.confirmed && status?.vm_ipv6 ? 'success' : 'warning'
                 }
                 tw="ml-4"
               >
-                { 
-                  (instance.confirmed && status?.vm_ipv6) ?
-                    'READY' :
-                    <div tw="flex items-center">
-                      <div tw="mr-2">CONFIRMING</div>
-                      <RotatingLines strokeColor={theme.color.base2} width=".8rem" />
-                    </div>
-                }
+                {instance.confirmed && status?.vm_ipv6 ? (
+                  'READY'
+                ) : (
+                  <div tw="flex items-center">
+                    <div tw="mr-2">CONFIRMING</div>
+                    <RotatingLines
+                      strokeColor={theme.color.base2}
+                      width=".8rem"
+                    />
+                  </div>
+                )}
               </StatusLabel>
             </div>
             <div>

From 8bbbf22b0b583fc0fa17a450b44aff6c76f2c3b9 Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Fri, 13 Oct 2023 16:19:30 +0200
Subject: [PATCH 6/6] fix: (dirty) status label

---
 .../dashboard/manage/ManageFunction/cmp.tsx   | 20 +++++++++++++++++--
 .../dashboard/manage/ManageSSHKey/cmp.tsx     | 20 +++++++++++++++++--
 .../dashboard/manage/ManageVolume/cmp.tsx     | 20 +++++++++++++++++--
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/dashboard/manage/ManageFunction/cmp.tsx b/src/components/pages/dashboard/manage/ManageFunction/cmp.tsx
index 6aaab552..771fe9d9 100644
--- a/src/components/pages/dashboard/manage/ManageFunction/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageFunction/cmp.tsx
@@ -9,11 +9,15 @@ import { ellipseAddress, ellipseText, humanReadableSize } from '@/helpers/utils'
 import { Container, GrayText, Separator } from '../common'
 import VolumeList from '../VolumeList/cmp'
 import StatusLabel from '@/components/common/StatusLabel/cmp'
+import { RotatingLines } from 'react-loader-spinner'
+import { useTheme } from 'styled-components'
 
 export default function ManageFunction() {
   const { func, handleCopyHash, handleDelete, handleDownload, copyAndNotify } =
     useManageFunction()
 
+  const theme = useTheme()
+
   if (!func) {
     return (
       <>
@@ -38,9 +42,21 @@ export default function ManageFunction() {
               <Icon name="alien-8bit" tw="mr-4" className="text-main1" />
               <div className="tp-body2">{name}</div>
               <StatusLabel
-                variant={func.confirmed ? 'running' : 'confirming'}
+                variant={func.confirmed ? 'success' : 'warning'}
                 tw="ml-4"
-              />
+              >
+                {func.confirmed ? (
+                  'READY'
+                ) : (
+                  <div tw="flex items-center">
+                    <div tw="mr-2">CONFIRMING</div>
+                    <RotatingLines
+                      strokeColor={theme.color.base2}
+                      width=".8rem"
+                    />
+                  </div>
+                )}
+              </StatusLabel>
             </div>
             <div>
               <Button
diff --git a/src/components/pages/dashboard/manage/ManageSSHKey/cmp.tsx b/src/components/pages/dashboard/manage/ManageSSHKey/cmp.tsx
index 77bfbc20..2809600b 100644
--- a/src/components/pages/dashboard/manage/ManageSSHKey/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageSSHKey/cmp.tsx
@@ -8,11 +8,15 @@ import { useManageSSHKey } from '@/hooks/pages/dashboard/manage/useManageSSHKey'
 import { ellipseAddress, ellipseText } from '@/helpers/utils'
 import { Container, GrayText, Separator } from '../common'
 import StatusLabel from '@/components/common/StatusLabel'
+import { RotatingLines } from 'react-loader-spinner'
+import { useTheme } from 'styled-components'
 
 export default function ManageSSHKey() {
   const { sshKey, handleCopyKey, handleCopyLabel, handleDelete } =
     useManageSSHKey()
 
+  const theme = useTheme()
+
   if (!sshKey) {
     return (
       <>
@@ -36,9 +40,21 @@ export default function ManageSSHKey() {
               <Icon name="key" tw="mr-4" className="text-main1" />
               <div className="tp-body2">{name}</div>
               <StatusLabel
-                variant={sshKey.confirmed ? 'ready' : 'confirming'}
+                variant={sshKey.confirmed ? 'success' : 'warning'}
                 tw="ml-4"
-              />
+              >
+                {sshKey.confirmed ? (
+                  'READY'
+                ) : (
+                  <div tw="flex items-center">
+                    <div tw="mr-2">CONFIRMING</div>
+                    <RotatingLines
+                      strokeColor={theme.color.base2}
+                      width=".8rem"
+                    />
+                  </div>
+                )}
+              </StatusLabel>
             </div>
             <div>
               <Button
diff --git a/src/components/pages/dashboard/manage/ManageVolume/cmp.tsx b/src/components/pages/dashboard/manage/ManageVolume/cmp.tsx
index 685d26a9..50e50cd8 100644
--- a/src/components/pages/dashboard/manage/ManageVolume/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageVolume/cmp.tsx
@@ -8,11 +8,15 @@ import { useManageVolume } from '@/hooks/pages/dashboard/manage/useManageVolume'
 import { ellipseAddress, ellipseText, humanReadableSize } from '@/helpers/utils'
 import { Container, GrayText, Separator } from '../common'
 import StatusLabel from '@/components/common/StatusLabel'
+import { RotatingLines } from 'react-loader-spinner'
+import { useTheme } from 'styled-components'
 
 export default function ManageVolume() {
   const { volume, handleCopyHash, handleDelete, handleDownload } =
     useManageVolume()
 
+  const theme = useTheme()
+
   if (!volume) {
     return (
       <>
@@ -36,9 +40,21 @@ export default function ManageVolume() {
               <Icon name="floppy-disk" tw="mr-4" className="text-main1" />
               <div className="tp-body2">{name}</div>
               <StatusLabel
-                variant={volume.confirmed ? 'ready' : 'confirming'}
+                variant={volume.confirmed ? 'success' : 'warning'}
                 tw="ml-4"
-              />
+              >
+                {volume.confirmed ? (
+                  'READY'
+                ) : (
+                  <div tw="flex items-center">
+                    <div tw="mr-2">CONFIRMING</div>
+                    <RotatingLines
+                      strokeColor={theme.color.base2}
+                      width=".8rem"
+                    />
+                  </div>
+                )}
+              </StatusLabel>
             </div>
             <div>
               <Button