diff --git a/components/sidebar/context/SidebarDepositOverview.vue b/components/sidebar/context/SidebarDepositOverview.vue index d743268..0558e03 100644 --- a/components/sidebar/context/SidebarDepositOverview.vue +++ b/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" > -
- {{ shortenHash(activeAccount.address) }} -
+

+ {{ tokenKey }} Deposit Address +

- - +
+
+ {{ activeAccount.address }} +
+ + +
+ + +
+

Important

+

+ ! Send {{ tokenKey }} or ERC20 tokens to this address on {{ activeNetworkId }} Mainnet only. +

@@ -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 } }, })