@instadapp/avocado-base 0.0.0-dev.d831e20 → 0.0.0-dev.e1420e6

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.
Files changed (20) hide show
  1. package/assets/images/icons/reject-proposal.svg +3 -3
  2. package/assets/images/icons/trash-2.svg +5 -5
  3. package/components/ActionLogo.vue +2 -2
  4. package/components/ActionMetadata.vue +4 -5
  5. package/components/AuthorityAvatar.vue +38 -0
  6. package/components/ChainLogo.vue +4 -562
  7. package/components/CopyClipboard.vue +64 -0
  8. package/components/metadata/Bridge.vue +26 -6
  9. package/components/metadata/CrossTransfer.vue +5 -1
  10. package/components/metadata/GasTopup.vue +7 -1
  11. package/components/metadata/Permit2.vue +6 -1
  12. package/components/metadata/Signers.vue +45 -0
  13. package/components/metadata/Swap.vue +9 -2
  14. package/components/metadata/Transfer.vue +5 -1
  15. package/package.json +5 -3
  16. package/utils/formatter.ts +1 -1
  17. package/utils/helper.ts +2 -1
  18. package/utils/network.ts +109 -79
  19. package/utils/services.ts +8 -1
  20. package/utils/utils.d.ts +1 -0
package/assets/images/icons/reject-proposal.svg CHANGED
@@ -1,6 +1,6 @@
1
1
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
2
2
  xmlns="http://www.w3.org/2000/svg">
3
- <path d="M11.8555 8.14404L8.14316 11.8564" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
4
- <path d="M8.14453 8.14404L11.8568 11.8564" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
5
- <rect x="3.75" y="3.75" width="12.5" height="12.5" rx="6.25" stroke="#EB5757" stroke-width="1.5"/>
3
+ <path d="M11.8555 8.14404L8.14316 11.8564" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M8.14453 8.14404L11.8568 11.8564" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <rect x="3.75" y="3.75" width="12.5" height="12.5" rx="6.25" stroke="currentColor" stroke-width="1.5"/>
6
6
  </svg>
package/assets/images/icons/trash-2.svg CHANGED
@@ -1,8 +1,8 @@
1
1
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
2
2
  xmlns="http://www.w3.org/2000/svg">
3
- <path d="M4.64453 7.21045H15.3588" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round"/>
4
- <path d="M13.8495 7.21045H6.14754L6.09242 8.20701C5.98681 10.1164 6.07654 12.0315 6.36021 13.9227C6.48391 14.7473 7.19233 15.3574 8.02623 15.3574H11.9708C12.8047 15.3574 13.5131 14.7473 13.6368 13.9227C13.9205 12.0315 14.0102 10.1164 13.9046 8.207L13.8495 7.21045Z" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
5
- <path d="M7.85938 7.21039V6.7825C7.85938 6.21509 8.08478 5.67091 8.486 5.26969C8.88722 4.86847 9.4314 4.64307 9.99881 4.64307C10.5662 4.64307 11.1104 4.86847 11.5116 5.26969C11.9128 5.67091 12.1382 6.21509 12.1382 6.7825V7.21039" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
6
- <path d="M8.71484 9.50195V13.0487" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
7
- <path d="M11.2852 9.50195V13.0487" stroke="#EB5757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M4.64453 7.21045H15.3588" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
4
+ <path d="M13.8495 7.21045H6.14754L6.09242 8.20701C5.98681 10.1164 6.07654 12.0315 6.36021 13.9227C6.48391 14.7473 7.19233 15.3574 8.02623 15.3574H11.9708C12.8047 15.3574 13.5131 14.7473 13.6368 13.9227C13.9205 12.0315 14.0102 10.1164 13.9046 8.207L13.8495 7.21045Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M7.85938 7.21039V6.7825C7.85938 6.21509 8.08478 5.67091 8.486 5.26969C8.88722 4.86847 9.4314 4.64307 9.99881 4.64307C10.5662 4.64307 11.1104 4.86847 11.5116 5.26969C11.9128 5.67091 12.1382 6.21509 12.1382 6.7825V7.21039" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
6
+ <path d="M8.71484 9.50195V13.0487" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
7
+ <path d="M11.2852 9.50195V13.0487" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
8
8
  </svg>
