Skip to content

Feat/hyperlane #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 9, 2025
Merged

Feat/hyperlane #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d630f1f
Add Hyperlane page
xdeq Aug 2, 2025
3434858
fix sent&received icon colors
xdeq Aug 4, 2025
e9ab591
fix(hyperlane): add @click.stop for nested links
xdeq Aug 4, 2025
43704f5
feat(hyperlane): add link to cmd
xdeq Aug 4, 2025
93d21b8
dev
xdeq Sep 9, 2025
7fd087c
interop
xdeq Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions assets/icons.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@
"explorable": "M8.393 2.67C7.883 3.172 7.423 3.76 7.026 4.401C5.795 6.381 5 9.067 5 12.001C5 14.946 5.847 17.633 7.1 19.607C7.50413 20.2519 7.98276 20.847 8.526 21.38C6.61034 20.6703 4.95799 19.3909 3.79127 17.7139C2.62455 16.037 1.99942 14.0429 2 12C2 7.75 4.653 4.117 8.393 2.67ZM11 3.236V20.735C10.29 20.381 9.505 19.665 8.788 18.535C7.745 16.892 7 14.578 7 12C7 9.41 7.705 7.096 8.724 5.457C9.385 4.394 10.121 3.693 10.824 3.322L11 3.236ZM15.607 2.67C17.4898 3.39815 19.1082 4.67909 20.2492 6.34437C21.3903 8.00965 22.0006 9.98129 22 12C22 16.251 19.347 19.883 15.607 21.33C16.117 20.828 16.577 20.24 16.974 19.6C18.205 17.618 19 14.932 19 12C19 9.068 18.205 6.381 16.974 4.401C16.5878 3.7727 16.129 3.19104 15.607 2.67ZM13 3.236C13.755 3.579 14.56 4.306 15.276 5.457C16.295 7.097 17 9.411 17 12C17 14.589 16.295 16.904 15.276 18.543C14.615 19.606 13.879 20.307 13.176 20.679L13 20.765V3.235V3.236Z",
"widgets": "M2 6.5C2 5.30653 2.47411 4.16193 3.31802 3.31802C4.16193 2.47411 5.30653 2 6.5 2C7.69347 2 8.83807 2.47411 9.68198 3.31802C10.5259 4.16193 11 5.30653 11 6.5V9.5C11 9.849 11 10.023 10.962 10.166C10.9109 10.3569 10.8105 10.531 10.6707 10.6707C10.531 10.8105 10.3569 10.9109 10.166 10.962C10.023 11 9.85 11 9.5 11H6.5C5.30653 11 4.16193 10.5259 3.31802 9.68198C2.47411 8.83807 2 7.69348 2 6.5ZM13 14.5C13 14.151 13 13.977 13.038 13.834C13.142 13.446 13.446 13.142 13.834 13.038C13.977 13 14.151 13 14.5 13H17.5C18.39 13 19.26 13.2639 20.0001 13.7584C20.7401 14.2529 21.3169 14.9557 21.6575 15.7779C21.998 16.6002 22.0872 17.505 21.9135 18.3779C21.7399 19.2508 21.3113 20.0526 20.682 20.682C20.0526 21.3113 19.2508 21.7399 18.3779 21.9135C17.505 22.0872 16.6002 21.9981 15.7779 21.6575C14.9557 21.3169 14.2529 20.7401 13.7584 20.0001C13.2639 19.26 13 18.39 13 17.5V14.5ZM2 17.5C2 16.3065 2.47411 15.1619 3.31802 14.318C4.16193 13.4741 5.30653 13 6.5 13H9.2C9.83 13 10.145 13 10.386 13.123C10.597 13.23 10.77 13.403 10.877 13.614C11 13.854 11 14.17 11 14.8V17.5C11 18.0909 10.8836 18.6761 10.6575 19.2221C10.4313 19.768 10.0998 20.2641 9.68198 20.682C9.26412 21.0998 8.76804 21.4313 8.22207 21.6575C7.67611 21.8836 7.09095 22 6.5 22C5.90905 22 5.32389 21.8836 4.77792 21.6575C4.23196 21.4313 3.73588 21.0998 3.31802 20.682C2.90016 20.2641 2.56869 19.768 2.34254 19.2221C2.1164 18.6761 2 18.0909 2 17.5ZM13 6.5C13 5.60999 13.2639 4.73996 13.7584 3.99994C14.2529 3.25991 14.9557 2.68314 15.7779 2.34254C16.6002 2.00195 17.505 1.91283 18.3779 2.08647C19.2508 2.2601 20.0526 2.68868 20.682 3.31802C21.3113 3.94736 21.7399 4.74918 21.9135 5.62209C22.0872 6.49501 21.998 7.39981 21.6575 8.22208C21.3169 9.04434 20.7401 9.74715 20.0001 10.2416C19.26 10.7361 18.39 11 17.5 11H14.286C14.136 11 14.062 11 13.999 10.993C13.7457 10.9645 13.5097 10.8508 13.3294 10.6706C13.1492 10.4903 13.0355 10.2543 13.007 10.001C13 9.938 13 9.864 13 9.714V6.5Z",
"zap": "M 13.398 1.083 C 13.805 1.26 14.047 1.684 13.992 2.124 L 13.132 9 L 19.328 9 C 19.568 9 19.813 9 20.012 9.018 C 20.201 9.035 20.562 9.08 20.875 9.333 C 21.234 9.623 21.439 10.062 21.432 10.523 C 21.426 10.925 21.23 11.232 21.122 11.387 C 21.008 11.552 20.852 11.74 20.698 11.925 L 11.768 22.64 C 11.484 22.98 11.009 23.093 10.602 22.916 C 10.195 22.74 9.953 22.316 10.008 21.876 L 10.868 15 L 4.671 15 C 4.431 15 4.186 15 3.987 14.982 C 3.798 14.965 3.437 14.92 3.124 14.667 C 2.765 14.377 2.56 13.938 2.567 13.477 C 2.573 13.075 2.769 12.768 2.877 12.613 C 2.991 12.448 3.147 12.26 3.301 12.075 L 3.324 12.048 L 12.232 1.36 C 12.516 1.019 12.991 0.906 13.398 1.083 Z",
"hyperlane": [
{
"path": "M5.06664 3.59961C4.87226 3.59968 4.73659 3.78055 4.80297 3.95117L7.88695 11.834L4.79515 20.1094C4.73162 20.2795 4.86706 20.4578 5.0598 20.458H3.08031C2.88752 20.4579 2.75211 20.2795 2.81566 20.1094L5.90746 11.834L2.82347 3.95117C2.75707 3.78062 2.89192 3.59986 3.08617 3.59961H5.06664ZM14.0217 3.59961C13.8273 3.59961 13.6916 3.7805 13.758 3.95117L16.842 11.834L13.7502 20.1094C13.6867 20.2795 13.8221 20.4579 14.0149 20.458H12.0354C11.8425 20.458 11.7071 20.2795 11.7707 20.1094L14.8625 11.834L11.7786 3.95117C11.7121 3.78057 11.8469 3.5998 12.0412 3.59961H14.0217Z",
"opacity": 0.5
},
{
"path": "M8.49683 3.6001C8.96483 3.6001 9.38386 3.87195 9.54722 4.28174L11.916 10.2235H16.2125L13.7582 3.95166C13.6914 3.7809 13.8269 3.6001 14.0214 3.6001H17.4519C17.9199 3.60013 18.3385 3.87197 18.5019 4.28174L21.5129 11.8341C21.5361 11.8923 21.5364 11.9565 21.5136 12.0149L21.4968 12.0583V12.0587L18.4984 19.7685C18.3375 20.1823 17.9165 20.4578 17.4453 20.4579H14.0152C13.8223 20.4579 13.6872 20.28 13.7507 20.1099L16.0793 13.8771H11.8347L9.54332 19.7685C9.38236 20.1824 8.96151 20.4579 8.49019 20.4579H5.06011C4.86732 20.4578 4.73211 20.28 4.79566 20.1099L7.88746 11.8341L4.80347 3.95166C4.73669 3.78091 4.87181 3.60017 5.06636 3.6001H8.49683Z",
"opacity": 1
}
],
"moon": "M9.06693 2.41209C9.23841 2.03292 9.15714 1.58718 8.86288 1.29292C8.56862 0.998664 8.12289 0.917397 7.74371 1.08887C3.76893 2.88642 1 6.88764 1 11.5377C1 17.8682 6.13185 23 12.4623 23C17.1124 23 21.1136 20.2311 22.9112 16.2563C23.0826 15.8771 23.0014 15.4314 22.7071 15.1371C22.4128 14.8429 21.9671 14.7616 21.5879 14.9331C20.4015 15.4697 19.0838 15.7689 17.6935 15.7689C12.4676 15.7689 8.23116 11.5325 8.23116 6.30656C8.23116 4.91628 8.53036 3.59857 9.06693 2.41209Z",
"sun": "M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4V2ZM13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V20ZM2 11C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H4C4.55228 13 5 12.5523 5 12C5 11.4477 4.55228 11 4 11H2ZM5.60701 4.1928C5.21649 3.80227 4.58332 3.80227 4.1928 4.1928C3.80227 4.58332 3.80227 5.21649 4.1928 5.60701L5.60701 7.02122C5.99753 7.41175 6.6307 7.41175 7.02122 7.02122C7.41175 6.6307 7.41175 5.99753 7.02122 5.60701L5.60701 4.1928ZM19.8073 5.60701C20.1979 5.21649 20.1979 4.58332 19.8073 4.1928C19.4168 3.80227 18.7836 3.80227 18.3931 4.1928L16.9789 5.60701C16.5884 5.99753 16.5884 6.6307 16.9789 7.02122C17.3694 7.41175 18.0026 7.41175 18.3931 7.02122L19.8073 5.60701ZM7.02122 18.397C7.41175 18.0065 7.41175 17.3734 7.02122 16.9828C6.6307 16.5923 5.99753 16.5923 5.60701 16.9828L4.1928 18.397C3.80227 18.7876 3.80227 19.4207 4.1928 19.8113C4.58332 20.2018 5.21649 20.2018 5.60701 19.8113L7.02122 18.397ZM18.3931 16.9828C18.0026 16.5923 17.3694 16.5923 16.9789 16.9828C16.5884 17.3734 16.5884 18.0065 16.9789 18.397L18.3931 19.8113C18.7836 20.2018 19.4168 20.2018 19.8073 19.8113C20.1979 19.4207 20.1979 18.7876 19.8073 18.397L18.3931 16.9828ZM20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H20ZM6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z",
"namespace": "M 1 6.162 C 1 5.635 1 5.18 1.03 4.805 C 1.063 4.41 1.134 4.017 1.327 3.638 C 1.615 3.074 2.074 2.615 2.638 2.328 C 3.016 2.134 3.41 2.063 3.805 2.031 C 4.18 2 4.635 2 5.161 2 L 9.147 2 C 9.74 1.998 10.262 1.998 10.742 2.163 C 11.162 2.308 11.545 2.545 11.863 2.856 C 12.226 3.211 12.459 3.678 12.723 4.21 L 13.618 6 L 17.241 6 C 18.046 6 18.711 6 19.251 6.044 C 19.814 6.09 20.331 6.189 20.816 6.436 C 21.569 6.819 22.181 7.431 22.564 8.184 C 22.811 8.669 22.91 9.186 22.956 9.748 C 23 10.289 23 10.954 23 11.758 L 23 16.241 C 23 17.046 23 17.711 22.956 18.251 C 22.91 18.814 22.811 19.331 22.564 19.816 C 22.181 20.569 21.569 21.181 20.816 21.564 C 20.331 21.811 19.814 21.91 19.252 21.956 C 18.711 22 18.046 22 17.242 22 L 6.758 22 C 5.953 22 5.288 22 4.748 21.956 C 4.185 21.91 3.668 21.811 3.183 21.564 C 2.43 21.181 1.818 20.569 1.435 19.816 C 1.188 19.331 1.089 18.814 1.043 18.252 C 1 17.71 1 17.046 1 16.242 Z M 5.2 4 C 4.623 4 4.25 4.001 3.968 4.024 C 3.696 4.046 3.596 4.084 3.546 4.109 C 3.358 4.205 3.205 4.358 3.109 4.546 C 3.084 4.596 3.046 4.696 3.024 4.968 C 3.004 5.217 3 5.535 3 6 L 11.382 6 L 10.99 5.216 C 10.637 4.509 10.554 4.375 10.464 4.285 C 10.358 4.182 10.23 4.103 10.09 4.055 C 9.969 4.013 9.812 4 9.022 4 Z",
Expand Down
12 changes: 12 additions & 0 deletions components/LeftSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,18 @@ const modularLinks = reactive([
},
],
},
{
icon: "hyperlane",
name: "Interop",
path: "/hyperlane",
children: [
{
name: "Transfers",
path: "/hyperlane/transfers",
show: true,
},
],
},
{
icon: "ibc",
name: "IBC",
Expand Down
9 changes: 9 additions & 0 deletions components/cmd/CommandMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,15 @@ const rawNavigationActions = [
router.push("/rollups")
},
},
{
type: "callback",
icon: "arrow-narrow-right",
title: "Go to Hyperlane",
runText: "Open Hyperlane",
callback: () => {
router.push("/hyperlane")
},
},
{
type: "callback",
icon: "arrow-narrow-right",
Expand Down
156 changes: 156 additions & 0 deletions components/modals/HyperlaneMailboxModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<script setup>
/** Vendor */
import { DateTime } from "luxon"

/** UI */
import Modal from "@/components/ui/Modal.vue"
import Button from "@/components/ui/Button.vue"

/** Services */
import { comma } from "@/services/utils"

/** Stores */
import { useCacheStore } from "@/store/cache.store"
const cacheStore = useCacheStore()

const emit = defineEmits(["onClose"])
const props = defineProps({
show: Boolean,
})

const mailbox = computed(() => cacheStore.current.hyperlaneMailbox)

const handleNavigate = (target) => {
emit("onClose")
navigateTo(target)
}
</script>

<template>
<Modal :show="show" @onClose="emit('onClose')" width="500" disable-trap>
<Flex align="center" direction="column" gap="16">
<Flex wide align="center" gap="6">
<Icon name="hyperlane" size="14" color="primary" />
<Text size="14" weight="600" color="primary">Hyperlane Mailbox</Text>
</Flex>

<Flex wide gap="16">
<Flex wide direction="column" gap="8" :class="[$style.card]">
<Flex align="center" gap="4">
<Icon name="arrow-narrow-up-right-circle" size="12" color="tertiary" />
<Text size="12" weight="600" color="secondary">Sent</Text>
</Flex>

<Text size="13" weight="600" color="primary" mono>
{{ mailbox.sent_messages }} <Text color="tertiary">messages</Text>
</Text>
</Flex>

<Flex wide direction="column" gap="8" :class="[$style.card]">
<Flex align="center" gap="4">
<Icon name="arrow-narrow-up-right-circle" size="12" color="tertiary" style="transform: scale(1, -1)" />
<Text size="12" weight="600" color="secondary">Received</Text>
</Flex>

<Text size="13" weight="600" color="primary" mono>
{{ mailbox.received_messages }} <Text color="tertiary">messages</Text>
</Text>
</Flex>
</Flex>

<Flex wide justify="between" align="center" :class="[$style.card]">
<Flex direction="column" gap="8">
<Text size="12" weight="600" color="secondary">Owner</Text>

<Flex align="center" gap="8">
<Text size="13" weight="600" color="primary" mono :class="['overflow_ellipsis', $style.address_text]">
{{ mailbox.owner.hash }}
</Text>
<CopyButton :text="mailbox.owner.hash" />
</Flex>
</Flex>
</Flex>

<Flex wide direction="column" gap="16" :class="$style.card">
<Text size="12" weight="600" color="secondary">Details</Text>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">ID</Text>

<Flex align="center" gap="6">
<Text size="12" weight="600" color="primary" mono>
{{ mailbox.mailbox.slice(0, 4).toUpperCase() }}
</Text>
<Flex align="center" gap="3">
<div v-for="dot in 3" class="dot" />
</Flex>
<Text size="12" weight="600" color="primary" mono>
{{ mailbox.mailbox.slice(-4).toUpperCase() }}
</Text>
<CopyButton :text="mailbox.mailbox" size="12" />
</Flex>
</Flex>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">Height</Text>

<Text @click="handleNavigate(`/block/${mailbox.height}`)" size="12" weight="600" color="primary" mono class="clickable">
{{ comma(mailbox.height) }}
</Text>
</Flex>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">Tx Hash</Text>

<Flex @click="handleNavigate(`/tx/${transfer.tx_hash}`)" align="center" gap="6" class="clickable">
<Text size="12" weight="600" color="primary" mono>
{{ mailbox.tx_hash.slice(0, 4).toUpperCase() }}
</Text>

<Flex align="center" gap="3">
<div v-for="dot in 3" class="dot" />
</Flex>

<Text size="12" weight="600" color="primary" mono>
{{ mailbox.tx_hash.slice(-4).toUpperCase() }}
</Text>

<CopyButton :text="mailbox.tx_hash" size="12" />
</Flex>
</Flex>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">Created</Text>

<Text size="12" weight="600" color="primary">
{{ DateTime.fromISO(mailbox.time).setLocale("en").toFormat("LLL d, t") }}
<Text color="tertiary"> ({{ DateTime.fromISO(mailbox.time).toRelative({ style: "short" }) }})</Text>
</Text>
</Flex>
</Flex>

<Button @click="emit('onClose')" wide type="tertiary" size="small">Close</Button>
</Flex>
</Modal>
</template>

<style module>
.card {
border-radius: 8px;
background: var(--op-5);

padding: 8px 12px 8px 8px;
}

.address_text {
flex: 1;
}

.receipient_icon {
border-radius: 50px;
border: 2px solid var(--op-5);
box-sizing: content-box;

padding: 2px;
}
</style>
176 changes: 176 additions & 0 deletions components/modals/HyperlaneTokenModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<script setup>
/** UI */
import Modal from "@/components/ui/Modal.vue"
import Button from "@/components/ui/Button.vue"

/** Services */
import { comma } from "@/services/utils"

/** Stores */
import { useCacheStore } from "@/store/cache.store"
const cacheStore = useCacheStore()

const emit = defineEmits(["onClose"])
const props = defineProps({
show: Boolean,
})

const token = computed(() => cacheStore.current.hyperlaneToken)

const handleNavigate = (target) => {
emit("onClose")
navigateTo(target)
}
</script>

<template>
<Modal :show="show" @onClose="emit('onClose')" width="500" disable-trap>
<Flex align="center" direction="column" gap="16">
<Flex wide align="center" gap="6">
<Icon name="hyperlane" size="14" color="primary" />
<Text size="14" weight="600" color="primary">Hyperlane Token</Text>
</Flex>

<Flex wide gap="16">
<Flex wide direction="column" gap="8" :class="[$style.card]">
<Flex align="center" gap="4">
<Icon name="arrow-narrow-up-right-circle" size="12" color="purple" />
<Text size="12" weight="600" color="secondary">Sent</Text>
</Flex>

<Text size="13" weight="600" color="primary" mono>
{{ comma(token.sent / 1_000_000) }} <Text color="tertiary">TIA</Text>
</Text>

<Text size="12" weight="600" color="tertiary" mono> {{ token.sent_transfers }} transfers </Text>
</Flex>

<Flex wide direction="column" gap="8" :class="[$style.card]">
<Flex align="center" gap="4">
<Icon name="arrow-narrow-up-right-circle" size="12" color="brand" style="transform: scale(1, -1)" />
<Text size="12" weight="600" color="secondary">Received</Text>
</Flex>

<Text size="13" weight="600" color="primary" mono>
{{ comma(token.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
</Text>

<Text size="12" weight="600" color="tertiary" mono> {{ token.received_transfers }} transfers </Text>
</Flex>
</Flex>

<Flex wide justify="between" align="center" :class="[$style.card]">
<Flex direction="column" gap="8">
<Text size="12" weight="600" color="secondary">Owner</Text>

<Flex align="center" gap="8">
<Text size="13" weight="600" color="primary" mono :class="['overflow_ellipsis', $style.address_text]">
{{ token.owner.hash }}
</Text>
<CopyButton :text="token.owner.hash" />
</Flex>
</Flex>
</Flex>

<Flex wide direction="column" gap="16" :class="$style.card">
<Text size="12" weight="600" color="secondary">Details</Text>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">Type</Text>

<Text size="12" weight="600" color="primary" style="text-transform: capitalize">
{{ token.type }}
</Text>
</Flex>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">ID</Text>

<Flex align="center" gap="6">
<Text size="12" weight="600" color="primary" mono>
{{ token.token_id.slice(0, 4).toUpperCase() }}
</Text>

<Flex align="center" gap="3">
<div v-for="dot in 3" class="dot" />
</Flex>

<Text size="12" weight="600" color="primary" mono>
{{ token.token_id.slice(-4).toUpperCase() }}
</Text>

<CopyButton :text="token.token_id" size="12" />
</Flex>
</Flex>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">Height</Text>

<Text @click="handleNavigate(`/block/${token.height}`)" size="12" weight="600" color="primary" mono class="clickable">
{{ comma(token.height) }}
</Text>
</Flex>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">Tx Hash</Text>

<Flex @click="handleNavigate(`/tx/${transfer.tx_hash}`)" align="center" gap="6" class="clickable">
<Text size="12" weight="600" color="primary" mono>
{{ token.tx_hash.slice(0, 4).toUpperCase() }}
</Text>

<Flex align="center" gap="3">
<div v-for="dot in 3" class="dot" />
</Flex>

<Text size="12" weight="600" color="primary" mono>
{{ token.tx_hash.slice(-4).toUpperCase() }}
</Text>

<CopyButton :text="token.tx_hash" size="12" />
</Flex>
</Flex>

<Flex align="center" justify="between">
<Text size="12" weight="600" color="tertiary">Mailbox</Text>

<Flex align="center" gap="6">
<Text size="12" weight="600" color="primary" mono>
{{ token.mailbox.slice(0, 4).toUpperCase() }}
</Text>
<Flex align="center" gap="3">
<div v-for="dot in 3" class="dot" />
</Flex>
<Text size="12" weight="600" color="primary" mono>
{{ token.mailbox.slice(-4).toUpperCase() }}
</Text>
<CopyButton :text="token.mailbox" size="12" />
</Flex>
</Flex>
</Flex>

<Button @click="emit('onClose')" wide type="tertiary" size="small">Close</Button>
</Flex>
</Modal>
</template>

<style module>
.card {
border-radius: 8px;
background: var(--op-5);

padding: 8px 12px 8px 8px;
}

.address_text {
flex: 1;
}

.receipient_icon {
border-radius: 50px;
border: 2px solid var(--op-5);
box-sizing: content-box;

padding: 2px;
}
</style>
Loading