@instadapp/avocado-base 0.0.0-dev.424dd71 → 0.0.0-dev.4546ed9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/npm-publish-dev.yml +2 -5
- package/.vscode/settings.json +68 -0
- package/abi/multisigAgnosticForwarder.json +938 -0
- package/assets/images/icons/check.svg +3 -0
- package/assets/images/icons/copy.svg +9 -2
- package/assets/images/icons/stars.svg +4 -0
- package/components/ActionLogo.vue +32 -30
- package/components/ActionMetadata.vue +30 -20
- package/components/Address.vue +74 -0
- package/components/AuthorityAvatar.vue +4 -5
- package/components/ChainLogo.vue +10 -17
- package/components/CopyClipboard.vue +16 -38
- package/components/metadata/CrossTransfer.vue +29 -32
- package/components/metadata/Signers.vue +11 -55
- package/components/metadata/Swap.vue +29 -30
- package/components/metadata/Transfer.vue +25 -27
- package/contracts/MultisigAgnosticForwarder.ts +1423 -0
- package/contracts/factories/MultisigAgnosticForwarder__factory.ts +2135 -0
- package/contracts/factories/index.ts +1 -0
- package/contracts/index.ts +2 -0
- package/eslint.config.mjs +19 -0
- package/nuxt.config.ts +7 -2
- package/package.json +18 -13
- package/utils/formatter.ts +1 -1
- package/utils/metadata.ts +104 -8
- package/utils/network.ts +421 -265
- package/utils/utils.d.ts +14 -2
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
|
|
2
2
|
xmlns="http://www.w3.org/2000/svg">
|
|
3
|
-
<
|
|
4
|
-
|
|
3
|
+
<g clip-path="url(#clip0_854_51869)">
|
|
4
|
+
<path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M3.33301 10.0002H2.66634C2.31272 10.0002 1.97358 9.85969 1.72353 9.60964C1.47348 9.35959 1.33301 9.02045 1.33301 8.66683V2.66683C1.33301 2.31321 1.47348 1.97407 1.72353 1.72402C1.97358 1.47397 2.31272 1.3335 2.66634 1.3335H8.66634C9.01996 1.3335 9.3591 1.47397 9.60915 1.72402C9.8592 1.97407 9.99967 2.31321 9.99967 2.66683V3.3335" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</g>
|
|
7
|
+
<defs>
|
|
8
|
+
<clipPath id="clip0_854_51869">
|
|
9
|
+
<rect width="16" height="16" fill="white"/>
|
|
10
|
+
</clipPath>
|
|
11
|
+
</defs>
|
|
5
12
|
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M11.3112 1.14526L12.8087 5.19216L16.8556 6.68965L12.8087 8.18714L11.3112 12.234L9.8137 8.18714L5.76681 6.68965L9.8137 5.19216L11.3112 1.14526Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M4.38071 10.3859L5.68884 12.312L7.61493 13.6201L5.68884 14.9283L4.38071 16.8544L3.07258 14.9283L1.14648 13.6201L3.07258 12.312L4.38071 10.3859Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import RefreshSVG from '
|
|
3
|
-
import BridgeSVG from '
|
|
4
|
-
import CrossTransferSVG from '
|
|
5
|
-
import TransferSVG from '
|
|
6
|
-
import PlusCircleSVG from '
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
2
|
+
import RefreshSVG from '../assets/images/icons/refresh.svg'
|
|
3
|
+
import BridgeSVG from '../assets/images/icons/bridge.svg'
|
|
4
|
+
import CrossTransferSVG from '../assets/images/icons/cross-transfer.svg'
|
|
5
|
+
import TransferSVG from '../assets/images/icons/transfer.svg'
|
|
6
|
+
import PlusCircleSVG from '../assets/images/icons/plus-circle.svg'
|
|
7
|
+
import StarsSVG from '../assets/images/icons/stars.svg'
|
|
8
|
+
import Trash2SVG from '../assets/images/icons/trash-2.svg'
|
|
9
|
+
import ChangeThresholdSVG from '../assets/images/icons/change-threshold.svg'
|
|
10
|
+
import DappSVG from '../assets/images/icons/dapp.svg'
|
|
11
|
+
import DeploySVG from '../assets/images/icons/deploy.svg'
|
|
12
|
+
import GasSVG from '../assets/images/icons/gas.svg'
|
|
13
|
+
import InstadappProSVG from '../assets/images/icons/instadapp-pro.svg'
|
|
14
|
+
import PermitSignSVG from '../assets/images/icons/permit-sign.svg'
|
|
15
|
+
import RejectProposalSVG from '../assets/images/icons/reject-proposal.svg'
|
|
16
|
+
import UpgradeSVG from '../assets/images/icons/upgrade.svg'
|
|
17
|
+
import HammerSVG from '../assets/images/icons/hammer.svg'
|
|
17
18
|
|
|
18
19
|
defineProps<{
|
|
19
20
|
action: MetadataTypes
|
|
@@ -22,19 +23,20 @@ defineProps<{
|
|
|
22
23
|
</script>
|
|
23
24
|
|
|
24
25
|
<template>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
26
|
+
<RefreshSVG class="text-primary" v-if="action === 'swap'" />
|
|
27
|
+
<BridgeSVG class="text-primary" v-else-if="action === 'bridge'" />
|
|
28
|
+
<CrossTransferSVG class="text-primary" v-else-if="action === 'cross-transfer'" />
|
|
29
|
+
<TransferSVG class="text-primary" v-else-if="action === 'transfer'" />
|
|
30
|
+
<PlusCircleSVG class="text-primary" v-else-if="action === 'add-signers' || (action === 'auth' && !remove)" />
|
|
31
|
+
<Trash2SVG class="text-[#EB5757]" v-else-if="action === 'remove-signers' || (action === 'auth' && remove)" />
|
|
32
|
+
<RejectProposalSVG class="text-[#EB5757]" v-else-if="action === 'rejection'" />
|
|
33
|
+
<ChangeThresholdSVG v-else-if="action === 'change-threshold'" />
|
|
34
|
+
<DappSVG v-else-if="action === 'dapp'" />
|
|
35
|
+
<DeploySVG v-else-if="action === 'deploy'" />
|
|
36
|
+
<GasSVG v-else-if="action === 'gas-topup'" />
|
|
37
|
+
<InstadappProSVG v-else-if="action === 'instadapp-pro'" />
|
|
38
|
+
<PermitSignSVG v-else-if="action === 'permit2'" />
|
|
39
|
+
<UpgradeSVG v-else-if="action === 'upgrade'" />
|
|
40
|
+
<HammerSVG v-else-if="action === 'tx-builder'" />
|
|
41
|
+
<StarsSVG v-else-if="action === 'mass'" />
|
|
40
42
|
</template>
|
|
@@ -3,15 +3,14 @@ const props = defineProps<{
|
|
|
3
3
|
metadata: {
|
|
4
4
|
type: MetadataTypes
|
|
5
5
|
[key: string]: any
|
|
6
|
-
}
|
|
7
|
-
chain_id: number | string
|
|
8
|
-
compact?: boolean
|
|
9
|
-
tokens?: ITokenPrice[]
|
|
10
|
-
}>()
|
|
11
|
-
|
|
12
|
-
provide('compact', props.compact);
|
|
13
|
-
provide('tokens', props.tokens);
|
|
6
|
+
}
|
|
7
|
+
chain_id: number | string
|
|
8
|
+
compact?: boolean
|
|
9
|
+
tokens?: ITokenPrice[]
|
|
10
|
+
}>()
|
|
14
11
|
|
|
12
|
+
provide('compact', props.compact)
|
|
13
|
+
provide('tokens', props.tokens)
|
|
15
14
|
</script>
|
|
16
15
|
|
|
17
16
|
<template>
|
|
@@ -20,10 +19,14 @@ provide('tokens', props.tokens);
|
|
|
20
19
|
<MetadataCrossTransfer v-if="metadata.type === 'cross-transfer'" :metadata="metadata" :chain_id="chain_id" />
|
|
21
20
|
<MetadataGasTopup v-if="metadata.type === 'gas-topup'" :metadata="metadata" :chain_id="chain_id" />
|
|
22
21
|
<MetadataSwap v-if="metadata.type === 'swap'" :metadata="metadata" :chain_id="chain_id" />
|
|
23
|
-
<MetadataBridge v-if="metadata.type === 'bridge'" :metadata="metadata" :chain_id="chain_id" />
|
|
22
|
+
<MetadataBridge v-if="metadata.type === 'bridge' || metadata.type === 'bridge-v2'" :metadata="metadata" :chain_id="chain_id" />
|
|
24
23
|
<MetadataPermit2 v-if="metadata.type === 'permit2'" :metadata="metadata" :chain_id="chain_id" />
|
|
25
24
|
|
|
26
|
-
<div
|
|
25
|
+
<div v-if="metadata.type === 'mass'">
|
|
26
|
+
Chain Agnostic Payments
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div v-if="metadata.type === 'import'" class="text-left w-fit capitalize">
|
|
27
30
|
Import from {{ metadata.protocol }} ({{ (formatUsd(fromWei(metadata.valueInUsd, 10))) }})
|
|
28
31
|
</div>
|
|
29
32
|
|
|
@@ -41,8 +44,10 @@ provide('tokens', props.tokens);
|
|
|
41
44
|
</div>
|
|
42
45
|
<div v-if="metadata.type === 'auth'" class="self-start capitalize flex gap-3">
|
|
43
46
|
Authority {{ metadata.remove ? 'Removed' : 'Added' }}:
|
|
44
|
-
<a
|
|
45
|
-
|
|
47
|
+
<a
|
|
48
|
+
class="text-primary break-all" :href="getExplorerUrl(metadata.chainId, `/address/${metadata.address}`)"
|
|
49
|
+
target="_blank"
|
|
50
|
+
>
|
|
46
51
|
{{ shortenHash(metadata.address) }}
|
|
47
52
|
</a>
|
|
48
53
|
<div class="flex gap-3">
|
|
@@ -60,19 +65,24 @@ provide('tokens', props.tokens);
|
|
|
60
65
|
{{ metadata?.castDetails }}
|
|
61
66
|
</div>
|
|
62
67
|
|
|
63
|
-
<MetadataSigners
|
|
64
|
-
|
|
68
|
+
<MetadataSigners
|
|
69
|
+
v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'"
|
|
70
|
+
:chain_id="chain_id" :metadata="metadata"
|
|
71
|
+
:compact="compact"
|
|
72
|
+
/>
|
|
65
73
|
|
|
66
74
|
<div v-if="metadata.type === 'change-threshold'" class="text-left w-fit">
|
|
67
75
|
Change Threshold to {{ metadata.count }}
|
|
68
76
|
</div>
|
|
69
77
|
|
|
70
|
-
<div
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
78
|
+
<div
|
|
79
|
+
v-if="metadata.type === 'rejection'" v-tippy="{
|
|
80
|
+
content: metadata.id,
|
|
81
|
+
maxWidth: 'none',
|
|
82
|
+
interactive: true,
|
|
83
|
+
}" class="text-left w-fit"
|
|
84
|
+
>
|
|
75
85
|
{{ shortenHash(metadata.id) }}
|
|
76
86
|
</div>
|
|
77
87
|
</div>
|
|
78
|
-
</template>
|
|
88
|
+
</template>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { Address } from 'viem'
|
|
3
|
+
|
|
4
|
+
const props = defineProps<{
|
|
5
|
+
address: Address | string
|
|
6
|
+
hideContact?: boolean
|
|
7
|
+
hideCopy?: boolean
|
|
8
|
+
showFull?: boolean
|
|
9
|
+
to?: string
|
|
10
|
+
}>()
|
|
11
|
+
|
|
12
|
+
const nuxtApp = useNuxtApp()
|
|
13
|
+
|
|
14
|
+
console.log()
|
|
15
|
+
|
|
16
|
+
// @ts-expect-error
|
|
17
|
+
const contacts = computed(() => nuxtApp.$contacts?.value)
|
|
18
|
+
|
|
19
|
+
const contactName = computed(() => {
|
|
20
|
+
if (!contacts?.value)
|
|
21
|
+
return null
|
|
22
|
+
|
|
23
|
+
return contacts.value.find(
|
|
24
|
+
// @ts-expect-error
|
|
25
|
+
contract => contract.address?.toLowerCase() === props.address.toLowerCase(),
|
|
26
|
+
)?.name
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
function onMouseEnter() {
|
|
30
|
+
const elements = document.querySelectorAll(`[data-highlight-target="${props.address}"]`)
|
|
31
|
+
|
|
32
|
+
elements.forEach((element) => {
|
|
33
|
+
element.classList.add('address-active')
|
|
34
|
+
})
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function onMouseLeave() {
|
|
38
|
+
const elements = document.querySelectorAll(`[data-highlight-target="${props.address}"]`)
|
|
39
|
+
|
|
40
|
+
elements.forEach((element) => {
|
|
41
|
+
element.classList.remove('address-active')
|
|
42
|
+
})
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const NuxtLink = resolveComponent('NuxtLink')
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<template>
|
|
49
|
+
<div class="flex items-center leading-[1.3339em]">
|
|
50
|
+
<Component
|
|
51
|
+
:is="props.to ? NuxtLink : 'span'"
|
|
52
|
+
v-tippy="{ content: showFull ? undefined : address, maxWidth: 'none', placement: 'bottom' }"
|
|
53
|
+
:external="props.to ? true : undefined"
|
|
54
|
+
:target="props.to ? '_blank' : undefined"
|
|
55
|
+
:to="props.to ? props.to : undefined"
|
|
56
|
+
:class="props.to ? 'text-primary' : ''"
|
|
57
|
+
class="px-1 border border-dashed border-opacity-0 -ml-1 border-yellow-500" :data-highlight-target="address"
|
|
58
|
+
@mouseenter="onMouseEnter" @mouseleave="onMouseLeave"
|
|
59
|
+
>
|
|
60
|
+
{{ showFull ? address : shortenHash(address) }}
|
|
61
|
+
</Component>
|
|
62
|
+
<span v-if="contactName && !hideContact" class="leading-[inherit]">
|
|
63
|
+
({{ contactName }})
|
|
64
|
+
</span>
|
|
65
|
+
<CopyClipboard v-if="!hideCopy" class="ml-1.5" :text="address" />
|
|
66
|
+
</div>
|
|
67
|
+
</template>
|
|
68
|
+
|
|
69
|
+
<style>
|
|
70
|
+
.address-active {
|
|
71
|
+
@apply border-opacity-100 bg-yellow-500/10;
|
|
72
|
+
border-radius: 0.375rem;
|
|
73
|
+
}
|
|
74
|
+
</style>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
// @ts-expect-error
|
|
2
3
|
import * as XXH from 'xxhashjs';
|
|
3
4
|
|
|
4
5
|
defineProps<{
|
|
@@ -19,11 +20,9 @@ function generateColor(address: string): string {
|
|
|
19
20
|
</script>
|
|
20
21
|
|
|
21
22
|
<template>
|
|
22
|
-
<svg
|
|
23
|
-
:
|
|
24
|
-
|
|
25
|
-
}" width="30" height="30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30"
|
|
26
|
-
>
|
|
23
|
+
<svg :style="{
|
|
24
|
+
color: generateColor(address),
|
|
25
|
+
}" width="30" height="30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
|
|
27
26
|
<g fill="currentColor" :clip-path="`url(#${randomId})`">
|
|
28
27
|
<rect width="30" height="30" fill-opacity=".4" rx="15" />
|
|
29
28
|
<ellipse cx="15.004" cy="26.399" rx="11.4" ry="6.6" />
|
package/components/ChainLogo.vue
CHANGED
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<path fill="#97A2B7" fill-rule="evenodd"
|
|
12
|
-
d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
|
|
13
|
-
clip-rule="evenodd" />
|
|
14
|
-
</svg>
|
|
15
|
-
</template>
|
|
16
|
-
<span v-else-if="stroke" class="outline stroke-color dark:outline-[#161E2D] outline-[#F8FAFC] outline-2 shrink-0 outline outline-offset-[-1.5px] rounded-full">
|
|
17
|
-
<img class="w-full h-full" :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`"/>
|
|
2
|
+
<svg v-if="isNetworkNotAvailable" v-bind="$attrs" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
|
3
|
+
<rect width="20" height="20" fill="#334155" rx="10" />
|
|
4
|
+
<path fill="#97A2B7" fill-rule="evenodd"
|
|
5
|
+
d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
|
|
6
|
+
clip-rule="evenodd" />
|
|
7
|
+
</svg>
|
|
8
|
+
<span v-else-if="stroke"
|
|
9
|
+
class="outline stroke-color outline-[#161E2D] outline-2 shrink-0 outline outline-offset-[-1.5px] rounded-full">
|
|
10
|
+
<img class="w-full h-full" :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`" />
|
|
18
11
|
</span>
|
|
19
|
-
|
|
12
|
+
<img v-else :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`" />
|
|
20
13
|
</template>
|
|
21
14
|
|
|
22
15
|
<script lang="ts" setup>
|
|
@@ -1,56 +1,26 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import CopySVG from '
|
|
3
|
-
import
|
|
2
|
+
import CopySVG from '../assets/images/icons/copy.svg'
|
|
3
|
+
import CheckSVG from '../assets/images/icons/check-circle.svg'
|
|
4
4
|
|
|
5
5
|
defineProps<{
|
|
6
6
|
text: string
|
|
7
|
-
iconOnly?: boolean
|
|
8
|
-
successText?: string
|
|
9
7
|
}>()
|
|
10
8
|
const { copy, copied } = useClipboard()
|
|
11
|
-
const slots = useSlots()
|
|
12
9
|
</script>
|
|
13
10
|
|
|
14
11
|
<template>
|
|
15
|
-
<button
|
|
16
|
-
class="text-slate-400 font-semibold inline-flex items-center gap-2.5"
|
|
17
|
-
@click.stop="copy(text)"
|
|
18
|
-
>
|
|
19
|
-
<Transition mode="out-in" name="slide-left">
|
|
20
|
-
<span v-if="copied && !iconOnly"> {{ successText || 'Copied' }} </span>
|
|
21
|
-
<span v-else-if="slots.content">
|
|
22
|
-
<slot name="content" />
|
|
23
|
-
</span>
|
|
24
|
-
</Transition>
|
|
25
|
-
|
|
12
|
+
<button type="button" class="inline-flex copy-btn" @click.stop="copy(text)">
|
|
26
13
|
<Transition mode="out-in" name="slide">
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
class="w-4 h-4 shrink-0 dark:text-slate-900 text-white svg-circle"
|
|
30
|
-
/>
|
|
31
|
-
<slot v-else-if="slots.copy" name="copy" />
|
|
32
|
-
<slot v-else name="copy-icon">
|
|
33
|
-
<CopySVG />
|
|
34
|
-
</slot>
|
|
14
|
+
<CheckSVG v-if="copied" v-tippy="{ content: 'Copied!' }" class="svg-circle text-slate-850 size-[1em]" />
|
|
15
|
+
<CopySVG v-else v-tippy="{ content: 'Copy Address' }" class="text-slate-400 size-[1em]" />
|
|
35
16
|
</Transition>
|
|
36
17
|
</button>
|
|
37
18
|
</template>
|
|
38
19
|
|
|
39
20
|
<style scoped>
|
|
40
|
-
.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.slide-left-enter-from {
|
|
46
|
-
opacity: 0;
|
|
47
|
-
transform: translateX(30px);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.slide-left-leave-to {
|
|
51
|
-
opacity: 0;
|
|
52
|
-
transform: translateX(-30px);
|
|
53
|
-
}
|
|
21
|
+
.copy-btn:focus:not(:focus-visible) {
|
|
22
|
+
outline: none;
|
|
23
|
+
}
|
|
54
24
|
|
|
55
25
|
.slide-enter-active,
|
|
56
26
|
.slide-leave-active {
|
|
@@ -61,4 +31,12 @@ const slots = useSlots()
|
|
|
61
31
|
.slide-leave-to {
|
|
62
32
|
opacity: 0;
|
|
63
33
|
}
|
|
34
|
+
|
|
35
|
+
.svg-circle > path:first-child {
|
|
36
|
+
@apply stroke-gray-400 fill-gray-400;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.svg-circle.darker > path:first-child {
|
|
40
|
+
@apply fill-gray-700 stroke-none text-gray-500;
|
|
41
|
+
}
|
|
64
42
|
</style>
|
|
@@ -1,49 +1,52 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
|
|
3
2
|
const props = defineProps<{
|
|
4
|
-
metadata: any
|
|
3
|
+
metadata: any
|
|
5
4
|
chain_id: number | string
|
|
6
|
-
}>()
|
|
5
|
+
}>()
|
|
7
6
|
|
|
8
|
-
const compact = inject('compact')
|
|
9
|
-
const tokens = inject<ITokenPrice[]>('tokens')
|
|
7
|
+
const compact = inject('compact')
|
|
8
|
+
const tokens = inject<ITokenPrice[]>('tokens')
|
|
10
9
|
|
|
11
10
|
const fromToken = asyncComputed(() => {
|
|
12
|
-
if (!props?.chain_id)
|
|
11
|
+
if (!props?.chain_id)
|
|
12
|
+
return null
|
|
13
13
|
|
|
14
|
-
if (Array.isArray(tokens) && !tokens.length)
|
|
14
|
+
if (Array.isArray(tokens) && !tokens.length)
|
|
15
|
+
return null
|
|
15
16
|
|
|
16
17
|
return fetchTokenByAddress(
|
|
17
18
|
props.metadata?.fromToken,
|
|
18
19
|
props?.chain_id,
|
|
19
|
-
tokens
|
|
20
|
-
)
|
|
21
|
-
})
|
|
20
|
+
tokens,
|
|
21
|
+
)
|
|
22
|
+
})
|
|
22
23
|
|
|
23
24
|
const toToken = asyncComputed(() => {
|
|
24
|
-
if (!props?.metadata?.toChainId)
|
|
25
|
+
if (!props?.metadata?.toChainId)
|
|
26
|
+
return null
|
|
25
27
|
|
|
26
|
-
if (Array.isArray(tokens) && !tokens.length)
|
|
28
|
+
if (Array.isArray(tokens) && !tokens.length)
|
|
29
|
+
return null
|
|
27
30
|
|
|
28
|
-
return fetchTokenByAddress(props.metadata?.toToken, props?.metadata?.toChainId, tokens)
|
|
29
|
-
})
|
|
31
|
+
return fetchTokenByAddress(props.metadata?.toToken, props?.metadata?.toChainId, tokens)
|
|
32
|
+
})
|
|
30
33
|
|
|
31
34
|
const formattedToAmount = computed(() =>
|
|
32
35
|
formatDecimal(
|
|
33
|
-
fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
|
|
34
|
-
)
|
|
35
|
-
)
|
|
36
|
+
fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed(),
|
|
37
|
+
),
|
|
38
|
+
)
|
|
36
39
|
</script>
|
|
37
40
|
|
|
38
41
|
<template>
|
|
39
|
-
<div class="h-[60px]"
|
|
42
|
+
<div v-if="!fromToken" class="h-[60px]">
|
|
40
43
|
<div class="rounded-5 w-24 h-4 loading-box" />
|
|
41
44
|
</div>
|
|
42
|
-
<div class="flex gap-5 flex-col"
|
|
45
|
+
<div v-else class="flex gap-5 flex-col">
|
|
43
46
|
<div class="flex items-center gap-5">
|
|
44
47
|
<span v-if="!compact" class="capitalize text-xs sm:text-sm">Cross-chain send</span>
|
|
45
48
|
<span class="inline-flex gap-2.5 items-center">
|
|
46
|
-
<img width="20" height="20" class="w-5 h-5" :src="fromToken?.logo_url"
|
|
49
|
+
<img width="20" height="20" class="w-5 h-5" :src="fromToken?.logo_url">
|
|
47
50
|
{{ formattedToAmount }}
|
|
48
51
|
<span class="uppercase">{{ fromToken?.symbol }}</span>
|
|
49
52
|
</span>
|
|
@@ -59,18 +62,12 @@ const formattedToAmount = computed(() =>
|
|
|
59
62
|
|
|
60
63
|
<span class="flex items-center gap-2.5">
|
|
61
64
|
<ChainLogo class="w-5" :chain="metadata?.toChainId" />
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
metadata?.toChainId,
|
|
69
|
-
`/address/${metadata.receiver}`
|
|
70
|
-
)
|
|
71
|
-
"
|
|
72
|
-
>{{ shortenHash(metadata.receiver) }}</a
|
|
73
|
-
>
|
|
65
|
+
<Address
|
|
66
|
+
:address="metadata.receiver" :to="getExplorerUrl(
|
|
67
|
+
metadata?.toChainId,
|
|
68
|
+
`/address/${metadata.receiver}`,
|
|
69
|
+
)"
|
|
70
|
+
/>
|
|
74
71
|
on
|
|
75
72
|
<span>{{ chainIdToName(metadata?.toChainId) }}</span>
|
|
76
73
|
</span>
|
|
@@ -1,63 +1,19 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { Tippy } from 'vue-tippy'
|
|
3
|
-
import Info2 from '~/assets/images/icons/info-2.svg'
|
|
4
|
-
|
|
5
2
|
defineProps<{
|
|
3
|
+
chain_id: number | string
|
|
6
4
|
metadata: {
|
|
7
|
-
type: MetadataTypes
|
|
5
|
+
type: MetadataTypes
|
|
8
6
|
[key: string]: any
|
|
9
|
-
}
|
|
10
|
-
compact?: boolean
|
|
11
|
-
}>()
|
|
7
|
+
}
|
|
8
|
+
compact?: boolean
|
|
9
|
+
}>()
|
|
12
10
|
</script>
|
|
13
11
|
|
|
14
12
|
<template>
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<template #default>
|
|
22
|
-
<p class="text-xs leading-5 text-slate-500 dark:text-slate-400">
|
|
23
|
-
{{ shortenHash(address, compact ? 2 : 4) }}
|
|
24
|
-
</p>
|
|
25
|
-
</template>
|
|
26
|
-
<template #content>
|
|
27
|
-
{{ address }}
|
|
28
|
-
</template>
|
|
29
|
-
</Tippy>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
<div v-else class="flex gap-2 flex-wrap items-center">
|
|
33
|
-
<div v-for="address of [metadata.addresses[0], metadata.addresses[1]].filter(Boolean)" :key="address" class="flex gap-2 rounded-full bg-slate-100 dark:bg-slate-800 justify-start items-center px-2 py-1.5">
|
|
34
|
-
<AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
|
|
35
|
-
|
|
36
|
-
<Tippy max-width="none" interactive>
|
|
37
|
-
<template #default>
|
|
38
|
-
<p class="text-xs leading-5 text-slate-400">
|
|
39
|
-
{{ shortenHash(address, 2) }}
|
|
40
|
-
</p>
|
|
41
|
-
</template>
|
|
42
|
-
<template #content>
|
|
43
|
-
{{ address }}
|
|
44
|
-
</template>
|
|
45
|
-
</Tippy>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<Tippy max-width="none" interactive tag="button" content-tag="div" content-class="content-wrapper">
|
|
49
|
-
<template #default>
|
|
50
|
-
<Info2 class="w-[16px] h-[16px] text-slate-500 rounded-full" />
|
|
51
|
-
</template>
|
|
52
|
-
<template #content>
|
|
53
|
-
<ul class="flex flex-col gap-2.5">
|
|
54
|
-
<li v-for="address in metadata.addresses" :key="address" class="flex text-xs text-slate-400 items-center gap-2.5">
|
|
55
|
-
<AuthorityAvatar class="shrink-0 w-5 h-5" :address="address" />
|
|
56
|
-
{{ address }}
|
|
57
|
-
</li>
|
|
58
|
-
</ul>
|
|
59
|
-
</template>
|
|
60
|
-
</Tippy>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
13
|
+
<ul class="flex gap-2 flex-wrap">
|
|
14
|
+
<li v-for="address in metadata.addresses" :key="address" class="flex rounded-2xl gap-2 bg-gray-900 w-fit items-center py-1.5 px-2.5">
|
|
15
|
+
<AuthorityAvatar class="size-5" :address="address" />
|
|
16
|
+
<Address :address="address" />
|
|
17
|
+
</li>
|
|
18
|
+
</ul>
|
|
63
19
|
</template>
|