package/components/ActionLogo.vue CHANGED
@@ -26,13 +26,13 @@ defineProps<{
26
26
  <CrossTransferSVG class="text-primary" v-else-if="action === 'cross-transfer'"/>
27
27
  <TransferSVG class="text-primary" v-else-if="action === 'transfer'"/>
28
28
  <PlusCircleSVG class="text-primary" v-else-if="action === 'add-signers' || (action === 'auth' && !remove)"/>
29
- <Trash2SVG v-else-if="action === 'remove-signers' || (action === 'auth' && remove)"/>
29
+ <Trash2SVG class="text-[#EB5757]" v-else-if="action === 'remove-signers' || (action === 'auth' && remove)"/>
30
+ <RejectProposalSVG class="text-[#EB5757]" v-else-if="action === 'rejection'"/>
30
31
  <ChangeThresholdSVG v-else-if="action === 'change-threshold'"/>
31
32
  <DappSVG v-else-if="action === 'dapp'"/>
32
33
  <DeploySVG v-else-if="action === 'deploy'"/>
33
34
  <GasSVG v-else-if="action === 'gas-topup'"/>
34
35
  <InstadappProSVG v-else-if="action === 'instadapp-pro'"/>
35
36
  <PermitSignSVG v-else-if="action === 'permit2'"/>
36
- <RejectProposalSVG v-else-if="action === 'rejection'"/>
37
37
  <UpgradeSVG v-else-if="action === 'upgrade'"/>
38
38
  </template>
package/components/ActionMetadata.vue CHANGED
@@ -1,5 +1,4 @@
1
1
  <script lang="ts" setup>
2
-
3
2
  const props = defineProps<{
4
3
  metadata: {
5
4
  type: MetadataTypes
@@ -7,9 +6,11 @@ const props = defineProps<{
7
6
  };
8
7
  chain_id: number | string;
9
8
  compact?: boolean;
9
+ tokens?: ITokenPrice[];
10
10
  }>();
11
11
 
12
12
  provide('compact', props.compact);
13
+ provide('tokens', props.tokens);
13
14
 
14
15
  </script>
15
16
 
@@ -53,9 +54,7 @@ provide('compact', props.compact);
53
54
  {{ metadata?.castDetails }}
54
55
  </div>
55
56
 
56
- <div v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" class="text-left w-fit" v-tippy="formatMultipleAddresses(metadata.addresses, false)" >
57
- {{ formatMultipleAddresses(metadata.addresses) }}
58
- </div>
57
+ <MetadataSigners v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" :metadata="metadata" :compact="compact" />
59
58
 
60
59
  <div v-if="metadata.type === 'change-threshold'" class="text-left w-fit" >
61
60
  Change Threshold to {{ metadata.count }}
@@ -70,4 +69,4 @@ provide('compact', props.compact);
70
69
  {{ shortenHash(metadata.id) }}
71
70
  </div>
72
71
  </div>
73
- </template>
72
+ </template>
package/components/AuthorityAvatar.vue ADDED
@@ -0,0 +1,38 @@
1
+ <script setup lang="ts">
2
+ import * as XXH from 'xxhashjs';
3
+
4
+ defineProps<{
5
+ address: string
6
+ }>();
7
+
8
+ const randomId = Math.random().toString(36).substr(2, 9);
9
+
10
+ export function generateColor(address: string): string {
11
+ const hash = XXH.h32(address, 0xABCD).toNumber()
12
+
13
+ const hue = hash % 360
14
+ const saturation = 80 + (hash % 30)
15
+ const lightness = 70 + (hash % 20)
16
+
17
+ return `hsl(${hue}, ${saturation}%, ${lightness}%)`
18
+ }
19
+ </script>
20
+
21
+ <template>
22
+ <svg
23
+ :style="{
24
+ color: generateColor(address),
25
+ }" width="30" height="30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30"
26
+ >
27
+ <g fill="currentColor" :clip-path="`url(#${randomId})`">
28
+ <rect width="30" height="30" fill-opacity=".4" rx="15" />
29
+ <ellipse cx="15.004" cy="26.399" rx="11.4" ry="6.6" />
30
+ <circle cx="15" cy="12.75" r="5.4" />
31
+ </g>
32
+ <defs>
33
+ <clipPath :id="randomId">
34
+ <rect width="30" height="30" fill="#fff" rx="15" />
35
+ </clipPath>
36
+ </defs>
37
+ </svg>
38
+ </template>
package/components/ChainLogo.vue CHANGED
@@ -1,557 +1,8 @@
1
1
  <template>
2
- <svg
3
- v-if="chain == 137"
4
- xmlns="http://www.w3.org/2000/svg"
5
- fill="none"
6
- viewBox="0 0 24 24"
7
- >
8
- <rect
9
- width="22"
10
- height="22"
11
- x="1"
12
- y="1"
13
- :fill="generateID('polygon', true)"
14
- rx="11"
15
- />
16
- <path
17
- fill="#fff"
18
- d="M15.086 9.927a.791.791 0 0 0-.752 0L12.58 10.97l-1.191.665-1.723 1.045a.791.791 0 0 1-.752 0l-1.347-.823a.773.773 0 0 1-.376-.665V9.61c0-.253.125-.506.376-.664l1.347-.792a.791.791 0 0 1 .752 0l1.347.823c.22.127.376.38.376.665v1.045l1.19-.697V8.914a.782.782 0 0 0-.375-.665L9.697 6.762a.791.791 0 0 0-.752 0L6.376 8.28A.697.697 0 0 0 6 8.914v2.975c0 .254.125.507.376.665l2.538 1.488c.22.126.501.126.752 0l1.723-1.013 1.19-.697 1.724-1.012a.791.791 0 0 1 .752 0l1.347.79c.22.128.376.38.376.666v1.582a.782.782 0 0 1-.376.665l-1.316.791a.791.791 0 0 1-.752 0l-1.347-.791a.773.773 0 0 1-.376-.665v-1.013l-1.19.697v1.044c0 .253.125.507.375.665l2.538 1.487c.22.127.502.127.752 0l2.538-1.487a.773.773 0 0 0 .376-.665V12.08a.782.782 0 0 0-.376-.665l-2.538-1.487Z"
19
- />
20
- <rect
21
- v-if="stroke"
22
- :class="strokeClass"
23
- width="22"
24
- height="22"
25
- x="1"
26
- y="1"
27
- rx="11"
28
- />
29
- <defs>
30
- <linearGradient
31
- :id="generateID('polygon')"
32
- x1="12"
33
- x2="12"
34
- y1="2"
35
- y2="22"
36
- gradientUnits="userSpaceOnUse"
37
- >
38
- <stop stop-color="#A177FA" />
39
- <stop offset="1" stop-color="#7A4ADD" />
40
- </linearGradient>
41
- </defs>
42
- </svg>
43
- <svg
44
- v-else-if="chain == 42161"
45
- xmlns="http://www.w3.org/2000/svg"
46
- fill="none"
47
- viewBox="0 0 24 24"
48
- >
49
- <rect
50
- width="22"
51
- height="22"
52
- x="1"
53
- y="1"
54
- :fill="generateID('arb', true)"
55
- rx="11"
56
- />
57
- <path
58
- fill="#28A0F0"
59
- d="m12.031 13.969 1.704 2.673 1.574-.912-2.238-3.526-1.04 1.765ZM16.743 14.658v-.73l-2.445-3.808-.907 1.539 2.36 3.817.853-.495a.378.378 0 0 0 .14-.275v-.048Z"
60
- />
61
- <path
62
- fill="#fff"
63
- d="m6.5 15.347 1.205.694 4.01-6.43-.68-.018c-.58-.008-1.205.142-1.492.61l-2.277 3.53L6.5 14.91v.437ZM14.023 9.61l-1.793.007-4.058 6.696 1.418.817.386-.654 4.047-6.865Z"
64
- />
65
- <path
66
- fill="#96BEDC"
67
- d="M17.5 9.602a1.143 1.143 0 0 0-.536-.919l-4.46-2.564a1.16 1.16 0 0 0-1.022 0c-.037.019-4.336 2.512-4.336 2.512a1.146 1.146 0 0 0-.646.968v5.31l.766-1.176-.007-4.098a.377.377 0 0 1 .158-.285 2599 2599 0 0 1 4.406-2.552.388.388 0 0 1 .337-.002l4.401 2.532c.104.066.17.179.175.302v5.076a.37.37 0 0 1-.131.275l-.854.494-.44.255-1.574.912-1.595.925a.387.387 0 0 1-.272-.005l-1.888-1.086-.386.654 1.697.977a43.674 43.674 0 0 0 .27.15c.12.059.293.093.45.093.143 0 .283-.026.415-.078l4.635-2.685c.266-.206.423-.517.437-.854V9.602Z"
68
- />
69
- <rect
70
- v-if="stroke"
71
- :class="strokeClass"
72
- width="22"
73
- height="22"
74
- x="1"
75
- y="1"
76
- rx="11"
77
- />
78
- <defs>
79
- <linearGradient
80
- :id="generateID('arb')"
81
- x1="12"
82
- x2="12"
83
- y1="2"
84
- y2="22"
85
- gradientUnits="userSpaceOnUse"
86
- >
87
- <stop stop-color="#495775" />
88
- <stop offset="1" stop-color="#2D374B" />
89
- </linearGradient>
90
- </defs>
91
- </svg>
92
-
93
- <svg
94
- v-else-if="chain == 43114"
95
- xmlns="http://www.w3.org/2000/svg"
96
- fill="none"
97
- viewBox="0 0 24 24"
98
- >
99
- <rect
100
- width="22"
101
- height="22"
102
- x="1"
103
- y="1"
104
- :fill="generateID('avax', true)"
105
- rx="11"
106
- />
107
- <path
108
- fill="#fff"
109
- fill-rule="evenodd"
110
- d="M12.447 6.96c-.259-.447-.67-.447-.93 0l-4.696 8.27c-.258.453-.047.812.47.812H9.65c.476-.03.905-.283 1.164-.682l2.839-4.92a1.545 1.545 0 0 0 0-1.346l-.847-1.487-.358-.647Zm3.121 5.443c-.259-.447-.676-.447-.934 0l-1.64 2.827c-.253.447-.042.811.47.811h3.244c.518 0 .73-.364.47-.81l-1.61-2.828Z"
111
- clip-rule="evenodd"
112
- />
113
- <rect
114
- v-if="stroke"
115
- :class="strokeClass"
116
- width="22"
117
- height="22"
118
- x="1"
119
- y="1"
120
- rx="11"
121
- />
122
- <defs>
123
- <linearGradient
124
- :id="generateID('avax')"
125
- x1="12"
126
- x2="12"
127
- y1="2"
128
- y2="22"
129
- gradientUnits="userSpaceOnUse"
130
- >
131
- <stop stop-color="#FF8585" />
132
- <stop offset="1" stop-color="#EB5757" />
133
- </linearGradient>
134
- </defs>
135
- </svg>
136
-
137
- <svg
138
- v-else-if="chain == 1"
139
- xmlns="http://www.w3.org/2000/svg"
140
- fill="none"
141
- viewBox="0 0 24 24"
142
- >
143
- <rect
144
- width="22"
145
- height="22"
146
- x="1"
147
- y="1"
148
- :fill="generateID('eth', true)"
149
- rx="11"
150
- />
151
- <path
152
- fill="#fff"
153
- d="M8 12.111 11.998 6v.003L12 6l3.998 6.11.002.001-3.998 2.177h-.002L8 12.111Z"
154
- />
155
- <path
156
- fill="#fff"
157
- d="M11.998 17.997V18L8 12.81l3.998 2.176H12L16 12.81 12 18l-.002-.003Z"
158
- />
159
- <rect
160
- v-if="stroke"
161
- :class="strokeClass"
162
- width="22"
163
- height="22"
164
- x="1"
165
- y="1"
166
- rx="11"
167
- />
168
- <defs>
169
- <linearGradient
170
- :id="generateID('eth')"
171
- x1="12"
172
- x2="12"
173
- y1="2"
174
- y2="22"
175
- gradientUnits="userSpaceOnUse"
176
- >
177
- <stop stop-color="#8E90FF" />
178
- <stop offset="1" stop-color="#5D5FEF" />
179
- </linearGradient>
180
- </defs>
181
- </svg>
182
-
183
- <svg
184
- v-else-if="chain == 10"
185
- xmlns="http://www.w3.org/2000/svg"
186
- fill="none"
187
- viewBox="0 0 24 24"
188
- >
189
- <rect
190
- width="22"
191
- height="22"
192
- x="1"
193
- y="1"
194
- :fill="generateID('opt', true)"
195
- rx="11"
196
- />
197
- <path
198
- fill="#fff"
199
- d="M9.084 14.656c-.596 0-1.084-.14-1.464-.42-.376-.284-.564-.692-.564-1.216 0-.112.012-.244.036-.404a24.3 24.3 0 0 1 .276-1.3c.34-1.376 1.22-2.064 2.636-2.064.384 0 .732.064 1.036.196a1.532 1.532 0 0 1 .984 1.472c0 .104-.012.236-.036.396-.076.444-.164.88-.272 1.3-.176.684-.476 1.2-.908 1.54-.428.336-1.004.5-1.724.5Zm.108-1.08c.28 0 .516-.084.712-.248.2-.164.344-.416.428-.76.116-.472.204-.88.264-1.232.02-.104.032-.212.032-.324 0-.456-.236-.684-.712-.684a1.1 1.1 0 0 0-.72.248c-.196.164-.336.416-.42.76-.092.336-.18.744-.272 1.232-.02.1-.032.204-.032.316-.004.464.24.692.72.692ZM12.372 14.584c-.056 0-.096-.016-.128-.052-.024-.04-.032-.084-.024-.136l1.036-4.88a.2.2 0 0 1 .084-.136.22.22 0 0 1 .144-.052h1.996c.556 0 1 .116 1.336.344.34.232.512.564.512 1 0 .124-.016.256-.044.392-.124.576-.376 1-.76 1.276-.376.276-.892.412-1.548.412h-1.012l-.344 1.644a.215.215 0 0 1-.084.136.22.22 0 0 1-.144.052h-1.02Zm2.656-2.868a.886.886 0 0 0 .548-.172.822.822 0 0 0 .316-.496c.016-.084.024-.16.024-.224 0-.144-.044-.256-.128-.332-.084-.08-.232-.12-.436-.12h-.9l-.284 1.344h.86Z"
200
- />
201
- <rect
202
- v-if="stroke"
203
- :class="strokeClass"
204
- width="22"
205
- height="22"
206
- x="1"
207
- y="1"
208
- rx="11"
209
- />
210
- <defs>
211
- <linearGradient
212
- :id="generateID('opt')"
213
- x1="12"
214
- x2="12"
215
- y1="2"
216
- y2="22"
217
- gradientUnits="userSpaceOnUse"
218
- >
219
- <stop stop-color="#FF697A" />
220
- <stop offset="1" stop-color="#FF0420" />
221
- </linearGradient>
222
- </defs>
223
- </svg>
224
-
225
- <svg
226
- v-else-if="chain == 100"
227
- xmlns="http://www.w3.org/2000/svg"
228
- fill="none"
229
- viewBox="0 0 24 24"
230
- >
231
- <rect
232
- width="22"
233
- height="22"
234
- x="1"
235
- y="1"
236
- :fill="generateID('gnosis', true)"
237
- rx="11"
238
- />
239
- <g fill="#fff" clip-path="url(#clip0_1_911)">
240
- <path
241
- d="M9.527 12.833c.345 0 .681-.115.953-.325L8.293 10.32c-.527.68-.4 1.662.28 2.19.276.207.61.322.954.322ZM16.032 11.271c0-.345-.115-.681-.325-.953l-2.187 2.187a1.559 1.559 0 0 0 2.512-1.234Z"
242
- />
243
- <path
244
- d="m17.134 8.89-.968.968a2.204 2.204 0 0 1-3.103 3.104L12 14.024l-1.06-1.06a2.204 2.204 0 0 1-3.104-3.103l-.496-.497-.47-.473A6 6 0 1 0 18 12a5.985 5.985 0 0 0-.866-3.11Z"
245
- />
246
- <path
247
- d="M16.34 7.859a5.997 5.997 0 0 0-9.1.49L12 13.114l4.76-4.763a5.804 5.804 0 0 0-.42-.491ZM12 6.785c1.402 0 2.708.541 3.69 1.528L12 12.003l-3.69-3.69A5.157 5.157 0 0 1 12 6.785Z"
248
- />
249
- </g>
250
- <rect
251
- v-if="stroke"
252
- :class="strokeClass"
253
- width="22"
254
- height="22"
255
- x="1"
256
- y="1"
257
- rx="11"
258
- />
259
- <defs>
260
- <linearGradient
261
- :id="generateID('gnosis')"
262
- x1="12"
263
- x2="12"
264
- y1="2"
265
- y2="22"
266
- gradientUnits="userSpaceOnUse"
267
- >
268
- <stop stop-color="#2BA889" />
269
- <stop offset="1" stop-color="#04795C" />
270
- </linearGradient>
271
- <clipPath id="clip0_1_911">
272
- <path fill="#fff" d="M6 6h12v12H6z" />
273
- </clipPath>
274
- </defs>
275
- </svg>
276
-
277
- <svg
278
- v-else-if="chain == 56"
279
- xmlns="http://www.w3.org/2000/svg"
280
- fill="none"
281
- viewBox="0 0 24 24"
282
- >
283
- <rect
284
- width="22"
285
- height="22"
286
- x="1"
287
- y="1"
288
- :fill="generateID('bsc', true)"
289
- rx="11"
290
- />
291
- <path
292
- fill="#fff"
293
- d="M13.13 15.965v1.346L11.983 18l-1.113-.69v-1.345l1.113.69 1.145-.69ZM7 11.31l1.113.69v2.308l1.916 1.173v1.346L7 14.997V11.31Zm9.967 0v3.693l-3.061 1.83v-1.346l1.916-1.174v-2.307l1.145-.696ZM13.9 9.481l1.146.69v1.345l-1.917 1.174v2.34l-1.113.69-1.107-.69v-2.346l-1.987-1.173v-1.346l1.145-.69 1.917 1.174L13.9 9.48Zm-4.978 2.997 1.113.69v1.345l-1.113-.69v-1.345Zm6.124 0v1.346l-1.113.69v-1.346l1.113-.69Zm-6.933-4.17 1.145.69-1.145.689v1.345L7 10.342V8.998l1.113-.69Zm7.742 0 1.145.69v1.345l-1.146.69V9.686l-1.112-.69 1.112-.69Zm-3.871 0 1.145.69-1.145.689-1.113-.69 1.113-.69Zm0-2.308 3.062 1.83-1.113.689-1.917-1.173-1.954 1.173-1.113-.69L11.984 6Z"
294
- />
295
- <rect
296
- v-if="stroke"
297
- :class="strokeClass"
298
- width="22"
299
- height="22"
300
- x="1"
301
- y="1"
302
- rx="11"
303
- />
304
- <defs>
305
- <linearGradient
306
- :id="generateID('bsc')"
307
- x1="12"
308
- x2="12"
309
- y1="2"
310
- y2="22"
311
- gradientUnits="userSpaceOnUse"
312
- >
313
- <stop stop-color="#FFD97C" />
314
- <stop offset="1" stop-color="#F3BA2F" />
315
- </linearGradient>
316
- </defs>
317
- </svg>
318
- <svg
319
- v-else-if="chain == 1101"
320
- width="24"
321
- height="24"
322
- viewBox="0 0 24 24"
323
- fill="none"
324
- xmlns="http://www.w3.org/2000/svg"
325
- >
326
- <rect
327
- x="1"
328
- y="1"
329
- width="22"
330
- height="22"
331
- rx="11"
332
- :fill="generateID('zkevm', true)"
333
- />
334
- <g clip-path="url(#clip0_0_68)">
335
- <path
336
- d="M16.4587 8.44406L12.8483 6.35851C12.5897 6.21032 12.2968 6.13235 11.9988 6.13235C11.7007 6.13235 11.4079 6.21032 11.1493 6.35851L7.53885 8.44406C7.28051 8.59322 7.06599 8.80775 6.91687 9.06611C6.76774 9.32446 6.68927 9.61753 6.68934 9.91583V14.0954C6.6915 14.3916 6.77102 14.682 6.92004 14.9379C7.06905 15.1939 7.28237 15.4064 7.53885 15.5545L11.1493 17.64C11.4076 17.7891 11.7005 17.8676 11.9988 17.8676C12.297 17.8676 12.59 17.7891 12.8483 17.64L16.4587 15.5545C16.7171 15.4053 16.9316 15.1908 17.0807 14.9324C17.2298 14.6741 17.3083 14.381 17.3082 14.0827V9.90309C17.3061 9.60696 17.2265 9.31652 17.0775 9.06058C16.9285 8.80467 16.7152 8.59213 16.4587 8.44406ZM7.53885 9.91583C7.53864 9.7665 7.57778 9.61975 7.65234 9.49037C7.72693 9.36098 7.83428 9.25356 7.9636 9.1789L11.574 7.09546C11.703 7.02038 11.8496 6.98082 11.9988 6.98082C12.148 6.98082 12.2946 7.02038 12.4235 7.09546L16.034 9.1789C16.1614 9.25247 16.2676 9.3579 16.3421 9.48485C16.4165 9.6118 16.4567 9.75594 16.4587 9.90309V10.3278C16.4576 10.6585 16.3256 10.9753 16.0916 11.2089C15.8576 11.4425 15.5406 11.5739 15.2099 11.5745H8.78763C8.33748 11.5734 7.89916 11.7188 7.53885 11.9886V9.91583ZM16.4587 14.0827C16.4589 14.232 16.4198 14.3788 16.3452 14.5082C16.2706 14.6375 16.1633 14.745 16.034 14.8196L12.4235 16.9031C12.2944 16.9776 12.1479 17.0169 11.9988 17.0169C11.8497 17.0169 11.7032 16.9776 11.574 16.9031L7.9636 14.8196C7.83613 14.7461 7.72997 14.6406 7.65551 14.5137C7.58105 14.3867 7.54084 14.2426 7.53885 14.0954V13.6707C7.53998 13.34 7.67196 13.0233 7.90597 12.7896C8.13999 12.556 8.45697 12.4246 8.78763 12.424H15.2099C15.6601 12.4251 16.0984 12.2797 16.4587 12.0099V14.0827Z"
337
- fill="white"
338
- />
339
- <path
340
- d="M10.026 9.70346H10.85V10.9374H11.6995V9.70346C11.6995 9.47816 11.61 9.26208 11.4507 9.10276C11.2914 8.94345 11.0753 8.85395 10.85 8.85395H10.026C9.80068 8.85395 9.58461 8.94345 9.42528 9.10276C9.26597 9.26208 9.17647 9.47816 9.17647 9.70346V10.9374H10.026V9.70346Z"
341
- fill="white"
342
- />
343
- <path
344
- d="M10.85 14.295H10.026V13.0611H9.17647V14.295C9.17647 14.5203 9.26597 14.7364 9.42528 14.8957C9.58461 15.055 9.80068 15.1445 10.026 15.1445H10.85C11.0753 15.1445 11.2914 15.055 11.4507 14.8957C11.61 14.7364 11.6995 14.5203 11.6995 14.295V13.0611H10.85V14.295Z"
345
- fill="white"
346
- />
347
- <path
348
- d="M13.3707 9.70346H14.1968V10.9374H15.0463V9.70346C15.0463 9.47816 14.9568 9.26208 14.7975 9.10276C14.6382 8.94345 14.4221 8.85395 14.1968 8.85395H13.3707C13.1454 8.85395 12.9293 8.94345 12.77 9.10276C12.6106 9.26208 12.5211 9.47816 12.5211 9.70346V10.9374H13.3707V9.70346Z"
349
- fill="white"
350
- />
351
- <path
352
- d="M14.1968 14.295H13.3707V13.0611H12.5211V14.295C12.5211 14.5203 12.6106 14.7364 12.77 14.8957C12.9293 15.055 13.1454 15.1445 13.3707 15.1445H14.1968C14.4221 15.1445 14.6382 15.055 14.7975 14.8957C14.9568 14.7364 15.0463 14.5203 15.0463 14.295V13.0611H14.1968V14.295Z"
353
- fill="white"
354
- />
355
- </g>
356
- <rect
357
- x="1"
358
- y="1"
359
- width="22"
360
- height="22"
361
- rx="11"
362
- v-if="stroke"
363
- :class="strokeClass"
364
- />
365
- <defs>
366
- <linearGradient
367
- :id="generateID('zkevm')"
368
- x1="12"
369
- y1="2"
370
- x2="12"
371
- y2="22"
372
- gradientUnits="userSpaceOnUse"
373
- >
374
- <stop stop-color="#A177FA" />
375
- <stop offset="1" stop-color="#7A4ADD" />
376
- </linearGradient>
377
- <clipPath id="clip0_0_68">
378
- <rect width="12" height="12" fill="white" transform="translate(6 6)" />
379
- </clipPath>
380
- </defs>
381
- </svg>
382
-
383
- <svg
384
- v-else-if="chain == 1313161554"
385
- width="24"
386
- height="24"
387
- viewBox="0 0 24 24"
388
- fill="none"
389
- xmlns="http://www.w3.org/2000/svg"
390
- >
391
- <rect
392
- x="1"
393
- y="1"
394
- width="22"
395
- height="22"
396
- rx="11"
397
- :fill="generateID('aurora', true)"
398
- />
399
- <path
400
- d="M11.9961 7.26624C12.4182 7.26624 12.8014 7.505 12.9902 7.88257L16.1114 14.1291C16.3835 14.6788 16.1614 15.3451 15.6116 15.6172C15.4561 15.6949 15.2894 15.7338 15.1173 15.7338H8.87486C8.26395 15.7338 7.76411 15.234 7.76411 14.6233C7.76411 14.4511 7.80299 14.279 7.88074 14.1291L11.0019 7.88257C11.1908 7.49944 11.574 7.26069 11.9961 7.26624ZM11.9961 6.5C11.2852 6.5 10.6354 6.89978 10.3188 7.53831L7.19763 13.7848C6.73667 14.7121 7.10877 15.8337 8.03624 16.3001C8.29727 16.4278 8.58607 16.5 8.87486 16.5H15.1228C16.1558 16.5 17 15.6616 17 14.6288C17 14.3401 16.9334 14.0514 16.8001 13.7904L13.6733 7.53831C13.3567 6.89978 12.707 6.5 11.9961 6.5Z"
401
- fill="white"
402
- />
403
- <rect
404
- x="1"
405
- y="1"
406
- width="22"
407
- height="22"
408
- rx="11"
409
- stroke="black"
410
- stroke-width="2"
411
- v-if="stroke"
412
- :class="strokeClass"
413
- />
414
- <defs>
415
- <linearGradient
416
- :id="generateID('aurora')"
417
- x1="12"
418
- y1="2"
419
- x2="12"
420
- y2="22"
421
- gradientUnits="userSpaceOnUse"
422
- >
423
- <stop stop-color="#8EEF6B" />
424
- <stop offset="1" stop-color="#70D44B" />
425
- </linearGradient>
426
- </defs>
427
- </svg>
428
-
429
- <svg
430
- v-else-if="chain == 250"
431
- width="24"
432
- height="24"
433
- viewBox="0 0 24 24"
434
- fill="none"
435
- xmlns="http://www.w3.org/2000/svg"
436
- >
437
- <rect
438
- x="1"
439
- y="1"
440
- width="22"
441
- height="22"
442
- rx="11"
443
- :fill="generateID('fantom', true)"
444
- />
445
- <path
446
- fill-rule="evenodd"
447
- clip-rule="evenodd"
448
- d="M12.75 10.0625L15 8.75V11.375L12.75 10.0625ZM15 15.6875L12 17.4375L9 15.6875V12.625L12 14.375L15 12.625V15.6875ZM9 8.75L11.25 10.0625L9 11.375V8.75ZM12.375 10.6875L14.625 12L12.375 13.3125V10.6875ZM11.625 13.3125L9.375 12L11.625 10.6875V13.3125ZM14.625 8.125L12 9.625L9.375 8.125L12 6.5625L14.625 8.125ZM8.25 7.875V16.0625L12 18.1875L15.75 16.0625V7.875L12 5.75L8.25 7.875Z"
449
- fill="white"
450
- />
451
- <rect
452
- x="1"
453
- y="1"
454
- width="22"
455
- height="22"
456
- rx="11"
457
- stroke="black"
458
- stroke-width="2"
459
- v-if="stroke"
460
- :class="strokeClass"
461
- />
462
- <defs>
463
- <linearGradient
464
- :id="generateID('fantom')"
465
- x1="12"
466
- y1="2"
467
- x2="12"
468
- y2="22"
469
- gradientUnits="userSpaceOnUse"
470
- >
471
- <stop stop-color="#51D3FF" />
472
- <stop offset="1" stop-color="#13B5EC" />
473
- </linearGradient>
474
- </defs>
475
- </svg>
476
-
477
- <svg
478
- v-else-if="chain == 634 || chain == 63400"
479
- width="24"
480
- height="24"
481
- viewBox="0 0 24 24"
482
- fill="none"
483
- xmlns="http://www.w3.org/2000/svg"
484
- >
485
- <rect
486
- x="1"
487
- y="1"
488
- width="22"
489
- height="22"
490
- rx="11"
491
- :fill="generateID('avo', true)"
492
- />
493
- <path
494
- d="M11.9999 17.4052C11.9999 17.7497 12.2787 18.0322 12.6197 17.997C15.6422 17.6854 18 15.1194 18 12C18 8.88061 15.6422 6.31462 12.6197 6.00299C12.2787 5.96765 11.9999 6.25038 11.9999 6.59486V8.25799C11.9999 8.60246 12.2806 8.87521 12.6167 8.94319C14.0353 9.2307 15.1035 10.4899 15.1035 12C15.1035 13.5101 14.0353 14.7693 12.6167 15.0569C12.2806 15.1248 11.9999 15.3978 11.9999 15.7421V17.4052ZM10.1378 7.12664C10.1378 6.70254 9.7247 6.4036 9.34642 6.59132C7.36369 7.57527 6 9.62756 6 12C6 14.3725 7.36369 16.4248 9.34642 17.4087C9.7247 17.5964 10.1378 17.2975 10.1378 16.8734V7.12685V7.12664Z"
495
- fill="white"
496
- />
497
- <rect
498
- x="1"
499
- y="1"
500
- width="22"
501
- height="22"
502
- rx="11"
503
- stroke="black"
504
- stroke-width="2"
505
- v-if="stroke"
506
- :class="strokeClass"
507
- />
508
- <defs>
509
- <linearGradient
510
- :id="generateID('avo')"
511
- x1="12"
512
- y1="2"
513
- x2="12"
514
- y2="22"
515
- gradientUnits="userSpaceOnUse"
516
- >
517
- <stop stop-color="#6ED578" />
518
- <stop offset="1" stop-color="#4CA054" />
519
- </linearGradient>
520
- </defs>
521
- </svg>
522
-
523
- <template v-else>
524
- <svg
525
- v-bind="$attrs"
526
- class="dark:hidden block"
527
- xmlns="http://www.w3.org/2000/svg"
528
- fill="none"
529
- viewBox="0 0 20 20"
530
- >
531
- <rect width="20" height="20" fill="#CBD5E1" rx="10" />
532
- <path
533
- fill="#fff"
534
- fill-rule="evenodd"
535
- 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"
536
- clip-rule="evenodd"
537
- />
538
- </svg>
539
- <svg
540
- v-bind="$attrs"
541
- class="dark:block hidden"
542
- xmlns="http://www.w3.org/2000/svg"
543
- fill="none"
544
- viewBox="0 0 20 20"
545
- >
546
- <rect width="20" height="20" fill="#334155" rx="10" />
547
- <path
548
- fill="#97A2B7"
549
- fill-rule="evenodd"
550
- 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"
551
- clip-rule="evenodd"
552
- />
553
- </svg>
554
- </template>
2
+ <span v-if="stroke" class="outline stroke-color dark:outline-[#161E2D] outline-[#F8FAFC] outline-2 shrink-0 outline outline-offset-[-1.5px] rounded-full">
3
+ <img class="w-full h-full" :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`"/>
4
+ </span>
5
+ <img v-else :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`"/>
555
6
  </template>
556
7
 
557
8
  <script lang="ts" setup>
@@ -559,13 +10,4 @@ defineProps<{
559
10
  chain: ChainId | number | string;
560
11
  stroke?: boolean;
561
12
  }>();
562
-
563
- const randomId = Math.random().toString(36).substr(2, 9);
564
-
565
- const generateID = (prefix: string, wrapURL = false) => {
566
- const merged = `${prefix}-${randomId}`;
567
- return wrapURL ? `url(#${merged})` : merged;
568
- };
569
-
570
- const strokeClass = "dark:stroke-gray-900 stroke-slate-50 stroke-2";
571
13
  </script>
package/components/CopyClipboard.vue ADDED
@@ -0,0 +1,64 @@
1
+ <script setup lang="ts">
2
+ import CopySVG from '~/assets/images/icons/copy.svg'
3
+ import CheckCircle from '~/assets/images/icons/check-circle.svg'
4
+
5
+ defineProps<{
6
+ text: string
7
+ iconOnly?: boolean
8
+ successText?: string
9
+ }>()
10
+ const { copy, copied } = useClipboard()
11
+ const slots = useSlots()
12
+ </script>
13
+
14
+ <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
+
26
+ <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
+ />
31
+ <slot v-else-if="slots.copy" name="copy" />
32
+ <slot v-else name="copy-icon">
33
+ <CopySVG />
34
+ </slot>
35
+ </Transition>
36
+ </button>
37
+ </template>
38
+
39
+ <style scoped>
40
+ .slide-left-enter-active,
41
+ .slide-left-leave-active {
42
+ transition: all 0.1s ease-out;
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
+ }
54
+
55
+ .slide-enter-active,
56
+ .slide-leave-active {
57
+ transition: opacity 0.1s ease;
58
+ }
59
+
60
+ .slide-enter-from,
61
+ .slide-leave-to {
62
+ opacity: 0;
63
+ }
64
+ </style>
package/components/metadata/Bridge.vue CHANGED
@@ -6,31 +6,51 @@ const props = defineProps<{
6
6
  }>();
7
7
 
8
8
  const compact = inject('compact');
9
+ const tokens = inject<ITokenPrice[]>('tokens');
9
10
 
10
11
  const toToken = asyncComputed(() =>
11
- fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId)
12
+ {
13
+ if (Array.isArray(tokens) && !tokens.length) return null;
14
+ return fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId, tokens)
15
+ }
12
16
  );
