Skip to content

Commit

Permalink
Add bridge info
Browse files Browse the repository at this point in the history
  • Loading branch information
GusevPM committed Sep 10, 2024
1 parent f855e11 commit 70abf58
Show file tree
Hide file tree
Showing 10 changed files with 304 additions and 25 deletions.
132 changes: 132 additions & 0 deletions components/modules/account/AccountBridgeInfo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<script setup>
/** Vendor */
import { DateTime } from "luxon"
/** Services */
import { getRollupHashSafeURL } from "~/services/utils/rollups"
import { space, spaces } from "@/services/utils"
/** UI */
import Button from "@/components/ui/Button.vue"
import { capitalize } from "vue"
const props = defineProps({
account: {
type: Object,
},
})
const showMore = ref(false)
</script>

<template>
<Flex direction="column" :class="$style.wrapper">
<Flex align="center" :class="$style.item">
<Text size="13" weight="600" color="secondary" :class="$style.key">Rollup</Text>

<NuxtLink :to="`/rollup/${getRollupHashSafeURL(account.bridge.rollup)}`">
<Flex align="center" gap="4" :class="$style.value">
<CopyButton :text="account.bridge.rollup" />
<Text size="13" weight="600" color="primary" mono>{{ account.bridge.rollup }}</Text>
<Icon name="arrow-narrow-up-right" size="10" color="secondary"></Icon>
</Flex>
</NuxtLink>
</Flex>

<Flex align="center" :class="$style.item">
<Text size="13" weight="600" color="secondary" :class="$style.key">Admin</Text>

<NuxtLink :to="`/account/${account.bridge.sudo}`">
<Flex align="center" gap="4" :class="$style.value">
<CopyButton :text="account.bridge.sudo" />
<Text size="13" weight="600" color="primary" mono>{{ account.bridge.sudo }}</Text>
<Icon name="arrow-narrow-up-right" size="10" color="secondary"></Icon>
</Flex>
</NuxtLink>
</Flex>

<Flex align="center" :class="$style.item">
<Text size="13" weight="600" color="secondary" :class="$style.key">Withdrawer</Text>

<NuxtLink :to="`/account/${account.bridge.withdrawer}`">
<Flex align="center" gap="4" :class="$style.value">
<CopyButton :text="account.bridge.withdrawer" />
<Text size="13" weight="600" color="primary" mono>{{ account.bridge.withdrawer }}</Text>
<Icon name="arrow-narrow-up-right" size="10" color="secondary"></Icon>
</Flex>
</NuxtLink>
</Flex>

<Flex align="center" :class="$style.item">
<Text size="13" weight="600" color="secondary" :class="$style.key">Asset</Text>

<Text size="13" weight="600" color="primary" mono :class="$style.value"> {{ account.bridge.asset.toUpperCase() }} </Text>
</Flex>

<Flex align="center" :class="$style.item">
<Text size="13" weight="600" color="secondary" :class="$style.key">Fee Asset</Text>

<Text size="13" weight="600" color="primary" mono :class="$style.value"> {{ account.bridge.fee_asset.toUpperCase() }} </Text>
</Flex>
</Flex>
</template>

<style module>
.wrapper {
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--op-5);
background: var(--op-3);
}
.item {
min-height: 36px;
padding: 0 12px;
&:last-child {
border-bottom: none;
}
}
.key {
min-width: 300px;
}
.value {
min-width: 0;
}
.overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.disable {
cursor: default;
pointer-events: none;
}
.show_more {
margin-top: -10px;
cursor: pointer;
}
@media (max-width: 650px) {
.item {
height: 54px;
flex-direction: column;
align-items: start;
justify-content: center;
gap: 8px;
overflow: hidden;
}
.value {
width: 100%;
}
}
</style>
27 changes: 24 additions & 3 deletions components/modules/account/AccountBridgeMetadata.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,31 @@ const showMore = ref(false)
</Flex>
</Flex>

<Flex align="center" :class="$style.item">
<Flex v-if="account.balances.length < 2" align="center" :class="$style.item">
<Text size="13" weight="600" color="secondary" :class="$style.key">Balance</Text>

