fix(front): history view on mobile

hack-a-chain-software · Jan 22, 2024 · 18cdc78 · 18cdc78
1 parent 62f6f27
commit 18cdc78
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 107 deletions.
diff --git a/front/components/Home/Widget/Tokens.vue b/front/components/Home/Widget/Tokens.vue
@@ -19,6 +19,7 @@ const data = reactive({
   showReceiveModal: false
 })
 
+// TODO: get key by env (generate new) and refact and move this to SDK
 onBeforeMount(async () => {
   let res = await fetch(
     'https://api.coingecko.com/api/v3/coins/kadena?x_cg_api_key=CG-HMVPj5jXZxnbPZetLezC3hZw'
@@ -166,6 +167,8 @@ const balance = computed(() => {
             :address="key"
             :token="tree.token"
             :balance="tree.balance"
+            :kdxInDolar="data.kdxInDolar"
+            :kadenaInDolar="data.kadenaInDolar"
             v-for="(tree, key) of treeBalances.tokens"
             :key="`${
               tree?.token?.id

diff --git a/front/components/TokensItem.vue b/front/components/TokensItem.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, reactive, onBeforeMount } from 'vue'
+import { computed } from 'vue'
 import {
   getDecimals,
   kadenaTokens as tokens,
@@ -11,17 +11,15 @@ const props = withDefaults(
     address: any;
     balance: any;
     token: any;
+    kdxInDolar: number;
+    kadenaInDolar: number;
   }>(),
   {
-    //
+    kdxInDolar: 0,
+    kadenaInDolar: 0
   }
 )
 
-const data = reactive({
-  kdxInDolar: 0,
-  kadenaInDolar: 0
-})
-
 const formattedAmount = computed(() => {
   const decimals = getDecimals(12)
 
@@ -40,24 +38,6 @@ const metadata = computed(() => {
   )
 })
 
-onBeforeMount(async () => {
-  let res = await fetch(
-    'https://api.coingecko.com/api/v3/coins/kadena?x_cg_api_key=CG-HMVPj5jXZxnbPZetLezC3hZw'
-  )
-
-  let json = await res.json()
-
-  data.kadenaInDolar = json.market_data.current_price.usd
-
-  res = await fetch(
-    'https://api.coingecko.com/api/v3/coins/kaddex?x_cg_api_key=CG-HMVPj5jXZxnbPZetLezC3hZw'
-  )
-
-  json = await res.json()
-
-  data.kdxInDolar = json.market_data.current_price.usd
-})
-
 const balance = computed(() => {
   const decimals = getDecimals(12)
 
@@ -67,8 +47,8 @@ const balance = computed(() => {
       decimals
     ) as any) *
     (props.address === 'coin'
-      ? data.kadenaInDolar
-      : data.kdxInDolar)
+      ? props.kadenaInDolar
+      : props.kdxInDolar)
   ).toFixed(2)
 })
 </script>

diff --git a/front/components/history/Group.vue b/front/components/history/Group.vue
@@ -13,16 +13,20 @@ withDefaults(
 
 <template>
   <div class="w-full pt-[60px]">
-    <div class="pb-3 pl-[40px]">
+    <div class="pb-3 md:pl-[40px]">
       <span v-text="date" class="text-xxs text-font-2" />
     </div>
 
     <div
       class="
-        p-6
+        px-4
+        py-3
+        md:px-6
+        md:py-6
         bg-gray-900
         rounded-[12px]
         flex flex-col
+        gap-6 md:gap-0
         border border-gray-600
       "
     >

diff --git a/front/components/history/Header.vue b/front/components/history/Header.vue
@@ -58,52 +58,17 @@ const handleType = (value: any) => {
 const handleSearch = (event: any) => {
   emit('updateSearch', event.target.value)
 }
-
-onBeforeMount(async () => {
-  let res = await fetch(
-    'https://api.coingecko.com/api/v3/coins/kadena?x_cg_api_key=CG-HMVPj5jXZxnbPZetLezC3hZw'
-  )
-
-  let json = await res.json()
-
-  data.kadenaInDolar = json.market_data.current_price.usd
-
-  res = await fetch(
-    'https://api.coingecko.com/api/v3/coins/kaddex?x_cg_api_key=CG-HMVPj5jXZxnbPZetLezC3hZw'
-  )
-
-  json = await res.json()
-
-  data.kdxInDolar = json.market_data.current_price.usd
-})
-
-// const balance = computed(() => {
-//   const decimals = getDecimals(12)
-
-//   return (
-//     (formatBigNumberWithDecimals(
-//       userData.value?.tokens.coin?.balance || 0,
-//       decimals
-//     ) as any) *
-//       data.kadenaInDolar +
-//     (formatBigNumberWithDecimals(
-//       userData.value?.tokens['opact-coin']?.balance || 0,
-//       decimals
-//     ) as any) *
-//       data.kdxInDolar
-//   ).toFixed(2)
-// })
 </script>
 
 <template>
   <div class="w-full">
-    <div class="grid grid-cols-[1fr,auto] gap-[24px]">
+    <div class="hidden md:grid grid-cols-[1fr,auto] gap-[24px]">
       <div
         class="
-          border border-gray-600
+          border border-gray-500
           rounded-[8px]
           flex
-          items-cneter
+          items-center
           p-4
           space-x-2
         "
@@ -117,17 +82,22 @@ onBeforeMount(async () => {
           placeholder="Search"
           class="
             text-xs text-font-2
+            p-0
             w-full
+            select-none
+            focus:outline-none
             bg-transparent
-            outline-none
+            border-transparent
+            !outline-none
+            border-transparent focus:border-transparent focus:ring-0
           "
           @input="handleSearch"
         />
       </div>
 
       <div
         class="
-          border border-gray-600
+          border border-gray-500
           rounded-[8px]
           p-4
           flex
@@ -160,34 +130,17 @@ onBeforeMount(async () => {
           />
         </div>
       </div>
-
-      <!-- <div
-        class="border border-gray-600 rounded-[8px] p-4  flex items-center space-x-2 cursor-pointer"
-      >
-        <div>
-          <Icon
-            name="filter"
-            class="w-6 h-6 text-blue-400"
-          />
-        </div>
-
-        <div>
-          <span
-            class="text-font-1 text-xxs"
-          >
-            Filter
-          </span>
-        </div>
-      </div> -->
     </div>
 
-    <div class="pt-[32px] flex items-center space-x-[24px]">
+    <div class="pt-[32px] flex items-center space-x-4 md:space-x-[24px]">
       <button
         :class="data.type === 'all' && 'bg-blue-400'"
         class="
-          px-4
+          px-2
+          md:px-4
           py-2
-          text-xxs text-font-2
+          font-lato
+          text-xs md:text-xxs text-font-1
           hover:bg-gray-800
           rounded-[8px]
         "
@@ -199,9 +152,11 @@ onBeforeMount(async () => {
       <button
         :class="data.type === 'withdraw' && 'bg-blue-400'"
         class="
-          px-4
+          px-2
+          md:px-4
           py-2
-          text-xxs text-font-2
+          font-lato
+          text-xs md:text-xxs text-font-1
           hover:bg-gray-800
           rounded-[8px]
         "
@@ -213,9 +168,11 @@ onBeforeMount(async () => {
       <button
         :class="data.type === 'deposit' && 'bg-blue-400'"
         class="
-          px-4
+          px-2
+          md:px-4
           py-2
-          text-xxs text-font-2
+          font-lato
+          text-xs md:text-xxs text-font-1
           hover:bg-gray-800
           rounded-[8px]
         "
@@ -225,7 +182,7 @@ onBeforeMount(async () => {
       </button>
     </div>
 
-    <DatePicker
+    <UIDatePicker
       :show="data.showPicker"
       @close="data.showPicker = false"
       @selected="selectedPicker"

diff --git a/front/components/history/Item.vue b/front/components/history/Item.vue
@@ -76,13 +76,13 @@ const metadata = computed(() => {
 <template>
   <div
     class="
-      px-4
-      py-3
-      hover:bg-gray-800
+      md:px-4
+      md:py-3
+      md:hover:bg-gray-800
       rounded-[8px]
       items-center
       justify-between
-      grid grid-cols-[2fr,1fr,1fr,1.3fr]
+      grid grid-cols-[2fr,auto] md:grid-cols-[2fr,1fr,1fr,1.3fr]
       gap-6
     "
   >
@@ -102,17 +102,38 @@ const metadata = computed(() => {
         <Icon :name="icon" class="text-white w-6 h-6" />
       </div>
 
-      <div>
+      <div
+        class="flex flex-col"
+      >
         <span
           v-text="type"
-          class="capitalize text-font-1 text-sm"
+          class="capitalize text-font-1 text-xs md:text-sm"
         />
+
+        <div
+          class="
+            md:hidden
+            flex
+            items-center
+            justify-end
+            space-x-2
+            text-end
+          "
+        >
+          <Icon name="kadena" key="another-kadena" class="text-white w-[10px] h-[10px]" />
+
+          <span
+            class="text-xxs text-font-2"
+            v-text="shortenAddress(type === 'withdraw' ? receiver as string : sender as string)"
+          />
+        </div>
       </div>
     </div>
 
     <div
       class="
-        flex
+        hidden
+        md:flex
         items-center
         justify-end
         space-x-2
@@ -127,7 +148,7 @@ const metadata = computed(() => {
       />
     </div>
 
-    <div class="text-end">
+    <div class="hidden md:block text-end">
       <span
         v-text="formattedDate"
         class="font-xs text-font-1"

diff --git a/front/components/layout/GenericTopbar.vue b/front/components/layout/GenericTopbar.vue
@@ -35,6 +35,7 @@ withDefaults(
         overflow-visible
         z-[0]
         select-none
+        pointer-events-none
       "
     >
       <div

diff --git a/front/components/layout/MobileTopbar.vue b/front/components/layout/MobileTopbar.vue
@@ -24,6 +24,7 @@
         overflow-visible
         z-[0]
         select-none
+        pointer-events-none
       "
     >
       <div

diff --git a/front/components/layout/Sidebar.vue b/front/components/layout/Sidebar.vue
@@ -12,14 +12,16 @@ const routes = [
   {
     disabled: false,
     path: '',
+    key: 'index',
     label: 'Home',
     icon: 'wallet'
   },
   {
     disabled: false,
+    icon: 'chart',
+    key: 'history',
     path: 'history',
-    label: 'History',
-    icon: 'chart'
+    label: 'History'
   }
 ]
 
@@ -68,11 +70,12 @@ const redirect = (path: string, skip: boolean) => {
               label,
               icon,
               path,
+              key,
               disabled,
             } in routes"
             :key="label"
             :class="[
-              route.name === path
+              route.name === key
                 ? 'text-blue-400'
                 : 'text-font-2 hover:bg-gray-800 cursor-pointer',
               disabled && '!cursor-not-allowed opacity-50',

diff --git a/front/pages/history.vue b/front/pages/history.vue
@@ -131,6 +131,10 @@ const receipts = computed(() => {
       flex-col
     "
   >
+    <LayoutGenericTopbar
+      name="History"
+    />
+
     <HistoryHeader
       @update-type="updateType($event)"
       @update-filter="updateFilter($event)"