13
17
 
18
+ const fromToken = asyncComputed(() =>
19
+ {
20
+ if (Array.isArray(tokens) && !tokens.length) return null;
21
+ return fetchTokenByAddress(props.metadata?.fromToken, props.chain_id, tokens)
22
+ }
23
+ );
24
+
25
+ const isTokensSame = computed(() => {
26
+ return toToken.value?.symbol === fromToken.value?.symbol
27
+ })
28
+
14
29
  const bridgeAmountFormatted = computed(() =>
15
30
  formatDecimal(
16
- fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
31
+ fromWei(props.metadata?.amount, fromToken?.value?.decimals).toFixed()
17
32
  )
18
33
  );
19
34
  </script>
20
35
 
21
36
  <template>
22
- <div v-if="!toToken" class="rounded-5 w-24 h-4 loading-box" />
37
+ <div v-if="!toToken || !fromToken" class="rounded-5 w-24 h-4 loading-box" />
23
38
  <div
24
39
  class="flex gap-5 items-center"
25
- v-if="metadata.type === 'bridge' && toToken"
40
+ v-if="toToken && fromToken"
26
41
  >
27
42
  <span v-if="!compact" class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
28
43
  <span class="inline-flex gap-2.5 items-center">
29
- <img width="20" height="20" class="w-5 h-5" :src="toToken.logo_url" />
44
+ <img width="20" height="20" class="w-5 h-5" :src="fromToken.logo_url" />
30
45
  {{ bridgeAmountFormatted }}