<Text size="13" weight="600" color="primary" mono :class="$style.value"> {{ `${spaces(account.balances[0].value)} ${account.balances[0].currency.toUpperCase()}` }} </Text>
<Flex align="center" gap="8" :class="$style.value">
<CopyButton :text="account.balances[0].value" />

<Text size="13" weight="600" color="primary" mono> {{ spaces(account.balances[0].value) }} </Text>

<Text size="13" weight="600" color="secondary" mono> {{ account.balances[0].currency.toUpperCase() }} </Text>
</Flex>
<!-- <Text size="13" weight="600" color="primary" mono :class="$style.value"> {{ `${spaces(account.balances[0].value)} ${account.balances[0].currency.toUpperCase()}` }} </Text> -->
</Flex>

<Flex v-else align="start" :class="$style.item" :style="{ padding: '6px 12px' }">
<Text size="13" weight="600" color="secondary" :class="$style.key">Balance</Text>

<Flex direction="column" gap="14" :class="$style.value">
<Flex v-for="b in account.balances" align="center" gap="8">
<CopyButton :text="b.value" />

<Text size="13" weight="600" color="primary" mono> {{ spaces(b.value) }} </Text>

<Text size="13" weight="600" color="secondary" mono> {{ b.currency.toUpperCase() }} </Text>
</Flex>
</Flex>
</Flex>

