chore: Update UI

mvc-labs · Mar 12, 2024 · 0c1ec8e · 0c1ec8e
1 parent acab0c7
commit 0c1ec8e
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 43 deletions.
diff --git a/src/components/ui/drawer/DrawerContent.vue b/src/components/ui/drawer/DrawerContent.vue
@@ -17,11 +17,11 @@ const forwarded = useForwardPropsEmits(props, emits)
     <DrawerOverlay />
     <DrawerContent
       v-bind="forwarded" :class="cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-white',
         props.class,
       )"
     >
-      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <!-- <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" /> -->
       <slot />
     </DrawerContent>
   </DrawerPortal>

diff --git a/src/components/ui/toast/ToastViewport.vue b/src/components/ui/toast/ToastViewport.vue
@@ -13,5 +13,5 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] w-82 left-1/2 -translate-x-1/2', props.class)" />
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-2 z-[100] w-82 left-1/2 -translate-x-1/2', props.class)" />
 </template>
diff --git a/src/components/ui/toast/Toaster.vue b/src/components/ui/toast/Toaster.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { isVNode } from 'vue'
 import { useToast } from './use-toast'
+import SuccessIcon from '@/assets/icons-v3/sucess.svg'
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
 
 const { toasts } = useToast()
@@ -10,8 +11,11 @@ const { toasts } = useToast()
   <ToastProvider>
     <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast" class="py-3.5 px-4 bg-white rounded-xl">
       <div class="grid gap-1">
-        <ToastTitle v-if="toast.title">
-          {{ toast.title }}
+        <ToastTitle v-if="toast.title" class="flex items-center gap-x-2">
+          <template v-if="toast.toastType === 'success'">
+            <SuccessIcon class="flex-shrink-0"/>
+          </template>
+          <span class="break-all">{{ toast.title }}</span>
         </ToastTitle>
         <template v-if="toast.description">
           <ToastDescription v-if="isVNode(toast.description)">

diff --git a/src/components/ui/toast/use-toast.ts b/src/components/ui/toast/use-toast.ts
@@ -5,13 +5,13 @@ import type { ToastProps } from '.'
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
 
-export type StringOrVNode =
-  | string
-  | VNode
-  | (() => VNode)
+export type StringOrVNode = string | VNode | (() => VNode)
+
+type ToastType = 'success' | 'fail' | 'info' | 'warning'
 
 type ToasterToast = ToastProps & {
   id: string
+  toastType: ToastType
   title?: string
   description?: StringOrVNode
   action?: Component
@@ -35,21 +35,21 @@ type ActionType = typeof actionTypes
 
 type Action =
   | {
-    type: ActionType['ADD_TOAST']
-    toast: ToasterToast
-  }
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
   | {
-    type: ActionType['UPDATE_TOAST']
-    toast: Partial<ToasterToast>
-  }
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
   | {
-    type: ActionType['DISMISS_TOAST']
-    toastId?: ToasterToast['id']
-  }
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
   | {
-    type: ActionType['REMOVE_TOAST']
-    toastId?: ToasterToast['id']
-  }
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
 
 interface State {
   toasts: ToasterToast[]
@@ -58,8 +58,7 @@ interface State {
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
 function addToRemoveQueue(toastId: string) {
-  if (toastTimeouts.has(toastId))
-    return
+  if (toastTimeouts.has(toastId)) return
 
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId)
@@ -83,39 +82,34 @@ function dispatch(action: Action) {
       break
 
     case actionTypes.UPDATE_TOAST:
-      state.value.toasts = state.value.toasts.map(t =>
-        t.id === action.toast.id ? { ...t, ...action.toast } : t,
-      )
+      state.value.toasts = state.value.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t))
       break
 
     case actionTypes.DISMISS_TOAST: {
       const { toastId } = action
 
       if (toastId) {
         addToRemoveQueue(toastId)
-      }
-      else {
+      } else {
         state.value.toasts.forEach((toast) => {
           addToRemoveQueue(toast.id)
         })
       }
 
-      state.value.toasts = state.value.toasts.map(t =>
+      state.value.toasts = state.value.toasts.map((t) =>
         t.id === toastId || toastId === undefined
           ? {
               ...t,
               open: false,
             }
-          : t,
+          : t
       )
       break
     }
 
     case actionTypes.REMOVE_TOAST:
-      if (action.toastId === undefined)
-        state.value.toasts = []
-      else
-        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
+      if (action.toastId === undefined) state.value.toasts = []
+      else state.value.toasts = state.value.toasts.filter((t) => t.id !== action.toastId)
 
       break
   }
@@ -149,8 +143,7 @@ function toast(props: Toast) {
       id,
       open: true,
       onOpenChange: (open: boolean) => {
-        if (!open)
-          dismiss()
+        if (!open) dismiss()
       },
     },
   })