31
- <span class="uppercase">{{ toToken?.symbol }}</span>
46
+ <span class="uppercase">{{ fromToken?.symbol }}</span>
32
47
  <SvgoBridge class="text-slate-400 w-4 h-4" />
48
+ <template v-if="!isTokensSame">
49
+ <img width="20" height="20" class="w-5 h-5" :src="toToken.logo_url" />
50
+ <span class="uppercase">{{ toToken?.symbol }}</span>
51
+ </template>
33
52
  <span class="flex items-center gap-2.5">
53
+ on
34
54
  <ChainLogo class="w-5" :chain="metadata.toChainId" />
35
55
  <span>{{ chainIdToName(metadata.toChainId) }}</span>
36
56
  </span>
package/components/metadata/CrossTransfer.vue CHANGED
@@ -6,13 +6,17 @@ const props = defineProps<{
6
6
  }>();
7
7
 
8
8
  const compact = inject('compact');
9
+ const tokens = inject<ITokenPrice[]>('tokens');
9
10
 
10
11
  const fromToken = asyncComputed(() => {
11
12
  if (!props?.chain_id) return null;
12
13
 
14
+ if (Array.isArray(tokens) && !tokens.length) return null;
15
+
13
16
  return fetchTokenByAddress(
14
17
  props.metadata?.fromToken,
15
- props?.chain_id
18
+ props?.chain_id,
19
+ tokens
16
20
  );
17
21
  });
