Update SidebarDepositOverview.vue

components/sidebar/context/SidebarDepositOverview.vue

@@ -22,30 +22,46 @@
             activeAccount.address !==
               '0x0000000000000000000000000000000000000000'
           "
-          v-tooltip.bottom="tooltip"
-          v-clipboard:copy="activeAccount.address"
-          v-clipboard:success="onCopy"
-          class="flex items-center px-8 mt-4 whitespace-no-wrap cursor-pointer select-none group"
-          style="width: 220px"
+          class="bg-primary-blue-dark bg-opacity-5 rounded-[6px] py-3 px-4 mt-16 w-full"
         >
-          <div
-            class="flex-1 font-medium text-center text-ocean-blue-pure text-19"
-          >
-            {{ shortenHash(activeAccount.address) }}
-          </div>
+          <h3 class="font-bold text-primary-gray text-xs">
+            <span class="uppercase">{{ tokenKey }}</span> Deposit Address
+          </h3>
 
-          <Icon
-            v-if="!copied"
-            name="clipboard-copy"
-            type="outline"
-            class="flex-shrink-0 w-6 h-6 ml-4 text-grey-pure group-hover:text-ocean-blue-pure"
-          />
-          <Icon
-            v-else
-            name="clipboard-check"
-            type="outline"
-            class="flex-shrink-0 w-6 h-6 ml-4 transform -translate-x-px text-ocean-blue-pure dark:text-light"
-          />
+          <div class="flex justify-between items-start mt-4">
+            <div class="mr-4 text-lg font-medium text-grey-dark break-all">
+              {{ activeAccount.address }}
+            </div>
+
+            <button
+              v-tooltip.bottom="tooltip"
+              v-clipboard:copy="activeAccount.address"
+              v-clipboard:success="onCopy"
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 5H6C5.46957 5 4.96086 5.21071 4.58579 5.58579C4.21071 5.96086 4 6.46957 4 7V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H16C16.5304 21 17.0391 20.7893 17.4142 20.4142C17.7893 20.0391 18 19.5304 18 19V18M8 5C8 5.53043 8.21071 6.03914 8.58579 6.41421C8.96086 6.78929 9.46957 7 10 7H12C12.5304 7 13.0391 6.78929 13.4142 6.41421C13.7893 6.03914 14 5.53043 14 5M8 5C8 4.46957 8.21071 3.96086 8.58579 3.58579C8.96086 3.21071 9.46957 3 10 3H12C12.5304 3 13.0391 3.21071 13.4142 3.58579C13.7893 3.96086 14 4.46957 14 5M14 5H16C16.5304 5 17.0391 5.21071 17.4142 5.58579C17.7893 5.96086 18 6.46957 18 7V10M20 14H10M10 14L13 11M10 14L13 17"
+                  stroke="#A5ADC6"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="text-primary-gray mt-9">
+          <h3 class="font-bold">Important</h3>
+          <p class="text-xs font-medium mt-4">
+            ! Send <span class="uppercase">{{ tokenKey }}</span> or ERC20 tokens to this address on <span class="capitalize">{{ activeNetworkId }}</span> Mainnet only.
+          </p>
         </div>
       </div>
     </div>
@@ -57,19 +73,25 @@ import { defineComponent } from '@nuxtjs/composition-api'
 import { useFormatting } from '~/composables/useFormatting'
 import { useDSA } from '~/composables/useDSA'
 import { useCopiedToClipboardUx } from '~/composables/useCopiedToClipboardUx'
+import Icon from '~/components/Icon.vue'
+import Button from '~/components/Button.vue'
+import { useNetwork } from '~/composables/useNetwork'
 
 export default defineComponent({
+  components: { Icon, Button },
   props: {
     tokenKey: {}
   },
   setup() {
     const { activeAccount } = useDSA()
 
+    const { activeNetworkId } = useNetwork()
+
     const { shortenHash } = useFormatting()
 
     const { onCopy, tooltip, copied } = useCopiedToClipboardUx()
 
-    return { activeAccount, shortenHash, onCopy, tooltip, copied }
+    return { activeAccount, shortenHash, onCopy, tooltip, copied, activeNetworkId }
   },
 })
 </script>