diff --git a/src/pages/wallet/AccountHeader.vue b/src/pages/wallet/AccountHeader.vue
@@ -7,18 +7,34 @@ import Avatar from '@/components/Avatar.vue'
 import CopyIcon from '@/assets/icons-v3/copy.svg'
 import { getAddress, type Account } from '@/lib/account'
 import { PencilSquareIcon } from '@heroicons/vue/24/solid'
+import { useToast } from '@/components/ui/toast/use-toast'
 import ServiceMenu from '@/components/headers/ServiceMenu.vue'
 import SettingMenu from '@/components/headers/SettingMenu.vue'
 import EditName from '@/pages/accounts/components/EditName.vue'
-import { useToast } from '@/components/ui/toast/use-toast'
+import CloseIcon from '@/assets/icons-v3/close.svg'
+import BtcLogo from '@/assets/images/btc-logo.svg?url'
+import SpaceLogo from '@/assets/images/space-logo.svg?url'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
 
 const { toast } = useToast()
 
 const network = ref()
-const address = ref()
+const btcAddress = ref()
+const mvcAddress = ref()
+const isOpen = ref(false)
 const router = useRouter()
 
-getAddress().then((_address) => (address.value = _address))
+getAddress('btc').then((_address) => (btcAddress.value = _address))
+getAddress('mvc').then((_address) => (mvcAddress.value = _address))
 getNetwork().then((_network) => (network.value = _network))
 
 const { account } = defineProps<{
@@ -31,9 +47,10 @@ const toAccountList = () => {
   router.push('/accounts')
 }
 
-const copy = () => {
-  toast({ title: 'success', description: `${address.value} copied` })
-  navigator.clipboard.writeText(address.value)
+const copy = (address: string, type: string) => {
+  toast({ title: `${type} Address Copied`, toastType: 'success', description: address })
+  navigator.clipboard.writeText(address)
+  isOpen.value = false
 }
 </script>
 
@@ -52,11 +69,41 @@ const copy = () => {
       <EditName v-model:open="openEditNameModal" :account="account" />
     </FlexBox>
     <div class="flex items-center gap-x-4">
-      <CopyIcon class="cursor-pointer" @click="copy" />
+      <CopyIcon class="cursor-pointer" @click="isOpen = true" />
       <SettingMenu />
       <ServiceMenu class="cursor-pointer" />
     </div>
   </div>
+  <Drawer v-model:open="isOpen">
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle class="text-center relative">
+          <span>Wallet Address</span>
+          <DrawerClose>
+            <CloseIcon class="absolute right-0 top-0" />
+          </DrawerClose>
+        </DrawerTitle>
+      </DrawerHeader>
+      <FlexBox d="col" ai="center" :gap="2" class="py-4">
+        <FlexBox ai="center" :gap="2">
+          <img :src="BtcLogo" alt="Bitcoin" class="w-8" />
+          <div>
+            <div>Bitcoin</div>
+            <div class="text-xs text-gray-primary break-all w-64">{{ btcAddress }}</div>
+          </div>
+          <CopyIcon class="cursor-pointer" @click="copy(btcAddress, 'Bitcoin')" />
+        </FlexBox>
+        <FlexBox ai="center" :gap="2">
+          <img :src="SpaceLogo" alt="Bitcoin" class="w-8" />
+          <div>
+            <div>Microvisionchain</div>
+            <div class="text-xs text-gray-primary break-all w-64">{{ btcAddress }}</div>
+          </div>
+          <CopyIcon class="cursor-pointer" @click="copy(mvcAddress, 'Microvisionchain')" />
+        </FlexBox>
+      </FlexBox>
+    </DrawerContent>
+  </Drawer>
 </template>
 
 <style scoped lang="css"></style>