18
22
 
package/components/metadata/GasTopup.vue CHANGED
@@ -5,8 +5,14 @@ const props = defineProps<{
5
5
  chain_id: number | string
6
6
  }>();
7
7
 
8
+ const tokens = inject<ITokenPrice[]>('tokens');
9
+
8
10
  const token = asyncComputed(() =>
9
- fetchTokenByAddress(props.metadata?.token, props?.chain_id)
11
+ {
12
+ if (Array.isArray(tokens) && !tokens.length) return null;
13
+
14
+ return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
15
+ }
10
16
  );
11
17
 
12
18
  const compact = inject('compact');
package/components/metadata/Permit2.vue CHANGED
@@ -5,8 +5,13 @@ const props = defineProps<{
5
5
  chain_id: number | string
6
6
  }>();
7
7
 
8
+ const tokens = inject<ITokenPrice[]>('tokens');
9
+
8
10
  const token = asyncComputed(() =>
9
- fetchTokenByAddress(props.metadata?.token, props?.chain_id)
11
+ {
12
+ if (Array.isArray(tokens) && !tokens.length) return null;
13
+ return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
14
+ }
10
15
  );
11
16
 
12
17
  const calculateDate = (timestamp: number) => {
package/components/metadata/Signers.vue ADDED
@@ -0,0 +1,45 @@
1
+ <script setup lang="ts">
2
+ import { Tippy } from 'vue-tippy'
3
+ const props = defineProps<{
4
+ metadata: {
5
+ type: MetadataTypes,
6
+ [key: string]: any
7
+ };
8
+ compact?: boolean;
9
+ }>();
10
+ </script>
11
+
12
+ <template>
13
+ <div>
14
+ <div v-if="!compact || metadata.addresses.length < 3" class="flex gap-[14px] flex-wrap">
15
+ <div v-for="address of metadata.addresses" :key="address" class="flex gap-[8px] rounded-full bg-slate-50 dark:bg-gray-850 justify-start items-center px-[8px] py-[6px]">
16
+ <AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
17
+ <p class="text-xs leading-5">
18
+ {{ shortenHash(address, compact ? 2 : 4) }}
19
+ </p>
20
+ </div>
21
+ </div>
22
+ <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" class="flex gap-[8px] rounded-full bg-slate-50 dark:bg-gray-850 justify-start items-center px-[8px] py-[6px]">
24
+ <AuthorityAvatar :address="address" class="w-[18px] h-[18px]" />
25
+ <p class="text-xs leading-5">
26
+ {{ shortenHash(address, 2) }}
27
+ </p>
28
+ </div>
29
+ ...
30
+ <Tippy max-width="none" interactive tag="button" content-tag="div" content-class="content-wrapper">
31
+ <template #default>
32
+ <SvgoInfo2 class="w-[16px] h-[16px] text-slate-500 rounded-full" />
33
+ </template>
34
+ <template #content>
35
+ <ul class="flex flex-col gap-2.5">
36
+ <li v-for="address in metadata.addresses" :key="address" class="flex text-xs items-center gap-2.5">
37
+ <AuthorityAvatar class="shrink-0 w-5 h-5" :address="address" />
38
+ {{ address }}
39
+ </li>
40
+ </ul>
41
+ </template>
42
+ </Tippy>
43
+ </div>
44
+ </div>
45
+ </template>
package/components/metadata/Swap.vue CHANGED
@@ -6,12 +6,19 @@ const props = defineProps<{
6
6
  }>();
7
7
 
8
8
  const compact = inject('compact');
9
+ const tokens = inject<ITokenPrice[]>('tokens');
9
10
 
10
11
  const buyToken = asyncComputed(() =>
11
- fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id)
12
+ {
13
+ if (Array.isArray(tokens) && !tokens.length) return null;
14
+ return fetchTokenByAddress(props.metadata?.buyToken, props?.chain_id, tokens)
15
+ }
12
16
  );
