@instadapp/avocado-base 0.0.0-dev.fa14908 → 0.0.0-dev.fb3d631
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/abi/multisigForwarder.json +697 -0
- package/assets/images/icons/hammer.svg +5 -0
- package/assets/images/icons/info-2.svg +12 -0
- package/assets/images/icons/stars.svg +4 -0
- package/components/ActionLogo.vue +32 -28
- package/components/ActionMetadata.vue +31 -21
- package/components/AuthorityAvatar.vue +4 -5
- package/components/ChainLogo.vue +10 -17
- package/components/CopyClipboard.vue +5 -11
- package/components/metadata/CrossTransfer.vue +11 -3
- package/components/metadata/Signers.vue +37 -16
- package/components/metadata/Swap.vue +22 -29
- package/contracts/MultisigForwarder.ts +859 -0
- package/contracts/factories/MultisigForwarder__factory.ts +721 -0
- package/contracts/factories/index.ts +1 -0
- package/contracts/index.ts +2 -0
- package/package.json +10 -7
- package/utils/formatter.ts +1 -1
- package/utils/metadata.ts +133 -52
- package/utils/network.ts +265 -37
- package/utils/utils.d.ts +15 -7
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_13856_490518)">
|
|
3
|
+
<path d="M7 -6.11959e-07C3.13401 -9.49935e-07 9.49935e-07 3.13401 6.11959e-07 7C2.73984e-07 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 -2.73984e-07 7 -6.11959e-07Z" fill="currentColor"/>
|
|
4
|
+
<path d="M7.00391 9.72217L7.00391 7.38883" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M7.00391 4.27783L6.99391 4.27783" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</g>
|
|
7
|
+
<defs>
|
|
8
|
+
<clipPath id="clip0_13856_490518">
|
|
9
|
+
<rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)"/>
|
|
10
|
+
</clipPath>
|
|
11
|
+
</defs>
|
|
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,18 +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
|
|
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'
|
|
16
18
|
|
|
17
19
|
defineProps<{
|
|
18
20
|
action: MetadataTypes
|
|
@@ -21,18 +23,20 @@ defineProps<{
|
|
|
21
23
|
</script>
|
|
22
24
|
|
|
23
25
|
<template>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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'" />
|
|
38
42
|
</template>
|
|
@@ -23,12 +23,20 @@ provide('tokens', props.tokens);
|
|
|
23
23
|
<MetadataBridge v-if="metadata.type === 'bridge'" :metadata="metadata" :chain_id="chain_id" />
|
|
24
24
|
<MetadataPermit2 v-if="metadata.type === 'permit2'" :metadata="metadata" :chain_id="chain_id" />
|
|
25
25
|
|
|
26
|
+
<div v-if="metadata.type === 'mass'">
|
|
27
|
+
Chain Agnostic Payments
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="text-left w-fit capitalize" v-if="metadata.type === 'import'">
|
|
31
|
+
Import from {{ metadata.protocol }} ({{ (formatUsd(fromWei(metadata.valueInUsd, 10))) }})
|
|
32
|
+
</div>
|
|
33
|
+
|
|
26
34
|
<div v-if="metadata.type === 'upgrade'" class="self-start">
|
|
27
35
|
Wallet upgraded to {{ metadata?.version }}
|
|
28
36
|
</div>
|
|
29
37
|
<div v-if="metadata.type === 'dapp'" class="self-start flex items-center gap-2 text-primary">
|
|
30
38
|
<a :href="metadata?.url" target="_blank" rel="noopener noreferrer">{{
|
|
31
|
-
metadata?.name
|
|
39
|
+
metadata?.name || metadata?.url
|
|
32
40
|
}}</a>
|
|
33
41
|
<SvgoExternalLink />
|
|
34
42
|
</div>
|
|
@@ -37,36 +45,38 @@ provide('tokens', props.tokens);
|
|
|
37
45
|
</div>
|
|
38
46
|
<div v-if="metadata.type === 'auth'" class="self-start capitalize flex gap-3">
|
|
39
47
|
Authority {{ metadata.remove ? 'Removed' : 'Added' }}:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
<a class="text-primary break-all" :href="getExplorerUrl(metadata.chainId, `/address/${metadata.address}`)"
|
|
49
|
+
target="_blank">
|
|
50
|
+
{{ shortenHash(metadata.address) }}
|
|
51
|
+
</a>
|
|
52
|
+
<div class="flex gap-3">
|
|
53
|
+
<ChainLogo class="w-5 h-5" :chain="metadata.chainId" />
|
|
54
|
+
{{ chainIdToName(metadata.chainId) }}
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div v-if="metadata.type === 'tx-builder'" class="self-start capitalize flex gap-3">
|
|
58
|
+
<span v-if="!compact">
|
|
59
|
+
Transaction Builder
|
|
60
|
+
</span> ({{ metadata?.actionCount }} {{ toBN(metadata?.actionCount).lt(2) ? 'action' : 'actions' }})
|
|
51
61
|
</div>
|
|
52
62
|
<div v-if="metadata.type === 'instadapp-pro'" class="self-start capitalize flex gap-3">
|
|
53
63
|
Instadapp Pro |
|
|
54
64
|
{{ metadata?.castDetails }}
|
|
55
65
|
</div>
|
|
56
66
|
|
|
57
|
-
<MetadataSigners v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" :metadata="metadata"
|
|
67
|
+
<MetadataSigners v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" :metadata="metadata"
|
|
68
|
+
:compact="compact" />
|
|
58
69
|
|
|
59
|
-
|
|
60
|
-
|
|
70
|
+
<div v-if="metadata.type === 'change-threshold'" class="text-left w-fit">
|
|
71
|
+
Change Threshold to {{ metadata.count }}
|
|
61
72
|
</div>
|
|
62
73
|
|
|
63
74
|
<div v-tippy="{
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
{{ shortenHash(metadata.id) }}
|
|
75
|
+
content: metadata.id,
|
|
76
|
+
maxWidth: 'none',
|
|
77
|
+
interactive: true,
|
|
78
|
+
}" v-if="metadata.type === 'rejection'" class="text-left w-fit">
|
|
79
|
+
{{ shortenHash(metadata.id) }}
|
|
70
80
|
</div>
|
|
71
81
|
</div>
|
|
72
82
|
</template>
|
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import CopySVG from '
|
|
3
|
-
import CheckCircle from '
|
|
2
|
+
import CopySVG from '../assets/images/icons/copy.svg'
|
|
3
|
+
import CheckCircle from '../assets/images/icons/check-circle.svg'
|
|
4
4
|
|
|
5
5
|
defineProps<{
|
|
6
6
|
text: string
|
|
@@ -12,22 +12,16 @@ const slots = useSlots()
|
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
14
|
<template>
|
|
15
|
-
<button
|
|
16
|
-
class="text-slate-400 font-semibold inline-flex items-center gap-2.5"
|
|
17
|
-
@click.stop="copy(text)"
|
|
18
|
-
>
|
|
15
|
+
<button class="text-slate-400 font-semibold inline-flex items-center gap-2.5" @click.stop="copy(text)">
|
|
19
16
|
<Transition mode="out-in" name="slide-left">
|
|
20
|
-
<span v-if="copied && !iconOnly"> {{ successText || 'Copied' }}
|
|
17
|
+
<span v-if="copied && !iconOnly"> {{ successText || 'Copied' }} </span>
|
|
21
18
|
<span v-else-if="slots.content">
|
|
22
19
|
<slot name="content" />
|
|
23
20
|
</span>
|
|
24
21
|
</Transition>
|
|
25
22
|
|
|
26
23
|
<Transition mode="out-in" name="slide">
|
|
27
|
-
<CheckCircle
|
|
28
|
-
v-if="copied"
|
|
29
|
-
class="w-4 h-4 shrink-0 dark:text-slate-900 text-white svg-circle"
|
|
30
|
-
/>
|
|
24
|
+
<CheckCircle v-if="copied" class="w-4 h-4 shrink-0 dark:text-slate-900 text-white svg-circle" />
|
|
31
25
|
<slot v-else-if="slots.copy" name="copy" />
|
|
32
26
|
<slot v-else name="copy-icon">
|
|
33
27
|
<CopySVG />
|
|
@@ -20,9 +20,17 @@ const fromToken = asyncComputed(() => {
|
|
|
20
20
|
);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
|
-
const
|
|
23
|
+
const toToken = asyncComputed(() => {
|
|
24
|
+
if (!props?.metadata?.toChainId) return null;
|
|
25
|
+
|
|
26
|
+
if (Array.isArray(tokens) && !tokens.length) return null;
|
|
27
|
+
|
|
28
|
+
return fetchTokenByAddress(props.metadata?.toToken, props?.metadata?.toChainId, tokens);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
const formattedToAmount = computed(() =>
|
|
24
32
|
formatDecimal(
|
|
25
|
-
fromWei(props.metadata?.amount,
|
|
33
|
+
fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
|
|
26
34
|
)
|
|
27
35
|
);
|
|
28
36
|
</script>
|
|
@@ -36,7 +44,7 @@ const formattedFromAmount = computed(() =>
|
|
|
36
44
|
<span v-if="!compact" class="capitalize text-xs sm:text-sm">Cross-chain send</span>
|
|
37
45
|
<span class="inline-flex gap-2.5 items-center">
|
|
38
46
|
<img width="20" height="20" class="w-5 h-5" :src="fromToken?.logo_url" />
|
|
39
|
-
{{
|
|
47
|
+
{{ formattedToAmount }}
|
|
40
48
|
<span class="uppercase">{{ fromToken?.symbol }}</span>
|
|
41
49
|
</span>
|
|
42
50
|
</div>
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { Tippy } from 'vue-tippy'
|
|
3
|
-
|
|
3
|
+
import Info2 from '../../assets/images/icons/info-2.svg'
|
|
4
|
+
|
|
5
|
+
defineProps<{
|
|
4
6
|
metadata: {
|
|
5
7
|
type: MetadataTypes,
|
|
6
8
|
[key: string]: any
|
|
@@ -10,30 +12,49 @@ const props = defineProps<{
|
|
|
10
12
|
</script>
|
|
11
13
|
|
|
12
14
|
<template>
|
|
13
|
-
<div>
|
|
14
|
-
<div v-if="!compact || metadata.addresses.length < 3" class="flex gap-[14px] flex-wrap">
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
<div class="font-medium">
|
|
16
|
+
<div v-if="!compact || metadata.addresses.length < 3" class="flex gap-[14px] flex-wrap items-end">
|
|
17
|
+
<p v-if="!compact" class="text-xs"> {{ formatTxType(metadata.type) }} </p>
|
|
18
|
+
<div v-for="address of metadata.addresses" :key="address"
|
|
19
|
+
class="flex gap-2 rounded-full bg-slate-100 dark:bg-slate-800 justify-start items-center px-2 py-1.5">
|
|
20
|
+
<AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
|
|
21
|
+
<Tippy max-width="none" interactive>
|
|
22
|
+
<template #default>
|
|
23
|
+
<p class="text-xs leading-5 text-slate-500 dark:text-slate-400">
|
|
24
|
+
{{ shortenHash(address, compact ? 2 : 4) }}
|
|
25
|
+
</p>
|
|
26
|
+
</template>
|
|
27
|
+
<template #content>
|
|
28
|
+
{{ address }}
|
|
29
|
+
</template>
|
|
30
|
+
</Tippy>
|
|
31
|
+
</div>
|
|
21
32
|
</div>
|
|
22
33
|
<div v-else class="flex gap-2 flex-wrap items-center">
|
|
23
|
-
<div v-for="address of [metadata.addresses[0], metadata.addresses[1]]" :key="address"
|
|
34
|
+
<div v-for="address of [metadata.addresses[0], metadata.addresses[1]].filter(Boolean)" :key="address"
|
|
35
|
+
class="flex gap-2 rounded-full bg-slate-100 dark:bg-slate-800 justify-start items-center px-2 py-1.5">
|
|
24
36
|
<AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
37
|
+
|
|
38
|
+
<Tippy max-width="none" interactive>
|
|
39
|
+
<template #default>
|
|
40
|
+
<p class="text-xs leading-5 text-slate-400">
|
|
41
|
+
{{ shortenHash(address, 2) }}
|
|
42
|
+
</p>
|
|
43
|
+
</template>
|
|
44
|
+
<template #content>
|
|
45
|
+
{{ address }}
|
|
46
|
+
</template>
|
|
47
|
+
</Tippy>
|
|
28
48
|
</div>
|
|
29
|
-
|
|
49
|
+
|
|
30
50
|
<Tippy max-width="none" interactive tag="button" content-tag="div" content-class="content-wrapper">
|
|
31
51
|
<template #default>
|
|
32
|
-
<
|
|
52
|
+
<Info2 class="w-[16px] h-[16px] text-slate-500 rounded-full" />
|
|
33
53
|
</template>
|
|
34
54
|
<template #content>
|
|
35
55
|
<ul class="flex flex-col gap-2.5">
|
|
36
|
-
<li v-for="address in metadata.addresses" :key="address"
|
|
56
|
+
<li v-for="address in metadata.addresses" :key="address"
|
|
57
|
+
class="flex text-xs text-slate-400 items-center gap-2.5">
|
|
37
58
|
<AuthorityAvatar class="shrink-0 w-5 h-5" :address="address" />
|
|
38
59
|
{{ address }}
|
|
39
60
|
</li>
|
|
@@ -8,17 +8,15 @@ const props = defineProps<{
|
|
|
8
8
|
const compact = inject('compact');
|
|
9
9
|
const tokens = inject<ITokenPrice[]>('tokens');
|
|
10
10
|
|
|
11
|
-
const buyToken = asyncComputed(() =>
|
|
12
|
-
{
|
|
11
|
+
const buyToken = asyncComputed(() => {
|
|
13
12
|
if (Array.isArray(tokens) && !tokens.length) return null;
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
return fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id, tokens)
|
|
14
|
+
}
|
|
16
15
|
);
|
|
17
|
-
const sellToken = asyncComputed(() =>
|
|
18
|
-
{
|
|
16
|
+
const sellToken = asyncComputed(() => {
|
|
19
17
|
if (Array.isArray(tokens) && !tokens.length) return null;
|
|
20
|
-
return
|
|
21
|
-
|
|
18
|
+
return fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id, tokens)
|
|
19
|
+
}
|
|
22
20
|
);
|
|
23
21
|
|
|
24
22
|
const sellAmountFormatted = computed(() =>
|
|
@@ -49,26 +47,21 @@ const formatProtocol = (protocol: string) => {
|
|
|
49
47
|
|
|
50
48
|
<template>
|
|
51
49
|
<div v-if="!sellToken || !buyToken" class="rounded-5 w-24 h-4 loading-box" />
|
|
52
|
-
<div
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
<span class="
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
class="capitalize hidden sm:flex items-center gap-2.5"
|
|
67
|
-
v-if="metadata.protocol && !compact"
|
|
68
|
-
>
|
|
69
|
-
On <ProtocolLogo class="w-5 h-5" :name="metadata.protocol" />
|
|
70
|
-
{{ formatProtocol(metadata.protocol) }}
|
|
71
|
-
</span>
|
|
50
|
+
<div class="flex items-center gap-5" v-else>
|
|
51
|
+
<span v-if="!compact" class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
|
|
52
|
+
<span class="inline-flex gap-2.5 items-center">
|
|
53
|
+
<img width="20" height="20" class="w-5 h-5" :src="sellToken?.logo_url" />
|
|
54
|
+
{{ sellAmountFormatted }}
|
|
55
|
+
<span class="uppercase">{{ sellToken?.symbol }}</span>
|
|
56
|
+
<SvgoRefresh class="w-4 h-4 text-slate-400 mx-2" />
|
|
57
|
+
<img width="20" height="20" class="w-5 h-5" :src="buyToken?.logo_url" />
|
|
58
|
+
~ {{ buyAmountFormatted }}
|
|
59
|
+
<span class="uppercase">{{ buyToken?.symbol }}</span>
|
|
60
|
+
<span class="capitalize hidden sm:flex items-center gap-2.5" v-if="metadata.protocol && !compact">
|
|
61
|
+
On
|
|
62
|
+
<ProtocolLogo class="w-5 h-5" :name="metadata.protocol" />
|
|
63
|
+
{{ formatProtocol(metadata.protocol) }}
|
|
72
64
|
</span>
|
|
73
|
-
</
|
|
65
|
+
</span>
|
|
66
|
+
</div>
|
|
74
67
|
</template>
|