From 3cd6ede12f369f99464fa35a5522db13ea429bd2 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Wed, 7 Jun 2023 19:43:10 -0400
Subject: [PATCH 1/9] Update Connect Wallet view to follow new auth flow with
 corrected design

---
 apps/web/src/components/Carousel.vue    |  22 +++++
 apps/web/src/components/LoadingRing.vue |  13 +++
 apps/web/src/components/Slide.vue       |  46 +++++++++
 apps/web/src/layouts/default-layout.vue | 124 ++++++++++++------------
 4 files changed, 142 insertions(+), 63 deletions(-)
 create mode 100644 apps/web/src/components/Carousel.vue
 create mode 100644 apps/web/src/components/LoadingRing.vue
 create mode 100644 apps/web/src/components/Slide.vue

diff --git a/apps/web/src/components/Carousel.vue b/apps/web/src/components/Carousel.vue
new file mode 100644
index 000000000..a6bed504d
--- /dev/null
+++ b/apps/web/src/components/Carousel.vue
@@ -0,0 +1,22 @@
+
+<script setup lang="ts">
+    import { defineProps } from 'vue'
+
+    // eslint-disable-next-line no-undef
+    const props = defineProps({
+        currentSlide: {
+            type: Number,
+            required: true
+        }
+    })
+</script>
+
+<template>
+  <div>
+    <slot :current-slide="props.currentSlide" /> 
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/apps/web/src/components/LoadingRing.vue b/apps/web/src/components/LoadingRing.vue
new file mode 100644
index 000000000..5b5131e5a
--- /dev/null
+++ b/apps/web/src/components/LoadingRing.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// 
+</script>
+
+<template>
+  <div class="ring">
+    <!-- <slot class="" /> -->
+    <span />
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/apps/web/src/components/Slide.vue b/apps/web/src/components/Slide.vue
new file mode 100644
index 000000000..15d6e8442
--- /dev/null
+++ b/apps/web/src/components/Slide.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// 
+</script>
+
+<template>
+  <div class="slide_left">
+    <transition name="slide slide_left">
+      <slot /> 
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-enter-active,
+.slide-leave-active{
+    transition: opacity 0.7s ease-in-out;
+}
+
+.slide-enter-from,
+.slide-leave-to{
+    opacity: 0;
+}
+
+.slide-enter-to,
+.slide-leave-from{
+    opacity: 1;
+}
+
+/*  */
+
+.slide_left-enter-active,
+.slide_left-leave-active{
+    transition: transform 0.5s;
+}
+
+.slide_left-enter-from,
+.slide_left-leave-to{
+  transform: translateX(100%);
+}
+
+.slide_left-enter-to,
+.slide_left-leave-from{
+    
+  transform: translateX(0%);
+}
+</style>
\ No newline at end of file
diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index c59a2153b..b23d2d3b4 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from 'vue'
+import Carousel from '@/components/Carousel.vue'
+import Slide from '@/components/Slide.vue'
+import LoadingRing from '@/components/LoadingRing.vue'
 
 import useWallet from '@/composables/wallet'
 
+const authFlowCardNumber = ref(1)
 const selectedAddress = ref(null as string | null)