13
17
  const sellToken = asyncComputed(() =>
14
- fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id)
18
+ {
19
+ if (Array.isArray(tokens) && !tokens.length) return null;
20
+ return fetchTokenByAddress(props.metadata?.sellToken, props?.chain_id, tokens)
21
+ }
15
22
  );
16
23
 
17
24
  const sellAmountFormatted = computed(() =>
package/components/metadata/Transfer.vue CHANGED
@@ -6,13 +6,17 @@ const props = defineProps<{
6
6
  }>();
7
7
 
8
8
  const compact = inject('compact');
9
+ const tokens = inject<ITokenPrice[]>('tokens');
9
10
 
10
11
  const token = asyncComputed(() => {
11
12
  if (!props?.chain_id) return null;
12
13
 
14
+ if (Array.isArray(tokens) && !tokens.length) return null;
15
+
13
16
  return fetchTokenByAddress(
14
17
  props.metadata?.token,
15
- props?.chain_id
18
+ props?.chain_id,
19
+ tokens
16
20
  );
17
21
  });
18
22
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instadapp/avocado-base",
3
- "version": "0.0.0-dev.d831e20",
3
+ "version": "0.0.0-dev.e1420e6",
4
4
  "type": "module",
5
5
  "main": "./nuxt.config.ts",
6
6
  "types": "global.d.ts",
@@ -20,11 +20,13 @@
20
20
  "nuxt-svgo": "^3.1.0",
21
21
  "rimraf": "^3.0.2",
22
22
  "typechain": "^8.1.1",
23
- "unplugin-vue-components": "^0.25.1"
23
+ "unplugin-vue-components": "^0.25.1",
24
+ "vue-tippy": "^6.0.0"
24
25
  },