<Flex align="center" :class="$style.item">
Expand Down Expand Up @@ -130,7 +151,7 @@ const showMore = ref(false)
}
.item {
height: 36px;
min-height: 36px;
padding: 0 12px;
Expand Down
27 changes: 24 additions & 3 deletions components/modules/account/AccountMetadata.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,31 @@ const showMore = ref(false)
</Flex>
</Flex>

<Flex align="center" :class="$style.item">
<Flex v-if="account.balances.length < 2" align="center" :class="$style.item">
<Text size="13" weight="600" color="secondary" :class="$style.key">Balance</Text>

<Text size="13" weight="600" color="primary" mono :class="$style.value"> {{ `${spaces(account.balances[0].value)} ${account.balances[0].currency.toUpperCase()}` }} </Text>
<Flex align="center" gap="8" :class="$style.value">
<CopyButton :text="account.balances[0].value" />

<Text size="13" weight="600" color="primary" mono> {{ spaces(account.balances[0].value) }} </Text>

<Text size="13" weight="600" color="secondary" mono> {{ account.balances[0].currency.toUpperCase() }} </Text>
</Flex>
<!-- <Text size="13" weight="600" color="primary" mono :class="$style.value"> {{ `${spaces(account.balances[0].value)} ${account.balances[0].currency.toUpperCase()}` }} </Text> -->
</Flex>

<Flex v-else align="start" :class="$style.item" :style="{ padding: '6px 12px' }">
<Text size="13" weight="600" color="secondary" :class="$style.key">Balance</Text>

<Flex direction="column" gap="14" :class="$style.value">
<Flex v-for="b in account.balances" align="center" gap="8">
<CopyButton :text="b.value" />

<Text size="13" weight="600" color="primary" mono> {{ spaces(b.value) }} </Text>

<Text size="13" weight="600" color="secondary" mono> {{ b.currency.toUpperCase() }} </Text>
</Flex>
</Flex>
</Flex>

<Flex align="center" :class="$style.item">
Expand Down Expand Up @@ -91,7 +112,7 @@ const showMore = ref(false)
}
.item {
height: 36px;
min-height: 36px;
padding: 0 12px;
Expand Down
2 changes: 1 addition & 1 deletion components/modules/rollup/RollupMetadata.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const showMore = ref(false)
<Flex align="center" :class="$style.item">
<Text size="13" weight="600" color="secondary" :class="$style.key">Celestia Namespace ID</Text>

<Flex align="center" gap="4" :class="$style.value">
<Flex align="center" gap="8" :class="$style.value">
<CopyButton :text="namespaceID" />

<NuxtLink :to="namespaceLink" target="_blank">
Expand Down
83 changes: 76 additions & 7 deletions components/sidebars/AccountSidebar.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<script setup>
/** Vendor */
import { DateTime } from "luxon"
/** API */
import { fetchAccountTransactions } from "@/services/api/account.js"
import { fetchAccountByHash, fetchAccountTransactions } from "@/services/api/account.js"
/** Services */
import { formatBytes, midHash, shortHash, spaces } from "@/services/utils"
import { midHash, spaces } from "@/services/utils"
import { getRollupHashSafeURL } from "@/services/utils/rollups"
/** Components */
import LinkToEntity from "@/components/shared/LinkToEntity.vue"
Expand Down Expand Up @@ -52,8 +50,13 @@ const fetchTxs = async () => {
watch(
() => props.show,
() => {
async () => {
if (props.show) {
if (props.account.is_bridge) {
const { data } = await fetchAccountByHash(props.account.hash)
props.account.bridge = data?.value?.bridge
}
fetchTxs()
} else {
txs.value = []
Expand Down Expand Up @@ -125,6 +128,72 @@ watch(
</NuxtLink>
</Flex>
<div v-if="account.bridge" :class="$style.divider" />
<Flex v-if="account.bridge" direction="column" gap="16">
<Text size="12" weight="600" color="primary">Bridge Info</Text>
<Flex align="center" justify="between">
<Text size="13" weight="600" color="tertiary">Rollup</Text>
<Flex align="center" gap="8">
<CopyButton :text="account.bridge?.rollup" />
<NuxtLink :to="`/rollup/${getRollupHashSafeURL(account.bridge?.rollup)}`" target="_blank">
<Flex align="center" gap="4">
<Text size="13" weight="600" color="primary">{{ midHash(account.bridge?.rollup) }}</Text>
<Icon name="arrow-narrow-up-right" size="10" color="secondary"></Icon>
</Flex>
</NuxtLink>
</Flex>
</Flex>
<Flex align="center" justify="between">
<Text size="13" weight="600" color="tertiary">Admin</Text>
<Flex align="center" gap="8">
<CopyButton :text="account.bridge?.sudo" />
<NuxtLink :to="`/account/${account.bridge?.sudo}`" target="_blank">
<Flex align="center" gap="4">
<Text size="13" weight="600" color="primary">{{ midHash(account.bridge?.sudo) }}</Text>
<Icon name="arrow-narrow-up-right" size="10" color="secondary"></Icon>
</Flex>
</NuxtLink>
</Flex>
</Flex>
<Flex align="center" justify="between">
<Text size="13" weight="600" color="tertiary">Withdrawer</Text>
<Flex align="center" gap="8">
<CopyButton :text="account.bridge?.withdrawer" />
<NuxtLink :to="`/account/${account.bridge?.withdrawer}`" target="_blank">
<Flex align="center" gap="4">
<Text size="13" weight="600" color="primary">{{ midHash(account.bridge?.withdrawer) }}</Text>
<Icon name="arrow-narrow-up-right" size="10" color="secondary"></Icon>
</Flex>
</NuxtLink>
</Flex>
</Flex>
<Flex align="center" justify="between">
<Text size="13" weight="600" color="tertiary">Asset</Text>
<Text size="13" weight="600" color="primary" tabular> {{ account.bridge?.asset.toUpperCase() }} </Text>
</Flex>
<Flex align="center" justify="between">
<Text size="13" weight="600" color="tertiary">Fee Asset</Text>
<Text size="13" weight="600" color="primary" tabular> {{ account.bridge?.fee_asset.toUpperCase() }} </Text>
</Flex>
</Flex>
<div :class="$style.divider" />
<Flex direction="column" gap="16">
Expand All @@ -149,7 +218,7 @@ watch(
</Flex>
</Flex>
</Flex>

<Button @click="emit('onClose')" :link="`/account/${account.hash}`" type="secondary" size="medium">Open Account</Button>
</Flex>
</Sidebar>
Expand Down
Loading

0 comments on commit 70abf58

Please sign in to comment.