+const selectedProivder = ref(null as null | string)
 
 const  {
   activeWallets,
@@ -64,6 +69,8 @@ onMounted(() => {
 onUnmounted(() =>{
   window.removeEventListener('click', handleOutsideClick)
 })
+
+
 </script>
 
 <template>
@@ -191,7 +198,8 @@ onUnmounted(() =>{
 
       <div
         class="relative text-black"
-        :class="openWalletConnect? 'overflow-hidden h-[80vh] 600s:h-[78vh] pr-[15px]' : ''"
+        :class="openWalletConnect? 'overflow-hidden pr-[15px]' : ''"
+        :style="openWalletConnect? 'height: calc(100vh - 250px);' : ''"
       >
         <slot />
         <div
@@ -211,58 +219,68 @@ onUnmounted(() =>{
     >
       <div 
         id="connect_wallet_card"
-        class="bg-white text-black card px-[40px] py-[25px] 600s:max-w-[80%] max-w-[580px] "
+        class="800s:max-w-[80%] max-w-[580px] w-full flex max-h-[450px] h-full overflow-hidden"
       >
-        <div class="nav_items">
-          Connect Wallet
-        </div>
-        <div class="my-[20px] nav_items">
-          <input
-            type="checkbox"
-            class=""
-          > I certify that I have read and accept the updated 
-          <span class="text-primary"> Terms of Use </span> and <span class="text-primary">Privacy Notice</span>.
-        </div>
-        <div class="mb-[20px]">
-          <div class="card_input text-black cursor-pointer relative">
+        <Carousel
+          v-slot="{currentSlide}"
+          :current-slide="authFlowCardNumber"
+          class="w-full h-full relative overflow-hidden"
+        >
+          <Slide class="w-full h-full ">
             <div
-              class="flex items-center justify-between w-full gap-[8px]"
-              @click="toggleOpenSelectAddressInput"
+              v-show="currentSlide === 1"
+              class="absolute top-0 left-0 w-full h-full bg-white card px-[25px] py-[12px]"
             >
-              <h6
-                v-if="!selectedAddress"
-                class="w-full"
-              >
-                Select wallet you want to connect
+              <h6 class="nav_items">
+                Select Wallet Provider
               </h6>
-              <h6
-                v-else 
-                class="w-full"
-              >
-                {{ selectedAddress }}
-              </h6>
-              <i
-                data-feather="chevron-down"
-                class="w-[20px] h-min"
-              />
+              <div class="flex flex-wrap justify-between gap-[20px] w-full mt-[20px]">
+                <button
+                  v-for="wallet in activeWallets"
+                  :key="wallet"
+                  class="w-[180px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
+                  @click="selectProvider(wallet, 'ETH'), authFlowCardNumber = 2, selectedProivder = wallet"
+                >
+                  <img
+                    :src="`/${wallet.toLowerCase()}.svg`"
+                    :alt="`${wallet} logo`"
+                    class="w-[32px] h-[32px] rounded-[999px] mb-[10px]"
+                  >
+                  <h6>
+                    {{ wallet }}
+                  </h6>
+                </button>
+              </div> 
             </div>
-
+          </Slide>
+          <Slide class="w-full h-full ">
             <div
-              v-show="openSelectAddressInput"
-              class="absolute top-[115%] left-0 card_input max-w-full w-full max-h-[300px] overflow-auto"
+              v-show="currentSlide === 2"
+              class="absolute top-0 left-0 w-full h-full bg-white card px-[25px] py-[12px]"
             >
-              <div v-if="userAddresses.length === 0">
-                Please select wallet provider to access list of wallets under your provider.
-              </div>
+              <h6 class="nav_items flex items-center mb-[20px]">
+                <button @click="authFlowCardNumber = 1, selectedProivder = null">
+                  <i
+                    data-feather="chevron-left"
+                    class="text-primary hover:text-blue_3 mr-[10px]"
+                  />
+                </button>
+                Select Address
+              </h6>
               <div
-                v-else
-                class="w-full"
+                v-if="!userAddresses"
+                class="flex items-center justify-center h-[90%]"
               >
+                <h6 class="nav_items">
+                  Waiting on {{ selectedProivder }}...
+                </h6>
+              </div>
+              <div v-else>
                 <button
                   v-for="act in userAddresses"
                   :key="act.address"
-                  class="w-full border rounded-[8px] px-[10px] py-[15px] flex items-center justify-between"
-                  @click="selectAddress(act.address)"
+                  class="w-full border rounded-[8px] px-[10px] py-[15px] flex items-center justify-between hover:border-blue_3"
+                  @click="selectAddress(act.address), openWalletConnect = false"
                 >
                   <div>
                     {{ convertString(act.address) }}
@@ -273,25 +291,8 @@ onUnmounted(() =>{
                 </button>
               </div>
             </div>
-          </div>
-        </div>
-        <div class="flex flex-wrap justify-around gap-[20px] max-h-[400px] overflow-auto">
-          <button
-            v-for="wallet in activeWallets"
-            :key="wallet"
-            class="w-[180px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
-            @click="selectProvider(wallet, 'ETH')"
-          >
-            <img
-              :src="`/${wallet.toLowerCase()}.svg`"
-              :alt="`${wallet} logo`"
-              class="w-[32px] h-[32px] rounded-[999px] mb-[10px]"
-            >
-            <h6>
-              {{ wallet }}
-            </h6>
-          </button>
-        </div>
+          </Slide>
+        </Carousel>
       </div>
     </div>
   </div>
@@ -324,8 +325,6 @@ onUnmounted(() =>{
   font-size: 13px;
   line-height: 17px;
   letter-spacing: -0.01em;
-  height: 100%;
-
   color: #ABABAB;
 }
 
@@ -346,7 +345,6 @@ onUnmounted(() =>{
   line-height: 24px;
   letter-spacing: -0.01em;
   color: #101828;
-  margin-bottom: 6px;
 }
 
 .nav_items_active{

From a4793f37b4ab6e75091feda75eeef47545a2de7d Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Mon, 12 Jun 2023 11:12:20 -0400
Subject: [PATCH 2/9] Update the line chart component to be dynamic with
 gradient option & Add needed variables to BreakdownChart component

---
 apps/web/src/components/LoadingRing.vue       |  13 --
 .../web/src/components/charts/LineChartJS.vue | 102 ++++++------
 apps/web/src/layouts/default-layout.vue       |  30 ++--
 .../overview/components/BreakdownChart.vue    | 154 ++++++++++++++++--
 4 files changed, 195 insertions(+), 104 deletions(-)
 delete mode 100644 apps/web/src/components/LoadingRing.vue

diff --git a/apps/web/src/components/LoadingRing.vue b/apps/web/src/components/LoadingRing.vue
deleted file mode 100644
index 5b5131e5a..000000000
--- a/apps/web/src/components/LoadingRing.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-// 
-</script>
-
-<template>
-  <div class="ring">
-    <!-- <slot class="" /> -->
-    <span />
-  </div>
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/apps/web/src/components/charts/LineChartJS.vue b/apps/web/src/components/charts/LineChartJS.vue
index f8e4b8b5f..ae2bf3f93 100644
--- a/apps/web/src/components/charts/LineChartJS.vue
+++ b/apps/web/src/components/charts/LineChartJS.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import Chart, { ChartItem } from 'chart.js/auto'
+import { ref, onMounted, watch } from 'vue'
+import Chart, { ChartItem, ChartData } from 'chart.js/auto'
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -19,53 +19,35 @@ const props = defineProps({
     yGridLines: {
         type: Boolean,
         default: false
+    }, 
+    data: {
+        type: Object,
+        required: true
+    },
+    gradient: {
+        type: Boolean,
+        default: false
     }
 })
 
-const chart = ref(null as any)
+const hexToRGB = (hex: string) => {
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : {r: 0, g: 0, b: 0}
+}
+let ctx: any
+let line_chart: Chart<any, any[], unknown>
 onMounted(() => {
-    // TD: make this gradient dynamic with the data and it's colors
-    var ctx = document.getElementById(props.id)?.getContext('2d')
-    var gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
-        gradient.addColorStop(0, 'rgba(86, 138, 217,0.28)')   
-        gradient.addColorStop(1, 'rgba(86, 138, 217,0)') 
-    chart.value = new Chart(document.getElementById(props.id) as ChartItem , {
+    ctx = document.getElementById(props.id)?.getContext('2d')
+    line_chart = new Chart(ctx, {
         type : 'line',
-		data : {
-			labels : [ 'Jan 22', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
-             'Sep', 'Oct', 'Nov', 'Dec', 'Jan 23', 'Feb', 'Mar' ],
-			datasets : [
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (250 - 200 + 1) + 200)),
-                    label : 'Primary Account',
-                    borderColor : '#2F80ED',
-                    fill: true,
-                    backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                },
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (150 - 100 + 1) + 100)),
-                    label : '-',
-                    borderColor : '#A8C8F3',
-                    fill: false,
-                    // backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                },
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (50 - 0 + 1) + 50)),
-                    label : '-',
-                    borderColor : '#53389E',
-                    fill: false,
-                    // backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                }
-            ]
-		},
+		data : props.data as ChartData<any>,
 		options : {
-            responsive: false,
+            responsive: true,
             maintainAspectRatio: false,
             plugins: {
                 legend: {
@@ -99,24 +81,32 @@ onMounted(() => {
                     },
                 }
             }
-		}
+        }
     })
+})
+
+watch(props, (newVal, oldVal)=> {
+    if(line_chart.data !== props.data){
+        line_chart.data = props.data
 
-    const line_chart_container_el = document.getElementById('line_chart_container_' + props.id)
-    let WIDTH = 0
-    let HEIGHT =  0
+        if(props.gradient){
+            
+            for (let i = 0; i < line_chart.data.datasets.length; i++) {
+                if(line_chart.data.datasets[i].backgroundColor){
+                    let gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
+                    let rgb = hexToRGB(line_chart.data.datasets[i].backgroundColor)
+                    console.log(rgb)
+                    gradient.addColorStop(0, `rgba(${rgb?.r},${rgb?.g},${rgb?.b}, 0.28)`) 
+                    gradient.addColorStop(1, 'rgba(0, 0, 0,0)') 
 
-     // watches for size changes... 
-    const outputsize = () => {
-        if(line_chart_container_el){
-            WIDTH = line_chart_container_el.offsetWidth
-            HEIGHT = line_chart_container_el.offsetHeight
+                    line_chart.data.datasets[i].backgroundColor = gradient
+                }
+            }
         }
-        chart.value.resize(WIDTH -20 , HEIGHT)
-    }
-    if(line_chart_container_el){
-        new ResizeObserver(outputsize).observe(line_chart_container_el)   
+
+        line_chart.update()
     }
+    
 })
 </script>
 
diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index b23d2d3b4..fcd20d121 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -2,13 +2,12 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import Carousel from '@/components/Carousel.vue'
 import Slide from '@/components/Slide.vue'
-import LoadingRing from '@/components/LoadingRing.vue'
 
 import useWallet from '@/composables/wallet'
 
 const authFlowCardNumber = ref(1)
-const selectedAddress = ref(null as string | null)
 const selectedProivder = ref(null as null | string)
+const termsCheckbox = ref(true)
 
 const  {
   activeWallets,
@@ -19,7 +18,6 @@ const  {
 
 const show_setting_modal = ref(false)
 const openWalletConnect = ref(false)
-const openSelectAddressInput = ref(false)
 
 const handleOutsideClick = (event: any) => {
   const setting_modal = document.getElementById('setting_modal')
@@ -41,6 +39,7 @@ const handleOutsideClick = (event: any) => {
   if(connect_wallet_container && connect_wallet_card){
     if(openWalletConnect.value && connect_wallet_container.contains(event.target) && !connect_wallet_card.contains(event.target)) {
       openWalletConnect.value = false
+      authFlowCardNumber.value = 1
     }
   }
 }
@@ -57,11 +56,6 @@ const convertString = (inputString: string) => {
   return start + middle + end
 }
 
-const toggleOpenSelectAddressInput = () => {
-  openSelectAddressInput.value = !openSelectAddressInput.value
-}
-
-
 onMounted(() => {
   window.addEventListener('click', handleOutsideClick)
 })
@@ -77,17 +71,7 @@ onUnmounted(() =>{
   <div class="min-w-[360px]">
     <div>
       <div
-        class="
-      px-[60px]
-      pt-[17px]
-      pb-[19px]
-      flex
-      flex-wrap
-      gap-[20px]
-      justify-between
-      items-center
-      bg-black
-      relative"
+        class=" px-[60px] pt-[17px] pb-[19px] flex flex-wrap gap-[20px] justify-between items-center bg-black relative"
         :class="openWalletConnect? 'pr-[75px]' : ''"
       >
         <img
@@ -276,6 +260,14 @@ onUnmounted(() =>{
                 </h6>
               </div>
               <div v-else>
+                <div class="my-[20px] nav_items">
+                  <input
+                    v-model="termsCheckbox"
+                    type="checkbox"
+                    class=""
+                  > By connecting my address, I certify that I have read and accept the updated 
+                  <span class="text-primary"> Terms of Use </span> and <span class="text-primary">Privacy Notice</span>.
+                </div> 
                 <button
                   v-for="act in userAddresses"
                   :key="act.address"
diff --git a/apps/web/src/pages/overview/components/BreakdownChart.vue b/apps/web/src/pages/overview/components/BreakdownChart.vue
index da69d8cbf..145762fd5 100644
--- a/apps/web/src/pages/overview/components/BreakdownChart.vue
+++ b/apps/web/src/pages/overview/components/BreakdownChart.vue
@@ -1,12 +1,109 @@
 <script lang="ts" setup>
 import LineChartJS from '@/components/charts/LineChartJS.vue'
-import { onMounted } from 'vue'
+import { onMounted, ref, watch} from 'vue'
+
+const chardId = ref('cross_provider_chart')
+const selectedTimeframe = ref('1 month')
+
+const data = ref({} as any)
+
+const totalStaked = ref({
+  usd: '$150',
+  exchange: '0.00054 ETH'
+})
+
+const stakingRewards = ref({
+  usd: '$17.25',
+  exchange: '0.004 ETH'
+})
+
+const setMockData = () => {
+  let labels  = [] as string[]
+  let today = new Date()
+  let daysInCurrenMonth = new Date(today.getFullYear(), today.getMonth()+1, 0).getDate()
+  let monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  let monthDayIndex: number
+  switch (selectedTimeframe.value) {
+    
+    case '1 month':
+    monthDayIndex = 0
+      labels = Array.from({length: daysInCurrenMonth - (daysInCurrenMonth - today.getDate()) }, () => {
+        monthDayIndex++
+        return today.getMonth() + '/' + monthDayIndex
+      })
+      break
+    case '6 months':
+      monthDayIndex = 6
+      labels = Array.from({length: 6}, () => {
+        monthDayIndex--
+        let month = new Date(today.getFullYear(), today.getMonth() - monthDayIndex, 1)
+        return monthNames[month.getMonth()]
+      })
+      break
+    case '12 months':
+      monthDayIndex = 12
+      labels = Array.from({length: 12}, () => {
+        monthDayIndex--
+        let month = new Date(today.getFullYear(), today.getMonth() - monthDayIndex, 1)
+        return monthNames[month.getMonth()] + ' ' + month.getFullYear().toLocaleString()[3]+ month.getFullYear().toLocaleString()[4]
+      })
+      break
+    case 'historical':
+      // Right now historical is just set to be the last 12 months due to me not knowing how it will look
+      monthDayIndex = 12
+      labels = Array.from({length: 12}, () => {
+        monthDayIndex--
+        let month = new Date(today.getFullYear(), today.getMonth() - monthDayIndex, 1)
+        return monthNames[month.getMonth()] + ' ' + month.getFullYear().toLocaleString()[3]+ month.getFullYear().toLocaleString()[4]
+      })
+      break
+    
+    default:
+      break
+  }
+
+  data.value = {
+    labels : labels,
+    datasets : [
+        {
+            data : Array.from({length: labels.length}, () => Math.floor(Math.random() * (250 - 200 + 1) + 200)),
+            label : 'Primary Account',
+            borderColor : '#2F80ED',
+            fill: true,
+            backgroundColor: '#2F80ED',
+            pointRadius: 0,
+            tension: 0.1
+        },
+        {
+            data : Array.from({length: labels.length}, () => Math.floor(Math.random() * (150 - 100 + 1) + 100)),
+            label : 'Secondary Account',
+            borderColor : '#A8C8F3',
+            fill: false,
+            // backgroundColor: null,
+            pointRadius: 0,
+            tension: 0.1
+        },
+        {
+            data : Array.from({length: labels.length}, () => Math.floor(Math.random() * (50 - 0 + 1) + 50)),
+            label : '3rd Account',
+            borderColor : '#53389E',
+            fill: false,
+            // backgroundColor: null,
+            pointRadius: 0,
+            tension: 0.1
+        }
+    ]
+  }
+}
 
 onMounted(() => {
-    // Needed for new Icon Library
-    // eslint-disable-next-line no-undef
-    feather.replace()
+  setMockData()
 })
+
+watch(selectedTimeframe, () => {
+  setMockData()
+})
+
 </script>
 
 <template>
@@ -18,10 +115,10 @@ onMounted(() => {
         </h6>
         <div class="flex items-center gap-[12px]">
           <h5 class="blance_amount">
-            $150
+            {{ totalStaked.usd }}
           </h5>
           <span class="blance_exchange">
-            0.00054 ETH
+            {{ totalStaked.exchange }}
           </span>
         </div>
       </div>
@@ -31,10 +128,10 @@ onMounted(() => {
         </h6>
         <div class="flex items-center gap-[12px]">
           <h5 class="blance_amount">
-            $17.25
+            {{ stakingRewards.usd }}
           </h5>
           <span class="blance_exchange">
-            0.004 ETH
+            {{ stakingRewards.exchange }}
           </span>
         </div>
       </div>
@@ -45,25 +142,48 @@ onMounted(() => {
           Ethereum Balance
         </h6>
         <div class="flex items-center gap-[22px]">
-          <div class="flex gap-[10px] items-center">
-            <div class="w-[9px] h-[9px] bg-[#2F80ED] rounded-[999px]" />
+          <div
+            v-for="item in data.datasets"
+            :key="item"
+            class="flex gap-[10px] items-center"
+          >
+            <div
+              class="w-[9px] h-[9px] rounded-[999px]"
+              :style="`background: ${item.borderColor};`"
+            />
             <span class="legent_label">
-              Primary Account
+              {{ item.label }} 
             </span>
           </div>
         </div>
       </div>
       <div class="border border-[#D0D5DD] rounded-[8px] overflow-hidden">
-        <button class="timeframe_button rounded-l-[]">
+        <button
+          class="timeframe_button"
+          :class="selectedTimeframe === '1 month'? 'bg-[#F3F3F3]' : ''"
+          @click="selectedTimeframe = '1 month'"
+        >
           1 month
         </button>
-        <button class="timeframe_button border-x border-x-[#D0D5DD] bg-[#F3F3F3]">
+        <button
+          class="timeframe_button border-x border-x-[#D0D5DD]"
+          :class="selectedTimeframe === '6 months'? 'bg-[#F3F3F3]' : ''"
+          @click="selectedTimeframe = '6 months'"
+        >
           6 months
         </button>
-        <button class="timeframe_button border-r border-r-[#D0D5DD]">
+        <button
+          class="timeframe_button border-r border-r-[#D0D5DD]"
+          :class="selectedTimeframe === '12 months'? 'bg-[#F3F3F3]' : ''"
+          @click="selectedTimeframe = '12 months'"
+        >
           12 months
         </button>
-        <button class="timeframe_button">
+        <button
+          class="timeframe_button"
+          :class="selectedTimeframe === 'historical'? 'bg-[#F3F3F3]' : ''"
+          @click="selectedTimeframe = 'historical'"
+        >
           historical
         </button>
       </div>
@@ -78,10 +198,12 @@ onMounted(() => {
         class="w-full h-[240px]"
       >
         <LineChartJS
-          :id="'cross_provider_chart'"
+          :id="chardId"
           :legend="false"
           :x-grid-lines="false"
           :y-grid-lines="true"
+          :data="data"
+          :gradient="true"
         />
       </div>
     </div>

From 3bbc673122eb2e3c4ff73aebec8e60b3b2612358 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Mon, 12 Jun 2023 16:30:37 -0400
Subject: [PATCH 3/9] Update Staking component to include all needed vars and
 dynamic interface

---
 .../web/src/components/charts/LineChartJS.vue |   4 +-
 .../src/pages/overview/components/Staking.vue | 237 +++++++++++++++---
 2 files changed, 207 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/components/charts/LineChartJS.vue b/apps/web/src/components/charts/LineChartJS.vue
index ae2bf3f93..219442f20 100644
--- a/apps/web/src/components/charts/LineChartJS.vue
+++ b/apps/web/src/components/charts/LineChartJS.vue
@@ -85,7 +85,7 @@ onMounted(() => {
     })
 })
 
-watch(props, (newVal, oldVal)=> {
+watch(props, ()=> {
     if(line_chart.data !== props.data){
         line_chart.data = props.data
 
@@ -95,7 +95,7 @@ watch(props, (newVal, oldVal)=> {
                 if(line_chart.data.datasets[i].backgroundColor){
                     let gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
                     let rgb = hexToRGB(line_chart.data.datasets[i].backgroundColor)
-                    console.log(rgb)
+
                     gradient.addColorStop(0, `rgba(${rgb?.r},${rgb?.g},${rgb?.b}, 0.28)`) 
                     gradient.addColorStop(1, 'rgba(0, 0, 0,0)') 
 
diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue
index ed39e28cb..4047ef34e 100644
--- a/apps/web/src/pages/overview/components/Staking.vue
+++ b/apps/web/src/pages/overview/components/Staking.vue
@@ -1,60 +1,217 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
-// eslint-disable-next-line no-undef
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+
+const selectedWallet = ref(null as null | string)
+const formattedAmountToStake = ref(null as null | string )
+const account_balance = ref(null as null | string)
+
+const openSelectWalletInput = ref(false)
+
+const openTermsOfService = ref(false)
+
+const errorMessage = ref(null as null | string)
+
+const termsOfServiceCheckbox = ref(false)
+
+const handleInputOnAmountToStake = (event: any) => {
+  const value = event.target.value.replace(/[^\d.]/g, '')
+  const parts = value.split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+
+  // Limit to two decimal places
+  if (parts[1] && parts[1].length > 2) {
+    parts[1] = parts[1].slice(0, 2)
+  }
+
+  // Update the model value
+  formattedAmountToStake.value = parts.join('.')
+}
+
+const formattedWalletOptions = ref(
+  [
+    {
+      provider: 'MetaMask',
+      connectedAccounts: [
+      '0xd557a5745d4560B24D36A68b52351ffF9c86A212',
+      '0xd557a5745d4560B24D36A68b52351ffF9c86A212',
+      '0xd557a5745d4560B24D36A68b52351ffF9c86A212',
+      ]
+    }
+  ]
+)
+
+const convertString = (inputString: string) => {
+  if (inputString.length <= 4) {
+    return inputString
+  }
+
+  var start = inputString.substring(0, 4)
+  var end = inputString.substring(inputString.length - 4)
+  var middle = '*'.repeat(4)
+
+  return start + middle + end
+}
+
+const handleOutsideClick = (event: any) => {
+  const selectWalletInputContainer = document.getElementById('selectWalletInputContainer')
+  const selectWalletOptionsCard = document.getElementById('selectWalletOptionsCard')
+  const selectWalletInputButton = document.getElementById('selectWalletInputButton')
+  if(selectWalletInputContainer && selectWalletOptionsCard && selectWalletInputButton){
+    if(openSelectWalletInput.value) {
+      if(!selectWalletInputContainer.contains(event.target)){
+        if(!selectWalletInputButton.contains(event.target)){
+          openSelectWalletInput.value = false
+        }
+      }
+    }
+  }
+
+  const termsOfServiceContainer = document.getElementById('termsOfServiceContainer')
+  const termsOfServiceCard = document.getElementById('termsOfServiceCard')
+  const termsOfServiceButton = document.getElementById('termsOfServiceButton')
+
+  
+  if(termsOfServiceCard && termsOfServiceButton && termsOfServiceContainer){
+    if(openTermsOfService.value) {
+      if(!termsOfServiceCard.contains(event.target)){
+        if(!termsOfServiceButton.contains(event.target)){
+          openTermsOfService.value = false
+          console.log('reached', openTermsOfService.value)
+        }
+      }
+    }
+  }
+}
+
+watch(selectedWallet, () => {
+  selectedWallet.value? account_balance.value = '$1,234.56' : account_balance.value = '- - -'
+})
+
+watch(formattedAmountToStake, () => {
+  if(formattedAmountToStake.value){
+    const floatAmount = parseFloat(formattedAmountToStake.value?.replace(/,/g, ''))
+    // TD: Get max value here from selected wallet
+
+    const maxAmount = 2000.25
+    if(floatAmount > maxAmount){
+      errorMessage.value = 'Insufficient Funds'
+    } else {
+      errorMessage.value = null
+    }
+  }
+  
+})
+
 onMounted(() => {
-    // Needed for new Icon Library
+  window.addEventListener('click', handleOutsideClick)
+})
 
-    // eslint-disable-next-line no-undef
-    feather.replace()
+onUnmounted(() =>{
+  window.removeEventListener('click', handleOutsideClick)
 })
+
+
 </script>
 
 <template>
-  <div class="card_container px-[21px] pt-[15px] pb-[19px] text-black h-full">
-    <h6 class="account_blance mb-[12px]">
+  <div class="card_container px-[21px] pt-[15px] pb-[19px] text-black h-full relative">
+    <h6 class="account_balance mb-[12px]">
       Account Balance
     </h6>
     <h5 class="account_balance_amount mb-[27px]">
-      $2,740
+      {{ account_balance? account_balance : '- - -' }}
     </h5>
+
     <h6 class="card_title mb-[11px]">
       Wallet
     </h6>
-
-    <div class="card_input text-black mb-[22px]">
-      <div class="flex items-center gap-[8px]">
+    <div class="card_input text-black mb-[22px] relative">
+      <button
+        id="selectWalletInputButton"
+        class="flex items-center justify-between gap-[8px] w-full h-full px-[10px] py-[14px]"
+        :class="selectedWallet? 'text-black' : 'text-grey_4'"
+        @click="openSelectWalletInput = !openSelectWalletInput"
+      >
         <h6>
-          0x834...7C4621976578
+          {{ selectedWallet? convertString(selectedWallet) : 'Select wallet' }}
         </h6>
+
+        <i
+          :data-feather="openSelectWalletInput? 'chevron-up' : 'chevron-down'" 
+          class="w-[20px]"
+        />
+      </button>
+      <div
+        v-show="openSelectWalletInput"
+        id="selectWalletInputContainer"
+        class="absolute top-[110%] w-full bg-white rounded-[8px] border border-[#D0D5DD] px-[10px] py-[14px] max-h-[250px] overflow-auto"
+      >
+        <div
+          v-for="item in formattedWalletOptions"
+          id="selectWalletOptionsCard"
+          :key="item.provider"
+        >
+          <div class="w-full text-[12px] text-grey_6 flex items-center gap-[8px] mb-[10px]">
+            <img
+              :src="`${item.provider.toLocaleLowerCase()}.svg`"
+              :alt="`${item.provider.toLocaleLowerCase()} Icon`"
+              class="w-[16px] h-[16px]"
+            >
+            {{ item.provider }}
+          </div>
+          
+
+          <button
+            v-for="wallet in item.connectedAccounts"
+            :key="wallet"
+            class="w-full text-left rounded-[8px] py-[10px] px-[14px] 
+            hover:bg-grey_1 flex justify-between items-center text-grey_4 hover:text-grey_6"
+            @click="selectedWallet = wallet, openSelectWalletInput = false"
+          >
+            {{ convertString(wallet) }}
+            <i
+              data-feather="chevron-right" 
+              class="w-[20px]"
+            />
+          </button>
+        </div>
       </div>
-      
-      <i
-        data-feather="chevron-down" 
-        class="w-[20px]"
-      />
     </div>
 
-    <h6 class="card_title mb-[11px] mt-[22px]">
-      Amount
-    </h6>
+    <div class="flex justify-between items-center gap-[8px] mb-[11px] mt-[22px]">
+      <h6 class="card_title">
+        Amount
+      </h6>
+
+      <span class="text-[12px] font-[600] leading-[20px] text-h text-red-500">
+        {{ errorMessage }}
+      </span>
+    </div>
+    
 
-    <div class="card_input text-black">
+    <div class="card_input text-black px-[10px] py-[14px]">
       <div class="flex items-center gap-[8px]">
         <h6 class="text-[#667085]">
           $
         </h6>
-        <h6>
-          1,000.00
-        </h6>
+        <input
+          id="amount"
+          v-model="formattedAmountToStake"
+          type="text"
+          pattern="^\d{1,3}(,\d{3})*(\.\d+)?$"
+          placeholder="0.00"
+          class=" outline-none"
+          @input="handleInputOnAmountToStake"
+        >
       </div>
       <div class="flex items-center gap-[4px]">
         <h6 style="font-weight: 400;">
           USD
         </h6>
-        <i
+        <!-- <i
           data-feather="chevron-down" 
           class="w-[20px]"
-        />
+        /> -->
       </div>
     </div>
 
@@ -95,20 +252,38 @@ onMounted(() => {
 
     <div class="flex items-center gap-[18px] mb-[27px]">
       <input
+        v-model="termsOfServiceCheckbox"
         type="checkbox"
         class="card_checkbox"
       > 
-      <p class="card_checkbox_text">
+      <button
+        id="termsOfServiceButton"
+        class="card_checkbox_text"
+        @click="openTermsOfService = !openTermsOfService"
+      >
         I agree to the terms of service
-      </p>
+      </button>
     </div>
 
     <button
       class="card_button h-[37px] w-full "
-      disabled
+      :disabled="!(termsOfServiceCheckbox && selectedWallet && formattedAmountToStake && !errorMessage)"
     >
       Stake
     </button>
+
+    <div
+      v-show="openTermsOfService"
+      id="termsOfServiceContainer"
+      class="bg-black/[0.28] w-full h-full absolute top-0 left-0 flex items-center justify-center rounded-[3px] "
+    >
+      <div
+        id="termsOfServiceCard"
+        class="bg-white rounded-[8px] px-[14px] py-[10px] max-h-[400px] w-[80%] overflow-auto shadow-sm card_title"
+      >
+        Terms of Service
+      </div>
+    </div>
   </div>
 </template>
 
@@ -121,7 +296,7 @@ onMounted(() => {
   letter-spacing: -0.01em;
   color: #344054;
 }
-.account_blance{
+.account_balance{
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
@@ -158,8 +333,6 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 14px 10px;
-
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 500;

From 119cda177a2b4a88080acd4f24d7e858cdfbb922 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Tue, 13 Jun 2023 11:34:12 -0400
Subject: [PATCH 4/9] Update Avg Staking Reward component to include all needed
 vars and dynamic interface

---
 .../src/pages/overview/components/Staking.vue |  1 -
 .../pages/overview/components/StakingAvg.vue  | 54 ++++++++++++++-----
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue
index 4047ef34e..31a24e17f 100644
--- a/apps/web/src/pages/overview/components/Staking.vue
+++ b/apps/web/src/pages/overview/components/Staking.vue
@@ -76,7 +76,6 @@ const handleOutsideClick = (event: any) => {
       if(!termsOfServiceCard.contains(event.target)){
         if(!termsOfServiceButton.contains(event.target)){
           openTermsOfService.value = false
-          console.log('reached', openTermsOfService.value)
         }
       }
     }
diff --git a/apps/web/src/pages/overview/components/StakingAvg.vue b/apps/web/src/pages/overview/components/StakingAvg.vue
index fb945c2bf..b0662662f 100644
--- a/apps/web/src/pages/overview/components/StakingAvg.vue
+++ b/apps/web/src/pages/overview/components/StakingAvg.vue
@@ -1,11 +1,19 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
+import { ref } from 'vue'
 
-onMounted(() => {
-    // Needed for new Icon Library
-    // eslint-disable-next-line no-undef
-    feather.replace()
-})
+const avgAPY = ref('5.2%')
+const openTimeFrameOptions = ref(false)
+const selectedTimeframe = ref('Last Week')
+
+const timeframeOptions = ref(
+  [
+    'Last Week',
+    '1 Month',
+    '6 Months',
+    '12 Months',
+    'Historical'
+  ]
+)
 </script>
 
 <template>
@@ -14,19 +22,39 @@ onMounted(() => {
       <h6 class="card_title">
         Avg. Staking Reward
       </h6>
-      <div class="flex justify-between items-center gap-[8px] px-[10px] py-[8px] card_input">
-        Last Week 
+      <div
+        class="whitespace-nowrap relative w-[120px]"
+      >
+        <button
+          class="flex justify-between items-center gap-[8px] px-[10px] py-[8px] card_input w-[120px] outline-none"
+          @click="openTimeFrameOptions = !openTimeFrameOptions"
+        >
+          {{ selectedTimeframe }}
 
-        <i
-          data-feather="chevron-down" 
-          class="w-[20px] h-min text-[#667085]"
-        />
+          <i
+            data-feather="chevron-down" 
+            class="w-[20px] h-min text-[#667085]"
+          />
+        </button>
+        <div
+          v-show="openTimeFrameOptions"
+          class="absolute w-full top-[110%] left-0 rounded-[8px] px-[10px] py-[14px] bg-white border h-max flex flex-wrap"
+        >
+          <button
+            v-for="item in timeframeOptions"
+            :key="item"
+            class="w-full border text-center rounded-[8px] py-[4px] text-[14px] my-[5px] hover:bg-grey_1"
+            @click="selectedTimeframe = item, openTimeFrameOptions = false"
+          >
+            {{ item }}
+          </button>
+        </div>
       </div>
     </div>
 
     <div class="card_metric flex items-end gap-[9px]">
       <h6>
-        5.2%
+        {{ avgAPY }}
       </h6>
       <span class="mb-[3px]">
         APY

From 29776a907771d44dcc0538fad869ee6951a3071a Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Sun, 18 Jun 2023 13:34:15 -0400
Subject: [PATCH 5/9] Update modal view for components

---
 apps/web/package.json                         |   3 +-
 apps/web/src/App.vue                          |   8 +-
 .../web/src/components/charts/LineChartJS.vue |  27 +++-
 apps/web/src/pages/overview/Overview.vue      |  22 +--
 .../overview/components/Announcements.vue     |  54 ++++++-
 .../overview/components/BreakdownTable.vue    | 134 +++++++++++++++++-
 .../pages/overview/components/StakingAvg.vue  |  38 ++++-
 package-lock.json                             |  89 +++++++++++-
 package.json                                  |   3 +-
 9 files changed, 349 insertions(+), 29 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index f989d7b19..f6f7768be 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -20,7 +20,8 @@
     "util": "^0.12.5",
     "vue": "^3.2.25",
     "vue-router": "^4.0.15",
-    "web3": "^1.8.1"
+    "web3": "^1.8.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index cd028a970..8bd553d83 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -2,17 +2,17 @@
   import useUsers from '@/composables/users'
   import { RouterView } from 'vue-router'
   import DefaultLayout from '@/layouts/default-layout.vue'
-  // import { onMounted } from 'vue'
+  import { onMounted } from 'vue'
 
   // Need this to fix initilizing bug between user.ts and ssv.ts
   const { user } = useUsers()
 
-  // onMounted(() => {
+  onMounted(() => {
     // Needed for new Icon Library
 
     // eslint-disable-next-line no-undef
-    // feather.replace()
-  // })
+    feather.replace()
+  })
 </script>
   
 <template>
diff --git a/apps/web/src/components/charts/LineChartJS.vue b/apps/web/src/components/charts/LineChartJS.vue
index 219442f20..235e6b9c4 100644
--- a/apps/web/src/components/charts/LineChartJS.vue
+++ b/apps/web/src/components/charts/LineChartJS.vue
@@ -27,6 +27,10 @@ const props = defineProps({
     gradient: {
         type: Boolean,
         default: false
+    },
+    height: {
+        type: Number,
+        default: 400
     }
 })
 
@@ -39,6 +43,10 @@ const hexToRGB = (hex: string) => {
         b: parseInt(result[3], 16)
     } : {r: 0, g: 0, b: 0}
 }
+
+const WIDTH = ref(0)
+// const HEIGHT = ref(0)
+
 let ctx: any
 let line_chart: Chart<any, any[], unknown>
 onMounted(() => {
@@ -83,6 +91,23 @@ onMounted(() => {
             }
         }
     })
+
+    const line_chart_container_el = document.getElementById('line_chart_container_' + props.id)
+    let WIDTH = 0
+    let HEIGHT =  0
+
+     // watches for size changes... 
+    const outputsize = () => {
+        if(line_chart_container_el){
+            WIDTH = line_chart_container_el.offsetWidth
+            HEIGHT.value = line_chart_container_el.offsetHeight
+        }
+        // console.log(WIDTH, HEIGHT)
+        line_chart.resize(WIDTH , HEIGHT)
+    }
+    if(line_chart_container_el){
+        new ResizeObserver(outputsize).observe(line_chart_container_el)   
+    }
 })
 
 watch(props, ()=> {
@@ -112,7 +137,7 @@ watch(props, ()=> {
 
 <template>
   <div 
-    class="h-full w-full"
+    class="w-full h-full"
   >
     <canvas
       :id="props.id"
diff --git a/apps/web/src/pages/overview/Overview.vue b/apps/web/src/pages/overview/Overview.vue
index a3830b023..d2193d4b6 100644
--- a/apps/web/src/pages/overview/Overview.vue
+++ b/apps/web/src/pages/overview/Overview.vue
@@ -13,22 +13,21 @@ import BreakdownTable from './components/BreakdownTable.vue'
       Breakdown
     </h6>
 
-    <div class="flex justify-between 1000s:flex-wrap items-start gap-[63px] mb-[47px]">
-      <div class="w-full h-[541px] 800s:h-max">
+    <div class="flex justify-between 1000s:flex-wrap items-start gap-[63px] mb-[47px] w-full">
+      <div class=" h-[541px] 800s:h-max dynamic_width">
         <BreakdownChart />
       </div>
-
       <div class="w-full max-w-[300px] 1000s:max-w-none 1000s:flex 700s:flex-wrap justify-between gap-[63px] items-start">
         <div class="w-full">
-          <Staking />
+          <Staking view-id="full_view" />
         </div>
         <div class="w-[0px] 1000s:w-full">
           <div class="sr-only 1000s:not-sr-only">
             <div class="w-full mb-[37px]">
-              <StakingAvg /> 
+              <StakingAvg view-id="small_view" /> 
             </div>
             <div class="w-full h-[261px]">
-              <Announcements />
+              <Announcements view-id="small_view" />
             </div>
           </div>
         </div>
@@ -42,10 +41,10 @@ import BreakdownTable from './components/BreakdownTable.vue'
       <div class="1000s:sr-only not-sr-only">
         <div class="w-[300px]">
           <div class="w-full mb-[37px]">
-            <StakingAvg /> 
+            <StakingAvg view-id="full_view" /> 
           </div>
           <div class="w-full h-[261px]">
-            <Announcements />
+            <Announcements view-id="full_view" />
           </div>
         </div>
       </div>
@@ -63,4 +62,11 @@ import BreakdownTable from './components/BreakdownTable.vue'
     letter-spacing: -0.03em;
     color: #FFFFFF;
 }
+
+.dynamic_width{
+  width: calc(100% - 363px);
+  @media (max-width: 1000px) {
+      width: 100%
+  } ;
+}
 </style>
\ No newline at end of file
diff --git a/apps/web/src/pages/overview/components/Announcements.vue b/apps/web/src/pages/overview/components/Announcements.vue
index f85a81e9b..15a40bab0 100644
--- a/apps/web/src/pages/overview/components/Announcements.vue
+++ b/apps/web/src/pages/overview/components/Announcements.vue
@@ -1,10 +1,33 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const message = ref('We\'ve just announced our series A!')
+const openReadUpdate = ref(false)
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  viewId: {
+      type: String,
+      required: true,
+  }
+})
+
+const handleOutsideClick = (event: any) => {
+  const announcement_container = document.getElementById(`${props.viewId}_announcement_container`)
+  const announcement_card = document.getElementById(`${props.viewId}_announcement_card`)
+  if(announcement_container && announcement_card){
+    if(openReadUpdate.value && announcement_container.contains(event.target) && !announcement_card.contains(event.target)) {
+      openReadUpdate.value = false
+    }
+  }
+}
 
 onMounted(() => {
-    // Needed for new Icon Library
-    // eslint-disable-next-line no-undef
-    feather.replace()
+  window.addEventListener('click', handleOutsideClick)
+})
+
+onUnmounted(() =>{
+  window.removeEventListener('click', handleOutsideClick)
 })
 </script>
 
@@ -24,7 +47,7 @@ onMounted(() => {
     </div>
     <div class="mb-[14px]">
       <p class="card_announcement">
-        We've just announced our series A!
+        {{ message }}
       </p>
     </div>
     <div class="mb-[19px]">
@@ -32,9 +55,28 @@ onMounted(() => {
         Read about it and changes.
       </span>
     </div>
-    <button class="card_announcement_button">
+    <button
+      :id="`${props.viewId}_announcement_button`"
+      class="card_announcement_button"
+      @click="openReadUpdate = true"
+    >
       Read update
     </button>
+    <div
+      v-if="openReadUpdate"
+      :id="`${props.viewId}_announcement_container`"
+      class="w-full h-full bg-black/[0.15] absolute top-0 left-0 flex items-center justify-center"
+    >
+      <div
+        :id="`${props.viewId}_announcement_card`"
+        class="bg-white px-[14px] py-[10px] rounded-[8px] text-[12px] max-w-[80%] max-h-[80%] overflow-auto shadow-lg"
+      >
+        Update Here
+        <button @click="openReadUpdate = false">
+          X
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index 25342cfc7..d530115ff 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import LineChartJS from '@/components/charts/LineChartJS.vue'
 import { ref } from 'vue'
+import * as XLSX from 'xlsx'
+
+const searchInput = ref('')
 
 const tableView = ref('Wallets')
 
@@ -83,6 +86,49 @@ const tableMockedItems = ref({
     operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
   },
 })
+
+const filteredData = () => {
+  if (searchInput.value === '') {
+    console.log('table', tableMockedItems.value[tableView.value])
+    return tableMockedItems.value[tableView.value]
+  } else {
+    const searchTerm = searchInput.value.toLowerCase()
+    return tableMockedItems.value[tableView.value].filter(item => {
+      return (
+        //     // Might need to modify to match types each variable
+        item.wallet_provider.toLowerCase().includes(searchTerm) ||
+        item.act.toLowerCase().includes(searchTerm) ||
+        item.bal.toLowerCase().includes(searchTerm) ||
+        item.stk_amt.toLowerCase().includes(searchTerm) ||
+        item.stk_rwd.toLowerCase().includes(searchTerm) ||
+        item.tx_hash.toLowerCase().includes(searchTerm) ||
+        item.date.toLowerCase().includes(searchTerm) ||
+        item.apy.toLowerCase().includes(searchTerm) ||
+        item.status.toLowerCase().includes(searchTerm) ||
+        item.operators.toLowerCase().includes(searchTerm) 
+      )
+    })
+    // return tableMockedItems.value[tableView.value].filter(item => {
+    //   if(
+    //     // Might need to modify to match types each variable
+    //     item.wallet_provider.toLowerCase().includes(searchTerm) ||
+    //     item.act.toLowerCase().includes(searchTerm) ||
+    //     item.bal.toLowerCase().includes(searchTerm) ||
+    //     item.stk_amt.toLowerCase().includes(searchTerm) ||
+    //     item.stk_rwd.toLowerCase().includes(searchTerm) ||
+    //     item.tx_hash.toLowerCase().includes(searchTerm) ||
+    //     item.date.toLowerCase().includes(searchTerm) ||
+    //     item.apy.toLowerCase().includes(searchTerm) ||
+    //     item.status.toLowerCase().includes(searchTerm) ||
+    //     item.operators.toLowerCase().includes(searchTerm) 
+    //   ){
+    //     return true
+    //   }
+    // })
+  }
+}
+
+
 const convertString = (inputString: string) => {
   if (inputString.length <= 4) {
     return inputString
@@ -94,6 +140,78 @@ const convertString = (inputString: string) => {
 
   return start + middle + end
 }
+
+const convertJsonToCsv = (jsonData) => {
+  const separator = ','
+  const csvRows = []
+
+  if (!Array.isArray(jsonData)) {
+    console.error('jsonData is not an array')
+    return ''
+  }
+
+  if (jsonData.length === 0) {
+    console.warn('jsonData is an empty array')
+    return ''
+  }
+
+  const keys = Object.keys(jsonData[0])
+
+  // Add headers
+  csvRows.push(keys.join(separator))
+
+  // Convert JSON data to CSV rows
+  jsonData.forEach(obj => {
+    const values = keys.map(key => obj[key])
+    csvRows.push(values.join(separator))
+  })
+
+  return csvRows.join('\n')
+}
+
+const convertJsonToExcelBuffer = (jsonData) => {
+  const worksheet = XLSX.utils.json_to_sheet(jsonData)
+  const workbook = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+  const excelBuffer = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' })
+
+  return excelBuffer
+}
+
+const downloadFile = (content: any, filename: string, mimeType: any) => {
+  const blob = new Blob([content], { type: mimeType })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  link.click()
+
+  // Cleanup
+  URL.revokeObjectURL(url)
+}
+
+const exportFile = () => {
+
+  const jsonData = 
+    [{
+      wallet_provider: 'MetaMask',
+      act: '12345678910asdfghjkl;qwertyuiopzxcvbnm',
+      bal: '1.5 ETH',
+      stk_amt: '0.5 ETH',
+      stk_rwd: '0.034 ETH'
+    }]
+
+  const isMac = navigator.userAgent.indexOf('Mac') !== -1
+  const fileExtension = isMac ? 'csv' : 'xlsx'
+
+  if (fileExtension === 'csv') {
+    const csvContent = convertJsonToCsv(jsonData)
+    downloadFile(csvContent, `${tableView.value}.csv`, 'text/csv')
+  } else {
+    const excelBuffer = convertJsonToExcelBuffer(jsonData)
+    downloadFile(excelBuffer, `${tableView.value}.xlsx`, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
+  }
+}
 </script>
 
 <template>
@@ -111,7 +229,10 @@ const convertString = (inputString: string) => {
           </div>
         </div>
         <div class="flex items-start gap-[12px]">
-          <button class="flex items-center gap-[8px] export_button">
+          <button
+            class="flex items-center gap-[8px] export_button"
+            @click="exportFile()"
+          >
             <i
               data-feather="upload-cloud" 
               class="w-[17px] h-min"
@@ -145,6 +266,7 @@ const convertString = (inputString: string) => {
               class="w-[20px] h-min text-[#667085]"
             />
             <input
+              v-model="searchInput"
               type="text"
               class="w-full outline-none"
               placeholder="Search"
@@ -216,11 +338,15 @@ const convertString = (inputString: string) => {
           class="w-full"
         >
           <tr
-            v-for="item in 7"
+            v-for="item in filteredData()"
             :key="item"
             class="w-full text-grey_5 text-body border-b border-grey_2 h-[72px]"
           >
-            <td
+            <td>
+              {{ item }}
+            </td>
+            
+            <!-- <td
               v-for="header in tableHeaderOptions[tableView].headers"
               :key="header"
               class="dynamic_padding"
@@ -299,7 +425,7 @@ const convertString = (inputString: string) => {
               <div v-else>
                 {{ tableMockedItems[tableView][header.value] }}
               </div>
-            </td>
+            </td> -->
           </tr>
         </tbody>
       </table>
diff --git a/apps/web/src/pages/overview/components/StakingAvg.vue b/apps/web/src/pages/overview/components/StakingAvg.vue
index b0662662f..b895927b0 100644
--- a/apps/web/src/pages/overview/components/StakingAvg.vue
+++ b/apps/web/src/pages/overview/components/StakingAvg.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 const avgAPY = ref('5.2%')
 const openTimeFrameOptions = ref(false)
@@ -14,6 +14,38 @@ const timeframeOptions = ref(
     'Historical'
   ]
 )
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  viewId: {
+      type: String,
+      required: true,
+  }
+})
+
+const handleOutsideClick = (event: any) => {
+  const staking_avg_timeframe_button = document.getElementById(`${props.viewId}_staking_avg_timeframe_button`)
+  const staking_avg_timeframe_options = document.getElementById(`${props.viewId}_staking_avg_timeframe_options`)
+
+  if(staking_avg_timeframe_options && staking_avg_timeframe_button){
+    if(openTimeFrameOptions.value) {
+      if(!staking_avg_timeframe_options.contains(event.target)){
+        if(!staking_avg_timeframe_button.contains(event.target)){
+          openTimeFrameOptions.value = false
+        }
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleOutsideClick)
+})
+
+onUnmounted(() =>{
+  window.removeEventListener('click', handleOutsideClick)
+})
+
 </script>
 
 <template>
@@ -26,6 +58,7 @@ const timeframeOptions = ref(
         class="whitespace-nowrap relative w-[120px]"
       >
         <button
+          :id="`${props.viewId}_staking_avg_timeframe_button`"
           class="flex justify-between items-center gap-[8px] px-[10px] py-[8px] card_input w-[120px] outline-none"
           @click="openTimeFrameOptions = !openTimeFrameOptions"
         >
@@ -38,7 +71,8 @@ const timeframeOptions = ref(
         </button>
         <div
           v-show="openTimeFrameOptions"
-          class="absolute w-full top-[110%] left-0 rounded-[8px] px-[10px] py-[14px] bg-white border h-max flex flex-wrap"
+          :id="`${props.viewId}_staking_avg_timeframe_options`"
+          class="absolute z-[20] w-full top-[110%] left-0 rounded-[8px] px-[10px] py-[14px] bg-white border h-max flex flex-wrap"
         >
           <button
             v-for="item in timeframeOptions"
diff --git a/package-lock.json b/package-lock.json
index 564d891be..ceaa9598c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
       ],
       "dependencies": {
         "chart.js": "^4.2.1",
-        "feather-icons": "^4.29.0"
+        "feather-icons": "^4.29.0",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@aws-sdk/client-secrets-manager": "^3.204.0",
@@ -74,7 +75,8 @@
         "util": "^0.12.5",
         "vue": "^3.2.25",
         "vue-router": "^4.0.15",
-        "web3": "^1.8.1"
+        "web3": "^1.8.1",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
@@ -6803,6 +6805,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/adm-zip": {
       "version": "0.4.16",
       "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz",
@@ -8630,6 +8640,18 @@
         "node": ">=12.19"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chai": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
@@ -9018,6 +9040,14 @@
         "type-is": "^1.6.16"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -13231,6 +13261,14 @@
       "integrity": "sha512-H5KQDspykdHuztLTg+ajGN0Z2qUjcEf3Ybxc6hLt0k7/zPkn29XnKnxlBPyW2XIddWrGaJBzBl4VLYOtk39yZg==",
       "dev": true
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -22256,6 +22294,17 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -25575,6 +25624,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -25776,6 +25841,26 @@
         "cookiejar": "^2.1.1"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xmlbuilder": {
       "version": "13.0.2",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",
diff --git a/package.json b/package.json
index 232d15a6e..03effdcf9 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
   },
   "dependencies": {
     "chart.js": "^4.2.1",
-    "feather-icons": "^4.29.0"
+    "feather-icons": "^4.29.0",
+    "xlsx": "^0.18.5"
   }
 }

From da23a4e081b6afd933437f40fb4775272cd525bb Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Sun, 18 Jun 2023 22:47:14 -0400
Subject: [PATCH 6/9] Add search method for table

---
 .../overview/components/BreakdownTable.vue    | 127 ++++++++----------
 1 file changed, 58 insertions(+), 69 deletions(-)

diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index d530115ff..e64095924 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import LineChartJS from '@/components/charts/LineChartJS.vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import * as XLSX from 'xlsx'
 
 const searchInput = ref('')
-
 const tableView = ref('Wallets')
 
 const tableHeaderOptions = ref(
@@ -69,65 +68,58 @@ const tableHeaderOptions = ref(
 )
 
 const tableMockedItems = ref({
-  Wallets: {
-    wallet_provider: 'MetaMask',
-    act: '12345678910asdfghjkl;qwertyuiopzxcvbnm',
-    bal: '1.5 ETH',
-    stk_amt: '0.5 ETH',
-    stk_rwd: '0.034 ETH'
-  },
-  Transactions: {
-    tx_hash: '1234567890qwertyuiopasdfghjklzxcvbnm',
-    stk_amt: '1.5 ETH',
-    stk_rwd: '0.045 ETH',
-    date: '01/01/2023',
-    apy: '2.1 %',
-    status: 'pending',
-    operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
-  },
+  Wallets: [
+    {
+      wallet_provider: 'MetaMask',
+      act: '12345678910asdfghjkl;qwertyuiopzxcvbnm',
+      bal: '1.5 ETH',
+      stk_amt: '0.5 ETH',
+      stk_rwd: '0.034 ETH'
+    }
+  ],
+  Transactions: [
+    {
+      tx_hash: '1234567890qwertyuiopasdfghjklzxcvbnm',
+      stk_amt: '1.5 ETH',
+      stk_rwd: '0.045 ETH',
+      date: '01/01/2023',
+      apy: '2.1 %',
+      status: 'pending',
+      operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
+    }
+  ],
 })
 
-const filteredData = () => {
+const filteredData = ref(tableMockedItems.value[tableView.value])
+
+const filterData = () => {
   if (searchInput.value === '') {
-    console.log('table', tableMockedItems.value[tableView.value])
-    return tableMockedItems.value[tableView.value]
+    filteredData.value = tableMockedItems.value[tableView.value]
   } else {
-    const searchTerm = searchInput.value.toLowerCase()
-    return tableMockedItems.value[tableView.value].filter(item => {
+    const searchTerm = searchInput.value
+    const filteredDataArray =  tableMockedItems.value[tableView.value].filter(item => {
       return (
-        //     // Might need to modify to match types each variable
-        item.wallet_provider.toLowerCase().includes(searchTerm) ||
-        item.act.toLowerCase().includes(searchTerm) ||
-        item.bal.toLowerCase().includes(searchTerm) ||
-        item.stk_amt.toLowerCase().includes(searchTerm) ||
-        item.stk_rwd.toLowerCase().includes(searchTerm) ||
-        item.tx_hash.toLowerCase().includes(searchTerm) ||
-        item.date.toLowerCase().includes(searchTerm) ||
-        item.apy.toLowerCase().includes(searchTerm) ||
-        item.status.toLowerCase().includes(searchTerm) ||
-        item.operators.toLowerCase().includes(searchTerm) 
+        // Might need to modify to match types each variable
+        item.wallet_provider?.toLowerCase().includes(searchTerm) ||
+        item.act?.toLowerCase().includes(searchTerm) ||
+        item.bal?.toLowerCase().includes(searchTerm) ||
+        item.stk_amt?.toLowerCase().includes(searchTerm) ||
+        item.stk_rwd?.toLowerCase().includes(searchTerm) ||
+        item.tx_hash?.toLowerCase().includes(searchTerm) ||
+        item.date?.toLowerCase().includes(searchTerm) ||
+        item.apy?.toLowerCase().includes(searchTerm) ||
+        item.status?.toLowerCase().includes(searchTerm) // ||
+        // item.operators?.toLowerCase().includes(searchTerm) 
       )
     })
-    // return tableMockedItems.value[tableView.value].filter(item => {
-    //   if(
-    //     // Might need to modify to match types each variable
-    //     item.wallet_provider.toLowerCase().includes(searchTerm) ||
-    //     item.act.toLowerCase().includes(searchTerm) ||
-    //     item.bal.toLowerCase().includes(searchTerm) ||
-    //     item.stk_amt.toLowerCase().includes(searchTerm) ||
-    //     item.stk_rwd.toLowerCase().includes(searchTerm) ||
-    //     item.tx_hash.toLowerCase().includes(searchTerm) ||
-    //     item.date.toLowerCase().includes(searchTerm) ||
-    //     item.apy.toLowerCase().includes(searchTerm) ||
-    //     item.status.toLowerCase().includes(searchTerm) ||
-    //     item.operators.toLowerCase().includes(searchTerm) 
-    //   ){
-    //     return true
-    //   }
-    // })
+    filteredData.value = filteredDataArray
   }
 }
 
+watch([searchInput, tableView], ()=>{
+  filterData()
+})
+
 
 const convertString = (inputString: string) => {
   if (inputString.length <= 4) {
@@ -258,7 +250,7 @@ const exportFile = () => {
             Transactions
           </button>
         </div>
-
+        {{ searchInput }}
         <div class="flex flex-wrap items-center gap-[12px]">
           <div class="flex items-center gap-[8px] search_bar">
             <i
@@ -338,15 +330,11 @@ const exportFile = () => {
           class="w-full"
         >
           <tr
-            v-for="item in filteredData()"
+            v-for="item in filteredData"
             :key="item"
             class="w-full text-grey_5 text-body border-b border-grey_2 h-[72px]"
           >
-            <td>
-              {{ item }}
-            </td>
-            
-            <!-- <td
+            <td
               v-for="header in tableHeaderOptions[tableView].headers"
               :key="header"
               class="dynamic_padding"
@@ -362,12 +350,12 @@ const exportFile = () => {
                   />
                 </button>
                 <img
-                  :src="`/${tableMockedItems[tableView][header.value]}.svg`"
+                  :src="`/${item[header.value]}.svg`"
                   alt="Avatar "
                   class="w-[20px] h-[20px]"
                 >
                 <h6 class="title_name 800s:w-[20px] truncate">
-                  {{ tableMockedItems[tableView][header.value] }}
+                  {{ item[header.value] }}
                 </h6>
               </div>
               <div
@@ -375,7 +363,7 @@ const exportFile = () => {
                 class="flex items-center gap-[12px] underline"
               >
                 <a href=""> 
-                  {{ convertString(tableMockedItems[tableView][header.value]) }}
+                  {{ convertString(item[header.value]) }}
                 </a>
               </div>
               <div
@@ -389,7 +377,7 @@ const exportFile = () => {
                   />
                 </button>
                 <a class="w-[55px] truncate underline">
-                  {{ convertString(tableMockedItems[tableView][header.value]) }}
+                  {{ convertString(item[header.value]) }}
                 </a>
               </div>
               <div
@@ -397,14 +385,14 @@ const exportFile = () => {
                 class="flex items-center gap-[12px]"
               >
                 <div
-                  v-if="tableMockedItems[tableView][header.value] === 'staked'"
+                  v-if="item[header.value] === 'staked'"
                   class="flex items-center gap-[8px] status_pill bg-[#ECFDF3] text-[#027A48]"
                 >
                   <div class="bg-[#027A48] rounded-[999px] w-[8px] h-[8px]" />
                   Staked
                 </div>
                 <div
-                  v-else-if="tableMockedItems[tableView][header.value] === 'pending'" 
+                  v-else-if="item[header.value] === 'pending'" 
                   class="flex items-center gap-[8px] status_pill bg-[#FFFAEB] text-[#B54708]"
                 >
                   <div class="bg-[#F79009] rounded-[999px] w-[8px] h-[8px]" />
@@ -416,21 +404,22 @@ const exportFile = () => {
                 class="flex items-center gap-[12px] pl-[20px]"
               >
                 <div
-                  v-for="operator in tableMockedItems[tableView][header.value]"
+                  v-for="operator in item[header.value]"
                   :key="operator"
                   :class="`w-[24px] h-[24px] border-[2px] border-white bg-blue-300 rounded-[999px]`"
                   :style="`margin-left: -20px`"
                 />
               </div>
               <div v-else>
-                {{ tableMockedItems[tableView][header.value] }}
+                {{ item[header.value] }}
               </div>
-            </td> -->
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
-    <div class="flex justify-between items-center mt-[12px]">
+    <!-- Waiting on a bigger data set to do this.. for now will comment out -->
+    <!-- <div class="flex justify-between items-center mt-[12px]">
       <div class="page_number ml-[56px]">
         Page 1 of 10
       </div>
@@ -442,7 +431,7 @@ const exportFile = () => {
           Next
         </button>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 

From 3af3823fd99bbcff324e4c7d54a6f0db18f12cd1 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Mon, 19 Jun 2023 10:51:43 -0400
Subject: [PATCH 7/9] Add ascending and descending function to the table

---
 apps/web/index.html                           |   7 -
 apps/web/src/App.vue                          |   8 +-
 .../web/src/components/charts/LineChartJS.vue |   8 +-
 apps/web/src/layouts/default-layout.vue       |  51 +++---
 .../overview/components/Announcements.vue     |  20 +-
 .../overview/components/BreakdownTable.vue    | 173 +++++++++++-------
 .../src/pages/overview/components/Staking.vue |  20 +-
 .../pages/overview/components/StakingAvg.vue  |   9 +-
 package-lock.json                             |  10 +
 package.json                                  |   1 +
 10 files changed, 181 insertions(+), 126 deletions(-)

diff --git a/apps/web/index.html b/apps/web/index.html
index 6901f3cf3..ae191672f 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -9,10 +9,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
-    
-    
-    <!-- Icon Library -->
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/casimir.svg" />
@@ -22,8 +18,5 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
-    <script>
-      feather.replace()
-    </script>
   </body>
 </html>
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index 8bd553d83..453470763 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -6,13 +6,7 @@
 
   // Need this to fix initilizing bug between user.ts and ssv.ts
   const { user } = useUsers()
-
-  onMounted(() => {
-    // Needed for new Icon Library
-
-    // eslint-disable-next-line no-undef
-    feather.replace()
-  })
+  
 </script>
   
 <template>
diff --git a/apps/web/src/components/charts/LineChartJS.vue b/apps/web/src/components/charts/LineChartJS.vue
index 235e6b9c4..97c43a54c 100644
--- a/apps/web/src/components/charts/LineChartJS.vue
+++ b/apps/web/src/components/charts/LineChartJS.vue
@@ -44,9 +44,6 @@ const hexToRGB = (hex: string) => {
     } : {r: 0, g: 0, b: 0}
 }
 
-const WIDTH = ref(0)
-// const HEIGHT = ref(0)
-
 let ctx: any
 let line_chart: Chart<any, any[], unknown>
 onMounted(() => {
@@ -100,10 +97,9 @@ onMounted(() => {
     const outputsize = () => {
         if(line_chart_container_el){
             WIDTH = line_chart_container_el.offsetWidth
-            HEIGHT.value = line_chart_container_el.offsetHeight
+            HEIGHT = line_chart_container_el.offsetHeight
         }
-        // console.log(WIDTH, HEIGHT)
-        line_chart.resize(WIDTH , HEIGHT)
+        line_chart.resize(WIDTH , HEIGHT )
     }
     if(line_chart_container_el){
         new ResizeObserver(outputsize).observe(line_chart_container_el)   
diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index fcd20d121..343bb1cb1 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import Carousel from '@/components/Carousel.vue'
 import Slide from '@/components/Slide.vue'
 
+import VueFeather from 'vue-feather'
 import useWallet from '@/composables/wallet'
 
 const authFlowCardNumber = ref(1)
@@ -111,9 +112,10 @@ onUnmounted(() =>{
           <button
             id="setting_modal_button"
           >
-            <i
-              data-feather="settings"
-              class="w-[19px] h-min"
+            <vue-feather
+              type="settings"
+              size="36"
+              class="icon w-[19px] h-min"
             />
           </button>
 
@@ -133,45 +135,51 @@ onUnmounted(() =>{
           class="absolute right-[60px] bg-white top-[100%] w-[200px] setting_modal"
         >
           <button class="border-b border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full">
-            <i
-              data-feather="user"
-              class="w-[17px] h-min"
+            <vue-feather
+              type="user"
+              size="36"
+              class="icon w-[17px] h-min"
             />
+            
             <span>
               Account
             </span>
           </button>
           <button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
-            <i
-              data-feather="layers"
-              class="w-[17px] h-min"
+            <vue-feather
+              type="layers"
+              size="36"
+              class="icon w-[17px] h-min"
             />
             <span>
               Chanelog
             </span>
           </button>
           <button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
-            <i
-              data-feather="help-circle"
-              class="w-[17px] h-min"
+            <vue-feather
+              type="help-circle"
+              size="36"
+              class="icon w-[17px] h-min"
             />
             <span>
               Support
             </span>
           </button>
           <button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
-            <i
-              data-feather="code"
-              class="w-[17px] h-min"
+            <vue-feather
+              type="code"
+              size="36"
+              class="icon w-[17px] h-min"
             />
             <span>
               API
             </span>
           </button>
           <button class="border-t border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full">
-            <i
-              data-feather="log-out"
-              class="w-[17px] h-min"
+            <vue-feather
+              type="log-out"
+              size="36"
+              class="icon w-[17px] h-min"
             />
             <span>
               Log out
@@ -244,9 +252,10 @@ onUnmounted(() =>{
             >
               <h6 class="nav_items flex items-center mb-[20px]">
                 <button @click="authFlowCardNumber = 1, selectedProivder = null">
-                  <i
-                    data-feather="chevron-left"
-                    class="text-primary hover:text-blue_3 mr-[10px]"
+                  <vue-feather
+                    type="chevron-left"
+                    size="36"
+                    class="icon text-primary hover:text-blue_3 mr-[10px]"
                   />
                 </button>
                 Select Address
diff --git a/apps/web/src/pages/overview/components/Announcements.vue b/apps/web/src/pages/overview/components/Announcements.vue
index 15a40bab0..5a2d34170 100644
--- a/apps/web/src/pages/overview/components/Announcements.vue
+++ b/apps/web/src/pages/overview/components/Announcements.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from 'vue'
+import VueFeather from 'vue-feather'
 
 const message = ref('We\'ve just announced our series A!')
 const openReadUpdate = ref(false)
@@ -34,16 +35,19 @@ onUnmounted(() =>{
 <template>
   <div class="card_container px-[26px] pt-[24px] pb-[21px] text-black">
     <div class="flex justify-end items-center mb-[1px]">
-      <i
-        data-feather="x" 
-        class="w-[10px] h-min text-[#667085]"
-      /> 
+      <!-- TD: figure out how the X function works -->
+      <!-- <vue-feather
+        type="x"
+        size="36"
+        class="icon w-[10px] h-min text-[#667085]"
+      /> -->
     </div>
     <div class="w-min card_alert mb-[12px]">
-      <i
-        data-feather="alert-circle" 
-        class="w-[20px] h-min text-[#475467]"
-      /> 
+      <vue-feather
+        type="alert-circle"
+        size="36"
+        class="icon w-[20px] h-min text-[#475467]"
+      />
     </div>
     <div class="mb-[14px]">
       <p class="card_announcement">
diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index e64095924..a71b2c1ec 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -2,10 +2,14 @@
 import LineChartJS from '@/components/charts/LineChartJS.vue'
 import { ref, watch } from 'vue'
 import * as XLSX from 'xlsx'
+import VueFeather from 'vue-feather'
 
 const searchInput = ref('')
 const tableView = ref('Wallets')
 
+const selectedHeader = ref('')
+const selectedOrientation = ref('ascending')
+
 const tableHeaderOptions = ref(
   {
     Wallets: {
@@ -75,6 +79,13 @@ const tableMockedItems = ref({
       bal: '1.5 ETH',
       stk_amt: '0.5 ETH',
       stk_rwd: '0.034 ETH'
+    },
+    {
+      wallet_provider: 'CoinbaseWallet',
+      act: '12345678910asdfghjkl;qwertyuiopzxcvbnm',
+      bal: '1.5 ETH',
+      stk_amt: '0.5 ETH',
+      stk_rwd: '0.034 ETH'
     }
   ],
   Transactions: [
@@ -86,18 +97,28 @@ const tableMockedItems = ref({
       apy: '2.1 %',
       status: 'pending',
       operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
-    }
+    },
+    {
+      tx_hash: '1234567890qwertyuiopasdfghjklzxcvbnm',
+      stk_amt: '1.5 ETH',
+      stk_rwd: '0.045 ETH',
+      date: '01/01/2023',
+      apy: '2.1 %',
+      status: 'pending',
+      operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
+    },
   ],
 })
 
 const filteredData = ref(tableMockedItems.value[tableView.value])
 
 const filterData = () => {
+  let filteredDataArray
   if (searchInput.value === '') {
-    filteredData.value = tableMockedItems.value[tableView.value]
+    filteredDataArray = tableMockedItems.value[tableView.value]
   } else {
     const searchTerm = searchInput.value
-    const filteredDataArray =  tableMockedItems.value[tableView.value].filter(item => {
+    let filteredDataArray =  tableMockedItems.value[tableView.value].filter(item => {
       return (
         // Might need to modify to match types each variable
         item.wallet_provider?.toLowerCase().includes(searchTerm) ||
@@ -112,17 +133,31 @@ const filterData = () => {
         // item.operators?.toLowerCase().includes(searchTerm) 
       )
     })
-    filteredData.value = filteredDataArray
   }
+
+  if(selectedHeader.value !== '' && selectedOrientation.value !== '') {
+    filteredDataArray = filteredDataArray.sort((a, b) => {
+      const valA = a[selectedHeader.value]
+      const valB = b[selectedHeader.value]
+
+      if (selectedOrientation.value === 'ascending') {
+        return valA < valB ? -1 : valA > valB ? 1 : 0
+      } else if (selectedOrientation.value === 'descending') {
+        return valA > valB ? -1 : valA < valB ? 1 : 0
+      }
+    })
+  }
+
+  filteredData.value = filteredDataArray
 }
 
-watch([searchInput, tableView], ()=>{
+watch([searchInput, tableView, selectedHeader, selectedOrientation], ()=>{
   filterData()
 })
 
 
 const convertString = (inputString: string) => {
-  if (inputString.length <= 4) {
+  if (inputString.length && inputString.length <= 4) {
     return inputString
   }
 
@@ -225,9 +260,10 @@ const exportFile = () => {
             class="flex items-center gap-[8px] export_button"
             @click="exportFile()"
           >
-            <i
-              data-feather="upload-cloud" 
-              class="w-[17px] h-min"
+            <vue-feather
+              type="upload-cloud"
+              size="36"
+              class="icon w-[17px] h-min"
             />
             Export
           </button>
@@ -238,24 +274,24 @@ const exportFile = () => {
           <button
             class="timeframe_button"
             :class="tableView === 'Wallets'? 'bg-[#F3F3F3]' : 'bg-[#FFFFFF]'"
-            @click="tableView = 'Wallets'"
+            @click="tableView = 'Wallets', selectedHeader = ''"
           >
             Wallets
           </button>
           <button
             class="timeframe_button border-l border-l-[#D0D5DD] " 
             :class="tableView === 'Transactions'? 'bg-[#F3F3F3]' : 'bg-[#FFFFFF]'"
-            @click="tableView = 'Transactions'"
+            @click="tableView = 'Transactions', selectedHeader = ''"
           >
             Transactions
           </button>
         </div>
-        {{ searchInput }}
         <div class="flex flex-wrap items-center gap-[12px]">
           <div class="flex items-center gap-[8px] search_bar">
-            <i
-              data-feather="search" 
-              class="w-[20px] h-min text-[#667085]"
+            <vue-feather
+              type="search"
+              size="36"
+              class="icon w-[20px] h-min text-[#667085]"
             />
             <input
               v-model="searchInput"
@@ -266,9 +302,10 @@ const exportFile = () => {
           </div>
 
           <button class="filters_button">
-            <i
-              data-feather="search" 
-              class="w-[20px] h-min"
+            <vue-feather
+              type="filter"
+              size="20"
+              class="icon w-[20px] h-min"
             />
             Filters
           </button>
@@ -282,47 +319,57 @@ const exportFile = () => {
             <th
               v-for="header in tableHeaderOptions[tableView].headers"
               :key="header"
-              class="table_header"
+              class="table_header "
             >
-              <div
-                v-if="header.value === 'wallet_provider'"
-                class="flex items-center"
-              >
-                <button class="checkbox_button mr-[12px]">
-                  <i
-                    data-feather="minus" 
-                    class="w-[14px] h-min"
-                  />
-                </button>
-                Wallet Provider
-                <button class="ml-[4px]">
-                  <i
-                    data-feather="arrow-down" 
-                    class="w-[16px] h-min text-[#667085]"
-                  />
-                </button>
-              </div>
-              <div
-                v-else-if="header.value === 'tx_hash'"
-                class="flex items-center"
-              >
-                <button class="checkbox_button mr-[12px]">
-                  <i
-                    data-feather="minus" 
-                    class="w-[14px] h-min"
+              <div class="flex items-center gap-[5px]">
+                <div
+                  v-if="header.value === 'wallet_provider'"
+                  class="flex items-center"
+                >
+                  <button class="checkbox_button mr-[12px]">
+                    <vue-feather
+                      type="minus"
+                      size="20"
+                      class="icon w-[14px] h-min"
+                    />
+                  </button>
+                  Wallet Provider
+                </div>
+                <div
+                  v-else-if="header.value === 'tx_hash'"
+                  class="flex items-center"
+                >
+                  <button class="checkbox_button mr-[12px]">
+                    <vue-feather
+                      type="minus"
+                      size="20"
+                      class="icon w-[14px] h-min"
+                    />
+                  </button>
+                  Tx Hash
+                </div>
+                <div v-else>
+                  {{ header.title }}
+                </div>
+                <button 
+                  class="ml-[4px] flex flex-col items-center justify-between"
+                  :class="selectedHeader === header.value? 'opacity-100' : 'opacity-25'"
+                  @click="selectedHeader = header.value, selectedOrientation === 'ascending'? selectedOrientation = 'descending' : selectedOrientation = 'ascending'"
+                >
+                  <vue-feather
+                    type="arrow-up"
+                    size="20"
+                    class="icon h-min "
+                    :class="selectedOrientation === 'ascending'? 'w-[10px]' : 'w-[8px] opacity-50'"
                   />
-                </button>
-                Tx Hash
-                <button class="ml-[4px]">
-                  <i
-                    data-feather="arrow-down" 
-                    class="w-[16px] h-min text-[#667085]"
+                  <vue-feather
+                    type="arrow-down"
+                    size="20"
+                    class="icon h-min"
+                    :class="selectedOrientation === 'descending'? 'w-[10px]' : 'w-[8px] opacity-50'"
                   />
                 </button>
               </div>
-              <div v-else>
-                {{ header.title }}
-              </div>
             </th>
           </tr>
         </thead>
@@ -343,10 +390,11 @@ const exportFile = () => {
                 v-if="header.value === 'wallet_provider'"
                 class="flex items-center gap-[12px]"
               >
-                <button class="checkbox_button mr-[12px]">
-                  <i
-                    data-feather="check" 
-                    class="w-[14px] h-min"
+                <button class="checkbox_button">
+                  <vue-feather
+                    type="check"
+                    size="20"
+                    class="icon w-[14px] h-min"
                   />
                 </button>
                 <img
@@ -354,7 +402,7 @@ const exportFile = () => {
                   alt="Avatar "
                   class="w-[20px] h-[20px]"
                 >
-                <h6 class="title_name 800s:w-[20px] truncate">
+                <h6 class="title_name 800s:w-[20px] w-[50px] truncate">
                   {{ item[header.value] }}
                 </h6>
               </div>
@@ -371,9 +419,10 @@ const exportFile = () => {
                 class="flex items-center gap-[12px]"
               >
                 <button class="checkbox_button mr-[12px]">
-                  <i
-                    data-feather="check" 
-                    class="w-[14px] h-min"
+                  <vue-feather
+                    type="check"
+                    size="20"
+                    class="icon w-[14px] h-min"
                   />
                 </button>
                 <a class="w-[55px] truncate underline">
diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue
index 31a24e17f..1aefac3b1 100644
--- a/apps/web/src/pages/overview/components/Staking.vue
+++ b/apps/web/src/pages/overview/components/Staking.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch } from 'vue'
+import VueFeather from 'vue-feather'
 
 const selectedWallet = ref(null as null | string)
 const formattedAmountToStake = ref(null as null | string )
@@ -134,10 +135,10 @@ onUnmounted(() =>{
         <h6>
           {{ selectedWallet? convertString(selectedWallet) : 'Select wallet' }}
         </h6>
-
-        <i
-          :data-feather="openSelectWalletInput? 'chevron-up' : 'chevron-down'" 
-          class="w-[20px]"
+        <vue-feather
+          :type="openSelectWalletInput? 'chevron-up' : 'chevron-down'" 
+          size="36"
+          class="icon w-[20px]"
         />
       </button>
       <div
@@ -168,9 +169,10 @@ onUnmounted(() =>{
             @click="selectedWallet = wallet, openSelectWalletInput = false"
           >
             {{ convertString(wallet) }}
-            <i
-              data-feather="chevron-right" 
-              class="w-[20px]"
+            <vue-feather
+              type="chevron-right" 
+              size="36"
+              class="icon w-[20px]"
             />
           </button>
         </div>
@@ -207,10 +209,6 @@ onUnmounted(() =>{
         <h6 style="font-weight: 400;">
           USD
         </h6>
-        <!-- <i
-          data-feather="chevron-down" 
-          class="w-[20px]"
-        /> -->
       </div>
     </div>
 
diff --git a/apps/web/src/pages/overview/components/StakingAvg.vue b/apps/web/src/pages/overview/components/StakingAvg.vue
index b895927b0..c416dedc6 100644
--- a/apps/web/src/pages/overview/components/StakingAvg.vue
+++ b/apps/web/src/pages/overview/components/StakingAvg.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from 'vue'
+import VueFeather from 'vue-feather'
 
 const avgAPY = ref('5.2%')
 const openTimeFrameOptions = ref(false)
@@ -63,10 +64,10 @@ onUnmounted(() =>{
           @click="openTimeFrameOptions = !openTimeFrameOptions"
         >
           {{ selectedTimeframe }}
-
-          <i
-            data-feather="chevron-down" 
-            class="w-[20px] h-min text-[#667085]"
+          <vue-feather
+            :type="openTimeFrameOptions? 'chevron-up' : 'chevron-down'" 
+            size="36"
+            class="icon w-[20px] h-min text-[#667085]"
           />
         </button>
         <div
diff --git a/package-lock.json b/package-lock.json
index ceaa9598c..afcbba691 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
       "dependencies": {
         "chart.js": "^4.2.1",
         "feather-icons": "^4.29.0",
+        "vue-feather": "^2.0.0",
         "xlsx": "^0.18.5"
       },
       "devDependencies": {
@@ -24691,6 +24692,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-feather": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vue-feather/-/vue-feather-2.0.0.tgz",
+      "integrity": "sha512-GBvxJWu2ycGTpB8duYWnc5S/TwWPPb2G5Ft2NbkwK1vZkUDUOTYqIb4Nh1HOL6A37Isfrd0Guun0lesS97PfxA==",
+      "peerDependencies": {
+        "feather-icons": "^4.28.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
diff --git a/package.json b/package.json
index 03effdcf9..3cf4376f0 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
   "dependencies": {
     "chart.js": "^4.2.1",
     "feather-icons": "^4.29.0",
+    "vue-feather": "^2.0.0",
     "xlsx": "^0.18.5"
   }
 }

From 7417613370572755672c052e69ca77c1a043f318 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Mon, 19 Jun 2023 10:57:43 -0400
Subject: [PATCH 8/9] Comment out non-functional parts until further inputs.

---
 .../overview/components/BreakdownTable.vue     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/pages/overview/components/BreakdownTable.vue b/apps/web/src/pages/overview/components/BreakdownTable.vue
index a71b2c1ec..e6eac2eb5 100644
--- a/apps/web/src/pages/overview/components/BreakdownTable.vue
+++ b/apps/web/src/pages/overview/components/BreakdownTable.vue
@@ -118,7 +118,7 @@ const filterData = () => {
     filteredDataArray = tableMockedItems.value[tableView.value]
   } else {
     const searchTerm = searchInput.value
-    let filteredDataArray =  tableMockedItems.value[tableView.value].filter(item => {
+    filteredDataArray =  tableMockedItems.value[tableView.value].filter(item => {
       return (
         // Might need to modify to match types each variable
         item.wallet_provider?.toLowerCase().includes(searchTerm) ||
@@ -326,26 +326,26 @@ const exportFile = () => {
                   v-if="header.value === 'wallet_provider'"
                   class="flex items-center"
                 >
-                  <button class="checkbox_button mr-[12px]">
+                  <!-- <button class="checkbox_button mr-[12px]">
                     <vue-feather
                       type="minus"
                       size="20"
                       class="icon w-[14px] h-min"
                     />
-                  </button>
+                  </button> -->
                   Wallet Provider
                 </div>
                 <div
                   v-else-if="header.value === 'tx_hash'"
                   class="flex items-center"
                 >
-                  <button class="checkbox_button mr-[12px]">
+                  <!-- <button class="checkbox_button mr-[12px]">
                     <vue-feather
                       type="minus"
                       size="20"
                       class="icon w-[14px] h-min"
                     />
-                  </button>
+                  </button> -->
                   Tx Hash
                 </div>
                 <div v-else>
@@ -390,13 +390,13 @@ const exportFile = () => {
                 v-if="header.value === 'wallet_provider'"
                 class="flex items-center gap-[12px]"
               >
-                <button class="checkbox_button">
+                <!-- <button class="checkbox_button">
                   <vue-feather
                     type="check"
                     size="20"
                     class="icon w-[14px] h-min"
                   />
-                </button>
+                </button> -->
                 <img
                   :src="`/${item[header.value]}.svg`"
                   alt="Avatar "
@@ -418,13 +418,13 @@ const exportFile = () => {
                 v-else-if="header.value === 'tx_hash'"
                 class="flex items-center gap-[12px]"
               >
-                <button class="checkbox_button mr-[12px]">
+                <!-- <button class="checkbox_button mr-[12px]">
                   <vue-feather
                     type="check"
                     size="20"
                     class="icon w-[14px] h-min"
                   />
-                </button>
+                </button> -->
                 <a class="w-[55px] truncate underline">
                   {{ convertString(item[header.value]) }}
                 </a>

From 5c7fb65da3ac2e9122ddb3a6afa663e301dc9a11 Mon Sep 17 00:00:00 2001
From: demogorgod <ssnajeeb2020@manchester.edu>
Date: Tue, 20 Jun 2023 14:11:50 -0400
Subject: [PATCH 9/9] Update breakdown chart and adjust spacing for wallet
 connect modal

---
 apps/web/src/layouts/default-layout.vue       | 18 ++++++-------
 .../overview/components/BreakdownChart.vue    | 26 ++++++++++++++++---
 .../pages/overview/components/StakingAvg.vue  |  4 +--
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index 343bb1cb1..59e6d07c8 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -221,16 +221,16 @@ onUnmounted(() =>{
           <Slide class="w-full h-full ">
             <div
               v-show="currentSlide === 1"
-              class="absolute top-0 left-0 w-full h-full bg-white card px-[25px] py-[12px]"
+              class="absolute top-0 left-0 w-full h-full bg-white card px-[50px] py-[25px]"
             >
               <h6 class="nav_items">
-                Select Wallet Provider
+                Select Provider
               </h6>
-              <div class="flex flex-wrap justify-between gap-[20px] w-full mt-[20px]">
+              <div class="flex flex-wrap justify-around gap-[20px] w-full mt-[20px]">
                 <button
                   v-for="wallet in activeWallets"
                   :key="wallet"
-                  class="w-[180px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
+                  class="w-[140px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
                   @click="selectProvider(wallet, 'ETH'), authFlowCardNumber = 2, selectedProivder = wallet"
                 >
                   <img
@@ -248,14 +248,14 @@ onUnmounted(() =>{
           <Slide class="w-full h-full ">
             <div
               v-show="currentSlide === 2"
-              class="absolute top-0 left-0 w-full h-full bg-white card px-[25px] py-[12px]"
+              class="absolute top-0 left-0 w-full h-full bg-white card px-[50px] py-[25px]"
             >
               <h6 class="nav_items flex items-center mb-[20px]">
                 <button @click="authFlowCardNumber = 1, selectedProivder = null">
                   <vue-feather
                     type="chevron-left"
-                    size="36"
-                    class="icon text-primary hover:text-blue_3 mr-[10px]"
+                    size=""
+                    class="icon w-[20px] h-min text-primary hover:text-blue_3 mr-[10px] mt-[5px]"
                   />
                 </button>
                 Select Address
@@ -269,11 +269,11 @@ onUnmounted(() =>{
                 </h6>
               </div>
               <div v-else>
-                <div class="my-[20px] nav_items">
+                <div class="my-[20px] px-[10px] nav_items">
                   <input
                     v-model="termsCheckbox"
                     type="checkbox"
-                    class=""
+                    class="mr-[5px]"
                   > By connecting my address, I certify that I have read and accept the updated 
                   <span class="text-primary"> Terms of Use </span> and <span class="text-primary">Privacy Notice</span>.
                 </div> 
diff --git a/apps/web/src/pages/overview/components/BreakdownChart.vue b/apps/web/src/pages/overview/components/BreakdownChart.vue
index 145762fd5..6889a0640 100644
--- a/apps/web/src/pages/overview/components/BreakdownChart.vue
+++ b/apps/web/src/pages/overview/components/BreakdownChart.vue
@@ -7,7 +7,7 @@ const selectedTimeframe = ref('1 month')
 
 const data = ref({} as any)
 
-const totalStaked = ref({
+const currentStaked = ref({
   usd: '$150',
   exchange: '0.00054 ETH'
 })
@@ -17,6 +17,11 @@ const stakingRewards = ref({
   exchange: '0.004 ETH'
 })
 
+const totalDeposited = ref({
+  usd: '$17.25',
+  exchange: '0.004 ETH'
+})
+
 const setMockData = () => {
   let labels  = [] as string[]
   let today = new Date()
@@ -111,14 +116,14 @@ watch(selectedTimeframe, () => {
     <div class="flex flex-wrap gap-[68px] mb-[52px]">
       <div>
         <h6 class="blance_title mb-[15px]">
-          Total Staked
+          Current Staked
         </h6>
         <div class="flex items-center gap-[12px]">
           <h5 class="blance_amount">
-            {{ totalStaked.usd }}
+            {{ currentStaked.usd }}
           </h5>
           <span class="blance_exchange">
-            {{ totalStaked.exchange }}
+            {{ currentStaked.exchange }}
           </span>
         </div>
       </div>
@@ -135,6 +140,19 @@ watch(selectedTimeframe, () => {
           </span>
         </div>
       </div>
+      <div>
+        <h6 class="blance_title mb-[15px]">
+          Total Deposited
+        </h6>
+        <div class="flex items-center gap-[12px]">
+          <h5 class="blance_amount">
+            {{ totalDeposited.usd }}
+          </h5>
+          <span class="blance_exchange">
+            {{ totalDeposited.exchange }}
+          </span>
+        </div>
+      </div>
     </div>
     <div class="flex flex-wrap gap-[20px] justify-between items-start">
       <div>
diff --git a/apps/web/src/pages/overview/components/StakingAvg.vue b/apps/web/src/pages/overview/components/StakingAvg.vue
index c416dedc6..c0ac01b3d 100644
--- a/apps/web/src/pages/overview/components/StakingAvg.vue
+++ b/apps/web/src/pages/overview/components/StakingAvg.vue
@@ -53,7 +53,7 @@ onUnmounted(() =>{
   <div class="card_container px-[22px] pt-[22px] pb-[23px] text-black">
     <div class="flex justify-between items-start mb-[13px]">
       <h6 class="card_title">
-        Avg. Staking Reward
+        Estimated Staking Rewards
       </h6>
       <div
         class="whitespace-nowrap relative w-[120px]"
@@ -140,7 +140,7 @@ onUnmounted(() =>{
     font-family: 'IBM Plex Sans';
     font-style: normal;
     font-weight: 500;
-    font-size: 18px;
+    font-size: 12px;
     line-height: 23px;
     letter-spacing: -0.01em;
     color: #000000;