25
26
  "dependencies": {
26
27
  "@vueuse/nuxt": "^10.2.0",
27
28
  "bignumber.js": "^9.1.1",
28
- "ethers": "^5.7.2"
29
+ "ethers": "^5.7.2",
30
+ "xxhashjs": "^0.2.2"
29
31
  }
30
32
  }
package/utils/formatter.ts CHANGED
@@ -72,7 +72,7 @@ export function formatDecimal(value: string | number, fractionDigits?: number) {
72
72
  let decimals;
73
73
 
74
74
  if (num.lt(1)) {
75
- decimals = 8;
75
+ decimals = 4;
76
76
  } else if (num.lt(10)) {
77
77
  decimals = 6;
78
78
  } else if (num.lt(100)) {
package/utils/helper.ts CHANGED
@@ -58,4 +58,5 @@ export function formatMultipleAddresses(addresses: string[], shorten = true) {
58
58
  const formattedString = formatter.format(addresses.map(i => shorten ? shortenHash(i) || '' : i))
59
59
 
60
60
  return formattedString
61
- }
61
+ }
62
+
package/utils/network.ts CHANGED
@@ -1,30 +1,18 @@
1
1
  import { ethers } from "ethers";
2
+ import {
3
+ AVO_PROD_CHAIN_NAME,
4
+ AVO_PROD_CHAIN_ID,
5
+ AVO_PROD_RPC_URL,
6
+ AVO_PROD_EXPLORER_URL,
7
+ AVO_STAGING_CHAIN_NAME,
8
+ AVO_STAGING_CHAIN_ID,
9
+ AVO_STAGING_RPC_URL,
10
+ AVO_STAGING_EXPLORER_URL,
11
+ } from './avocado'
2
12
 
3
13
  export const bridgeDisabledNetworks = [1101];
4
14
 
5
15
  export const networks: Network[] = [
6
- {
7
- name: "Ethereum",
8
- debankName: "eth",
9
- ankrName: "eth",
10
- zerionName: "ethereum",
11
- chainId: 1,
12
- explorerUrl: "https://etherscan.io",
13
- color: "#5D5FEF",
14
- get serverRpcUrl() {
15
- return process.env?.MAINNET_RPC_URL || this.params.rpcUrls[0];
16
- },
17
- balanceResolverAddress: "0x5b7D61b389D12e1f5873d0cCEe7E675915AB5F43",
18
- usdcAddress: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
19
- params: {
20
- rpcUrls: ["https://rpc.ankr.com/eth"],
21
- nativeCurrency: {
22
- name: "Ethereum",
23
- symbol: "ETH",
24
- decimals: 18,
25
- },
26
- },
27
- },
28
16
  {
29
17
  name: "Polygon",
30
18
  debankName: "matic",
@@ -71,6 +59,48 @@ export const networks: Network[] = [
71
59
  rpcUrls: ["https://arb1.arbitrum.io/rpc"],
72
60
  },
73
61
  },
62
+ {
63
+ name: "Ethereum",
64
+ debankName: "eth",
65
+ ankrName: "eth",
66
+ zerionName: "ethereum",
67
+ chainId: 1,
68
+ explorerUrl: "https://etherscan.io",
69
+ color: "#5D5FEF",
70
+ get serverRpcUrl() {
71
+ return process.env?.MAINNET_RPC_URL || this.params.rpcUrls[0];
72
+ },
73
+ balanceResolverAddress: "0x5b7D61b389D12e1f5873d0cCEe7E675915AB5F43",
74
+ usdcAddress: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
75
+ params: {
76
+ rpcUrls: ["https://rpc.ankr.com/eth"],
77
+ nativeCurrency: {
78
+ name: "Ethereum",
79
+ symbol: "ETH",
80
+ decimals: 18,
81
+ },
82
+ },
83
+ },
84
+ {
85
+ name: 'Base',
86
+ chainId: 8453,
87
+ color: '#1E2024',
88
+ explorerUrl: 'https://basescan.org',
89
+ get serverRpcUrl() {
90
+ return process.env?.BASE_RPC_URL || this.params.rpcUrls[0];
91
+ },
92
+ usdcAddress: '0xd9aAEc86B65D86f6A7B5B1b0c42FFA531710b6CA',
93
+ balanceResolverAddress: '0x23c8EAb8a4373dD16b0947Ebe8bf76Ff7A49d13C',
94
+ params: {
95
+ rpcUrls: ['https://rpc.ankr.com/base'],
96
+ chainName: "Base",
97
+ nativeCurrency: {
98
+ name: "Ethereum",
99
+ symbol: "ETH",
100
+ decimals: 18,
101
+ },
102
+ }
103
+ },
74
104
  {
75
105
  name: "Optimism",
76
106
  debankName: "op",
@@ -95,26 +125,23 @@ export const networks: Network[] = [
95
125
  },
96
126
  },
97
127
  {
98
- name: "Avalanche",
99
- debankName: "avax",
100
- ankrName: "avalanche",
101
- zerionName: "avalanche",
102
- color: "#EB5757",
103
- chainId: 43114,
104
- usdcAddress: "0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e",
105
- balanceResolverAddress: "0x63009f31D054E0ac9F321Cf0D642375236A4Bf1E",
106
- explorerUrl: "https://snowtrace.io",
128
+ name: "Polygon zkEVM",
129
+ chainId: 1101,
130
+ color: "#8544f6",
131
+ explorerUrl: "https://zkevm.polygonscan.com",
132
+ balanceResolverAddress: "0x48D1Fa5Ee6691a1E0B45d2B515650997BEA27a01",
133
+ usdcAddress: "0xa8ce8aee21bc2a48a5ef670afcc9274c7bbbc035",
107
134
  get serverRpcUrl() {
108
- return process.env?.AVALANCHE_RPC_URL || this.params.rpcUrls[0];
135
+ return process.env?.POLYGON_ZKEVM_RPC_URL || this.params.rpcUrls[0];
109
136
  },
110
137
  params: {
111
- chainName: "Avalanche Network",
138
+ chainName: "polygon zkEVM",
139
+ rpcUrls: ["https://zkevm-rpc.com"],
112
140
  nativeCurrency: {
113
- name: "Avalanche",
114
- symbol: "AVAX",
141
+ name: "Ethereum",
142
+ symbol: "ETH",
115
143
  decimals: 18,
116
144
  },
117
- rpcUrls: ["https://rpc.ankr.com/avalanche"],
118
145
  },
119
146
  },
120
147
  {
@@ -140,6 +167,51 @@ export const networks: Network[] = [
140
167
  },
141
168
  },
142
169
  },
170
+ {
171
+ name: "Avalanche",
172
+ debankName: "avax",
173
+ ankrName: "avalanche",
174
+ zerionName: "avalanche",
175
+ color: "#EB5757",
176
+ chainId: 43114,
177
+ usdcAddress: "0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e",
178
+ balanceResolverAddress: "0x63009f31D054E0ac9F321Cf0D642375236A4Bf1E",
179
+ explorerUrl: "https://snowtrace.io",
180
+ get serverRpcUrl() {
181
+ return process.env?.AVALANCHE_RPC_URL || this.params.rpcUrls[0];
182
+ },
183
+ params: {
184
+ chainName: "Avalanche Network",
185
+ nativeCurrency: {
186
+ name: "Avalanche",
187
+ symbol: "AVAX",
188
+ decimals: 18,
189
+ },
190
+ rpcUrls: ["https://rpc.ankr.com/avalanche"],
191
+ },
192
+ },
193
+ {
194
+ name: "Fantom",
195
+ chainId: 250,
196
+ zerionName: "fantom",
197
+ explorerUrl: "https://ftmscan.com",
198
+ ankrName: "fantom",
199
+ color: "#1969ff",
200
+ get serverRpcUrl() {
201
+ return process.env?.FANTOM_RPC_URL || this.params.rpcUrls[0];
202
+ },
203
+ usdcAddress: "0x04068da6c83afcfa0e13ba15a6696662335d5b75",
204
+ balanceResolverAddress: "0x929376c77a2fb8152375a089a4fccf84ff481479",
205
+ params: {
206
+ rpcUrls: ["https://rpc.ankr.com/fantom"],
207
+ chainName: "Fantom",
208
+ nativeCurrency: {
209
+ name: "Fantom",
210
+ symbol: "FTM",
211
+ decimals: 18,
212
+ },
213
+ },
214
+ },
143
215
  {
144
216
  name: "Gnosis",
145
217
  debankName: "xdai",
@@ -162,27 +234,6 @@ export const networks: Network[] = [
162
234
  },
163
235
  },
164
236
  },
