From 5c1e308634298024148c0055e6821815f0887c9e Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 2 Jun 2023 12:41:47 +0800
Subject: [PATCH 1/3] feat: add copy,font weight

---
 src/modules/[chain]/staking/[validator].vue | 166 ++++++++++++++++----
 1 file changed, 136 insertions(+), 30 deletions(-)

diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index 7f7264b2..54842878 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -135,6 +135,29 @@ onMounted(() => {
     });
   }
 });
+let showCopyToast = ref(0);
+const copyWebsite = async (url: string) => {
+  if (!url) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(url);
+    showCopyToast.value = 1;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
+  } catch (err) {
+    showCopyToast.value = 2;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
+  }
+};
+const tipMsg = computed(() => {
+  return showCopyToast.value === 2
+    ? { class: 'error', msg: 'Copy Error!' }
+    : { class: 'success', msg: 'Copy Success!' };
+});
 </script>
 <template>
   <div>
@@ -145,8 +168,16 @@ onMounted(() => {
             <div class="avatar mr-4 relative w-24 rounded-lg overflow-hidden">
               <div class="w-24 rounded-lg absolute opacity-10"></div>
               <div class="w-24 rounded-lg">
-                <img v-if="avatars[identity] !== 'undefined'" v-lazy="logo(identity)" class="object-contain" />
-                <Icon v-else class="text-4xl" :icon="`mdi-help-circle-outline`" />
+                <img
+                  v-if="avatars[identity] !== 'undefined'"
+                  v-lazy="logo(identity)"
+                  class="object-contain"
+                />
+                <Icon
+                  v-else
+                  class="text-4xl"
+                  :icon="`mdi-help-circle-outline`"
+                />
               </div>
             </div>
             <div class="mx-2">
@@ -154,38 +185,59 @@ onMounted(() => {
               <div class="text-sm mb-4">
                 {{ v.description?.identity || '-' }}
               </div>
-              <label for="delegate" class="btn btn-primary btn-sm w-full" @click="
-                dialog.open('delegate', {
-                  validator_address: v.operator_address,
-                })
-                ">Delegate</label>
+              <label
+                for="delegate"
+                class="btn btn-primary btn-sm w-full"
+                @click="
+                  dialog.open('delegate', {
+                    validator_address: v.operator_address,
+                  })
+                "
+                >Delegate</label
+              >
             </div>
           </div>
           <div class="m-4 text-sm">
-            <p class="text-sm mb-3">About Us</p>
+            <p class="text-sm mb-3 font-medium">About Us</p>
             <div class="card-list">
               <div class="flex items-center mb-2">
                 <Icon icon="mdi-web" class="text-xl mr-1" />
-                <span>Website: </span>
-                <span> {{ v.description?.website || '-' }}</span>
+                <span class="font-bold mr-2">Website: </span>
+                <span
+                  :class="
+                    v?.description?.website
+                      ? 'cursor-pointer'
+                      : 'cursor-default'
+                  "
+                  @click="copyWebsite(v.description?.website || '')"
+                >
+                  {{ v.description?.website || '-' }}</span
+                >
+                <Icon
+                  icon="bxs:copy"
+                  class="text-xl ml-4 cursor-pointer"
+                  v-show="v?.description?.website"
+                  @click="copyWebsite(v.description?.website || '')"
+                />
               </div>
               <div class="flex items-center">
                 <Icon icon="mdi-email-outline" class="text-xl mr-1" />
-                <span>Contact: </span>
+                <span class="font-bold mr-2">Contact: </span>
                 <span> {{ v.description?.security_contact }}</span>
               </div>
             </div>
-            <p class="text-sm mt-4 mb-3">Validator Status</p>
+            <p class="text-sm mt-4 mb-3 font-medium">Validator Status</p>
             <div class="card-list">
               <div class="flex items-center mb-2">
                 <Icon icon="mdi-shield-account-outline" class="text-xl mr-1" />
-                <span>Status: </span><span>
+                <span class="font-bold mr-2">Status: </span
+                ><span>
                   {{ String(v.status).replace('BOND_STATUS_', '') }}
                 </span>
               </div>
               <div class="flex items-center">
                 <Icon icon="mdi-shield-alert-outline" class="text-xl mr-1" />
-                <span>Jailed: </span>
+                <span class="font-bold mr-2">Jailed: </span>
                 <span> {{ v.jailed || '-' }} </span>
               </div>
             </div>
@@ -194,7 +246,10 @@ onMounted(() => {
         <div class="flex-1">
           <div class="flex flex-col justify-between">
             <div class="flex mb-2">
-              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
+              <div
+                class="flex items-center justify-center rounded w-10 h-10"
+                style="border: 1px solid #666"
+              >
                 <Icon icon="mdi-coin" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -210,7 +265,10 @@ onMounted(() => {
               </div>
             </div>
             <div class="flex mb-2">
-              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
+              <div
+                class="flex items-center justify-center rounded w-10 h-10"
+                style="border: 1px solid #666"
+              >
                 <Icon icon="mdi-percent" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -222,7 +280,10 @@ onMounted(() => {
             </div>
 
             <div class="flex mb-2">
-              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
+              <div
+                class="flex items-center justify-center rounded w-10 h-10"
+                style="border: 1px solid #666"
+              >
                 <Icon icon="mdi-account-tie" class="text-3xl" />
               </div>
 
@@ -234,7 +295,10 @@ onMounted(() => {
               </div>
             </div>
             <div class="flex mb-2">
-              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
+              <div
+                class="flex items-center justify-center rounded w-10 h-10"
+                style="border: 1px solid #666"
+              >
                 <Icon icon="mdi-finance" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -244,7 +308,10 @@ onMounted(() => {
             </div>
 
             <div class="flex mb-2">
-              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
+              <div
+                class="flex items-center justify-center rounded w-10 h-10"
+                style="border: 1px solid #666"
+              >
                 <Icon icon="mdi-stairs-up" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -254,7 +321,10 @@ onMounted(() => {
             </div>
 
             <div class="flex mb-2">
-              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
+              <div
+                class="flex items-center justify-center rounded w-10 h-10"
+                style="border: 1px solid #666"
+              >
                 <Icon icon="mdi-clock" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -279,21 +349,36 @@ onMounted(() => {
         <div class="px-4 mt-1">
           <div class="overflow-auto" style="max-height: 280px">
             <div class="text-sm mb-2">Commissions</div>
-            <div v-for="(i, k) in commission" :key="`reward-${k}`" color="info" label variant="outlined"
-              class="mr-1 mb-1 badge text-xs">
+            <div
+              v-for="(i, k) in commission"
+              :key="`reward-${k}`"
+              color="info"
+              label
+              variant="outlined"
+              class="mr-1 mb-1 badge text-xs"
+            >
               {{ format.formatToken2(i) }}
             </div>
             <div class="text-sm mb-2 mt-2">Outstanding Rewards</div>
-            <div v-for="(i, k) in rewards" :key="`reward-${k}`" class="mr-1 mb-1 badge text-xs">
+            <div
+              v-for="(i, k) in rewards"
+              :key="`reward-${k}`"
+              class="mr-1 mb-1 badge text-xs"
+            >
               {{ format.formatToken2(i) }}
             </div>
           </div>
           <div class="absolute bottom-6 left-0 right-0 px-4">
-            <label for="withdraw_commission" class="btn btn-primary w-full" @click="
-              dialog.open('withdraw_commission', {
-                validator_address: v.operator_address,
-              })
-              ">Withdraw</label>
+            <label
+              for="withdraw_commission"
+              class="btn btn-primary w-full"
+              @click="
+                dialog.open('withdraw_commission', {
+                  validator_address: v.operator_address,
+                })
+              "
+              >Withdraw</label
+            >
           </div>
         </div>
       </div>
@@ -304,7 +389,10 @@ onMounted(() => {
         <div class="px-4">
           <div class="mb-3">
             <div class="text-sm">Account</div>
-            <RouterLink class="text-xs text-primary" :to="`/${chain}/account/${addresses.account}`">
+            <RouterLink
+              class="text-xs text-primary"
+              :to="`/${chain}/account/${addresses.account}`"
+            >
               {{ addresses.account }}
             </RouterLink>
           </div>
@@ -354,7 +442,11 @@ onMounted(() => {
                   <span class="mr-2">{{
                     format.messages(item.tx.body.messages)
                   }}</span>
-                  <Icon v-if="item.code === 0" icon="mdi-check" class="text-yes" />
+                  <Icon
+                    v-if="item.code === 0"
+                    icon="mdi-check"
+                    class="text-yes"
+                  />
                   <Icon v-else icon="mdi-multiply" class="text-no" />
                 </div>
               </td>
@@ -364,6 +456,20 @@ onMounted(() => {
         </table>
       </div>
     </div>
+    <div class="toast" v-show="showCopyToast === 1">
+      <div class="alert alert-success">
+        <div class="text-xs md:!text-sm">
+          <span>{{ tipMsg.msg }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="toast" v-show="showCopyToast === 2">
+      <div class="alert alert-error">
+        <div class="text-xs md:!text-sm">
+          <span>{{ tipMsg.msg }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

From e66ebe4a2e7c176ca0ba6e0e582b070472f4a631 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 2 Jun 2023 13:45:09 +0800
Subject: [PATCH 2/3] feat: h5 style

---
 src/modules/[chain]/staking/[validator].vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index 54842878..2c27817c 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -342,12 +342,15 @@ const tipMsg = computed(() => {
       <div class="h-100">
         <CommissionRate :commission="v.commission"></CommissionRate>
       </div>
-      <div class="h-100 bg-base-100 rounded shadow relative">
+      <div class="h-100 bg-base-100 rounded shadow relative overflow-auto">
         <div class="text-lg font-semibold text-main px-4 pt-4">
           Commissions & Rewards
         </div>
-        <div class="px-4 mt-1">
-          <div class="overflow-auto" style="max-height: 280px">
+        <div
+          class="px-4 mt-1 flex flex-col justify-between pb-4"
+          style="height: calc(100% - 50px)"
+        >
+          <div class="overflow-auto flex-1">
             <div class="text-sm mb-2">Commissions</div>
             <div
               v-for="(i, k) in commission"
@@ -368,7 +371,7 @@ const tipMsg = computed(() => {
               {{ format.formatToken2(i) }}
             </div>
           </div>
-          <div class="absolute bottom-6 left-0 right-0 px-4">
+          <div class="">
             <label
               for="withdraw_commission"
               class="btn btn-primary w-full"
@@ -382,7 +385,7 @@ const tipMsg = computed(() => {
           </div>
         </div>
       </div>
-      <div class="h-100 bg-base-100 rounded shadow">
+      <div class="h-100 bg-base-100 rounded shadow overflow-x-auto">
         <div class="px-4 pt-4 mb-2 text-main font-lg font-semibold">
           Addresses
         </div>

From 5955f061a78fe93a0a0b2001449de7a685fb1012 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 2 Jun 2023 13:53:06 +0800
Subject: [PATCH 3/3] feat: style add padding

---
 src/modules/[chain]/staking/[validator].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index 2c27817c..faee1be2 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -389,7 +389,7 @@ const tipMsg = computed(() => {
         <div class="px-4 pt-4 mb-2 text-main font-lg font-semibold">
           Addresses
         </div>
-        <div class="px-4">
+        <div class="px-4 pb-4">
           <div class="mb-3">
             <div class="text-sm">Account</div>
             <RouterLink