165
- {
166
- name: "Polygon zkEVM",
167
- chainId: 1101,
168
- color: "#8544f6",
169
- explorerUrl: "https://zkevm.polygonscan.com",
170
- balanceResolverAddress: "0x48D1Fa5Ee6691a1E0B45d2B515650997BEA27a01",
171
- usdcAddress: "0xa8ce8aee21bc2a48a5ef670afcc9274c7bbbc035",
172
- get serverRpcUrl() {
173
- return process.env?.POLYGON_ZKEVM_RPC_URL || this.params.rpcUrls[0];
174
- },
175
- params: {
176
- chainName: "polygon zkEVM",
177
- rpcUrls: ["https://zkevm-rpc.com"],
178
-
179
- nativeCurrency: {
180
- name: "Ethereum",
181
- symbol: "ETH",
182
- decimals: 18,
183
- },
184
- },
185
- },
186
237
  {
187
238
  name: "Aurora",
188
239
  chainId: 1313161554,
@@ -204,28 +255,6 @@ export const networks: Network[] = [
204
255
  },
205
256
  },
206
257
  },
207
- {
208
- name: "Fantom",
209
- chainId: 250,
210
- zerionName: "fantom",
211
- explorerUrl: "https://ftmscan.com",
212
- ankrName: "fantom",
213
- color: "#1969ff",
214
- get serverRpcUrl() {
215
- return process.env?.FANTOM_RPC_URL || this.params.rpcUrls[0];
216
- },
217
- usdcAddress: "0x04068da6c83afcfa0e13ba15a6696662335d5b75",
218
- balanceResolverAddress: "0x929376c77a2fb8152375a089a4fccf84ff481479",
219
- params: {
220
- rpcUrls: ["https://rpc.ankr.com/fantom"],
221
- chainName: "Fantom",
222
- nativeCurrency: {
223
- name: "Fantom",
224
- symbol: "FTM",
225
- decimals: 18,
226
- },
227
- },
228
- },
229
258
  {
230
259
  name: AVO_PROD_CHAIN_NAME,
231
260
  chainId: AVO_PROD_CHAIN_ID,
@@ -281,6 +310,7 @@ export const chainUsdcAddresses = [
281
310
  { chainId: 43114, address: '0xa7d7079b0fead91f3e65f86e8915cb59c1a4c664' },
282
311
  { chainId: 1101, address: '0xa8ce8aee21bc2a48a5ef670afcc9274c7bbbc035' },
283
312
  { chainId: 1313161554, address: '0xB12BFcA5A55806AaF64E99521918A4bf0fC40802' },
313
+ { chainId: 8453, address: '0xd9aAEc86B65D86f6A7B5B1b0c42FFA531710b6CA'}
284
314
  ];
285
315
 
286
316
  export const getNetworkByChainId = (
package/utils/services.ts CHANGED
@@ -1,8 +1,15 @@
1
1
  export const fetchTokenByAddress = async (
2
2
  address: string,
3
- chainId: string | number
3
+ chainId: string | number,
4
+ tokens?: ITokenPrice[]
4
5
  ) => {
5
6
  if (!address || !chainId) return null;
7
+
8
+ if (tokens?.length) {
9
+ const token = tokens.find((token) => token.address?.toLocaleLowerCase() === address?.toLocaleLowerCase() && token.chain_id == chainId);
10
+ if (token) return token;
11
+ }
12
+
6
13
  const [token] = (await $fetch(`${blockQueryURL}/${chainId}/tokens`, {
7
14
  params: {
8
15
  sparkline: false,
package/utils/utils.d.ts CHANGED
@@ -11,6 +11,7 @@ declare global {
11
11
  | 250
12
12
  | 634
13
13
  | 1313161554
14
+ | 8453
14
15
  | 63400;
15
16
 
16
17
  type ISlackMessageType = "danger" | "error" | "success" | "banner";