Instadapp/assembly
1
0
Fork 0
mirror of https://github.com/Instadapp/assembly.git synced 2024-07-29 22:37:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

final design

Browse Source
This commit is contained in:
shubhi1928 2022-02-21 14:00:35 +05:30
parent 34e1b5dd8e
commit 35179ecf56
8 changed files with 915 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/img/icons/ubiquity/Union.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.176021 1.02575C-0.0586248 1.26047 -0.0586248 1.64087 0.176021 1.87559L2.30045 4.00004L0.175984 6.12449C-0.0586615 6.35913 -0.0586615 6.7396 0.175984 6.97425L1.02578 7.82401C1.26042 8.05866 1.64089 8.05866 1.87553 7.82401L4 5.69957L6.12446 7.82401C6.35911 8.05866 6.73958 8.05866 6.97422 7.82401L7.82402 6.97425C8.05866 6.7396 8.05866 6.35913 7.82402 6.12449L5.69955 4.00004L7.82398 1.87559C8.05862 1.64087 8.05862 1.26047 7.82398 1.02575L6.97419 0.175986C6.73954 -0.058662 6.35907 -0.058662 6.12443 0.175986L4 2.30043L1.87557 0.175986C1.64093 -0.058662 1.26046 -0.058662 1.02581 0.175986L0.176021 1.02575Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 733 B

3
assets/img/icons/ubiquity/Union1.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0C5.44772 0 5 0.447715 5 1V4.5H1.5C0.947715 4.5 0.5 4.94772 0.5 5.5C0.5 6.05228 0.947715 6.5 1.5 6.5H5V10C5 10.5523 5.44772 11 6 11C6.55228 11 7 10.5523 7 10V6.5H10.5C11.0523 6.5 11.5 6.05228 11.5 5.5C11.5 4.94771 11.0523 4.5 10.5 4.5H7V1C7 0.447715 6.55228 0 6 0Z" fill="#9FB0C9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 438 B

3
assets/img/icons/ubiquity/usdc.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.1651 13.2205C16.1651 11.0448 14.8418 10.3101 12.2799 9.9569C10.3867 9.68376 10.0241 9.23637 10.0241 8.35572C10.0241 7.47036 10.6646 6.92408 11.889 6.92408C13.0051 6.92408 13.6503 7.31496 13.914 8.20973C13.9423 8.30863 13.9988 8.3934 14.0836 8.45462C14.1636 8.51584 14.2625 8.55351 14.3661 8.55351H15.3457C15.4116 8.55351 15.4728 8.54409 15.5294 8.51584C15.5859 8.48758 15.6377 8.44991 15.6801 8.40281C15.7224 8.35572 15.7507 8.29921 15.7695 8.23799C15.7884 8.17677 15.7884 8.11083 15.7789 8.04961C15.4681 6.62739 14.5121 5.775 13.0099 5.50657V4.00899C13.0099 3.88655 12.9628 3.76882 12.8733 3.67934C12.7838 3.58986 12.6661 3.54277 12.5436 3.54277H11.6112C11.4887 3.54277 11.371 3.58986 11.2815 3.67934C11.192 3.76882 11.145 3.88655 11.145 4.00899V5.45476C9.28005 5.71378 8.10271 6.94763 8.10271 8.52526C8.10271 10.5691 9.34598 11.3603 11.9455 11.7135C13.7163 12.0008 14.2202 12.3869 14.2202 13.39C14.2202 14.3931 13.3631 15.0712 12.1575 15.0712C10.5327 15.0712 9.98174 14.3601 9.79808 13.4371C9.77453 13.3288 9.71802 13.2346 9.63796 13.1687C9.55319 13.098 9.44959 13.0604 9.34127 13.0604H8.27696C8.21574 13.0604 8.14981 13.0745 8.09329 13.098C8.03678 13.1263 7.98498 13.164 7.9426 13.2111C7.90021 13.2582 7.87196 13.3147 7.85312 13.3759C7.83428 13.4371 7.83428 13.503 7.8437 13.5643C8.11213 15.1183 9.11051 16.258 11.145 16.5311V18.0052C11.145 18.1276 11.192 18.2453 11.2815 18.3348C11.371 18.4243 11.4887 18.4714 11.6112 18.4714H12.5436C12.6661 18.4714 12.7838 18.4243 12.8733 18.3348C12.9628 18.2453 13.0099 18.1276 13.0099 18.0052V16.5217C14.936 16.2203 16.1651 14.8876 16.1651 13.2205ZM8.87505 19.7665C7.07608 19.1119 5.5267 17.9157 4.42943 16.3522C3.33215 14.7887 2.74348 12.9191 2.74348 11.0071C2.74348 9.09509 3.33215 7.22548 4.42943 5.66197C5.5267 4.09376 7.07608 2.9023 8.87505 2.2477C8.98807 2.1959 9.08697 2.11584 9.15761 2.01223C9.22825 1.90863 9.27063 1.78618 9.27534 1.65903V0.787802C9.28476 0.712453 9.27063 0.632394 9.23767 0.561754C9.2047 0.491114 9.15761 0.429892 9.09168 0.387508C9.03045 0.340415 8.95511 0.316868 8.87976 0.307449C8.80441 0.29803 8.72435 0.312158 8.65371 0.345124C6.39322 1.06565 4.4153 2.48788 3.01662 4.40458C1.61795 6.32128 0.859741 8.63357 0.859741 11.0118C0.859741 13.39 1.61324 15.7023 3.01662 17.619C4.42001 19.5357 6.39322 20.9579 8.65371 21.6785C8.72435 21.7114 8.7997 21.7256 8.87976 21.7161C8.95511 21.7067 9.03045 21.6832 9.09168 21.6361C9.1529 21.589 9.2047 21.5325 9.23767 21.4618C9.27063 21.3912 9.28476 21.3158 9.27534 21.2358V20.3645C9.27063 20.2374 9.22825 20.115 9.15761 20.0113C9.09168 19.8983 8.99278 19.8136 8.87505 19.7665ZM15.4964 0.335705C15.4257 0.30274 15.3504 0.288612 15.2703 0.29803C15.195 0.307449 15.1196 0.330996 15.0584 0.378089C14.9972 0.425183 14.9454 0.481695 14.9124 0.552335C14.8795 0.622975 14.8653 0.698325 14.8748 0.778384V1.64961C14.8795 1.77676 14.9218 1.89921 14.9925 2.00281C15.0631 2.10642 15.162 2.18648 15.275 2.23828C17.074 2.89288 18.6234 4.08905 19.7207 5.65256C20.8179 7.22077 21.4066 9.08567 21.4066 10.9977C21.4066 12.9097 20.8179 14.7793 19.7207 16.3428C18.6234 17.911 17.074 19.1024 15.275 19.757C15.1573 19.8041 15.0537 19.8842 14.9831 19.9878C14.9124 20.0914 14.8748 20.2186 14.8748 20.3457V21.2169C14.8653 21.2923 14.8795 21.3724 14.9124 21.443C14.9454 21.5136 14.9925 21.5749 15.0584 21.6172C15.1196 21.6643 15.195 21.6879 15.2703 21.6973C15.3457 21.7067 15.4257 21.6926 15.4964 21.6596C17.7569 20.9391 19.7348 19.5169 21.1335 17.6002C22.5369 15.6835 23.2904 13.3712 23.2904 10.993C23.2904 8.61473 22.5369 6.30245 21.1335 4.38574C19.7348 2.47846 17.7616 1.05624 15.4964 0.335705Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

228
components/protocols/ubiquity/CardUbiquity.vue
View File

@ -1,71 +1,191 @@
<template>
<div class="shadow rounded-md mt-2 p-[30px]">
<div class="shadow rounded-md mt-2 p-[30px]">
<div class="flex place-content-between">
<div class="flex">
<div class="mr-4 ">
<div
style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
class="w-[72px] h-[72px] rounded-full flex items-center justify-center border border-[#CCDCF3]"
>
<div
class="w-[56px] h-[56px] rounded-full flex items-center justify-center bg-[#FFB45E]"
>
<RainbowIcon class="w-[30.5px] h-[30.5px] text-bold"/>
</div>
</div>
<div class="flex">
<div class="mr-4">
<div
style="
background: radial-gradient(
42.15% 42.15% at 48.94% 48.94%,
#d6dae0 75.67%,
#f0f3f9 100%
),
#c4c4c4;
"
class="
w-[72px]
h-[72px]
rounded-full
flex
items-center
justify-center
border border-[#CCDCF3]
"
>
<div
class="
w-[56px]
h-[56px]
rounded-full
flex
items-center
justify-center
bg-[#FFB45E]
"
>
<RainbowIcon class="w-[30.5px] h-[30.5px] text-bold" />
</div>
<div class="flex flex-col justify-center">
<div class="text-lg font-semibold">$3,612.017</div>
<div class="flex">
<div class="text-[#C0C5D7] text-xs font-semibold">4.2 UAD3CRV-LP</div>
<DollarIcon class="ml-1" />
</div>
</div>
</div>
<div class="flex flex-col justify-center">
<div class="text-lg font-semibold">$3,612.017</div>
<div class="flex">
<div class="text-[#C0C5D7] text-xs font-semibold">
4.2 UAD3CRV-LP
</div>
<DollarIcon class="ml-1" />
</div>
</div>
<div class="mr-4 h-[32px] w-[140px] mr-[-30px] text-xs font-semibold bg-[#1874FF] shadow text-white rounded-l-[4px] justify-center items-center hidden sm:flex ">
Staked
</div>
</div>
<div
class="
mr-4
h-[32px]
w-[140px]
mr-[-30px]
text-xs
font-semibold
bg-[#1874FF]
shadow
text-white
rounded-l-[4px]
justify-center
items-center
hidden
sm:flex
"
>
Staked
</div>
</div>
<div class="place-content-between mt-[24px] grid w-full grid-cols-1 gap-1 md:grid-cols-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content px-1 ">
<div class="flex justify-center">
<button class="mr-4 h-[40px] md:h-[32px] w-full border-2 border-[#1874FF] text-xs font-semibold bg-white text-[#1874FF] rounded-[4px] ">
APE IN
</button></div>
<div class="flex justify-center"><button class="mr-4 h-[40px] md:h-[32px] w-full border-2 border-[#1874FF] text-xs font-semibold bg-white text-[#1874FF] rounded-[4px] ">
WITHDRAW
</button></div>
<div class="flex justify-center"><button class="mr-4 h-[40px] md:h-[32px] w-full border-2 border-[#1874FF] text-xs font-semibold bg-white text-[#1874FF] rounded-[4px] ">
STAKE
</button></div>
<div class="flex justify-center"><button class="mr-4 h-[40px] md:h-[32px] w-full border-2 border-[#1874FF] text-xs font-semibold bg-white text-[#1874FF] rounded-[4px] ">
UNSTAKE
</button></div>
<div
class="
place-content-between
mt-[24px]
grid
w-full
grid-cols-1
gap-1
md:grid-cols-4
sm:grid-cols-2
xxl:gap-6
min-w-max-content
px-1
"
>
<div class="flex justify-center">
<button
class="
mr-4
h-[40px]
md:h-[32px]
w-full
border-2 border-[#1874FF]
text-xs
font-semibold
bg-white
text-[#1874FF]
rounded-[4px]
"
@click="$router.push({ hash: 'apein' })"
>
APE IN
</button>
</div>
<div class="flex justify-center">
<button
class="
mr-4
h-[40px]
md:h-[32px]
w-full
border-2 border-[#1874FF]
text-xs
font-semibold
bg-white
text-[#1874FF]
rounded-[4px]
"
@click="$router.push({ hash: 'withdraw' })"
>
WITHDRAW
</button>
</div>
<div class="flex justify-center">
<button
class="
mr-4
h-[40px]
md:h-[32px]
w-full
border-2 border-[#1874FF]
text-xs
font-semibold
bg-white
text-[#1874FF]
rounded-[4px]
"
>
STAKE
</button>
</div>
<div class="flex justify-center">
<button
class="
mr-4
h-[40px]
md:h-[32px]
w-full
border-2 border-[#1874FF]
text-xs
font-semibold
bg-white
text-[#1874FF]
rounded-[4px]
"
>
UNSTAKE
</button>
</div>
</div>
<div class="border-t-2 border-[#9FB0C9] text-[#9FB0C9] text-xl font-semibold flex items-center justify-center mt-[25px] pt-[36px]">
Stake and lookup tokens for UBQ Rewards
<div
class="
border-t-2 border-[#9FB0C9]
text-[#9FB0C9] text-xl
font-semibold
flex
items-center
justify-center
mt-[25px]
pt-[36px]
"
>
Stake and lookup tokens for UBQ Rewards
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { defineComponent } from "@vue/composition-api";
import RainbowIcon from "~/assets/img/icons/ubiquity/rainbow.svg?inline";
import DollarIcon from "~/assets/img/icons/ubiquity/dollar.svg?inline";
export default defineComponent({
components:{
RainbowIcon,
DollarIcon,
},
setup() {
},
})
components: {
RainbowIcon,
DollarIcon,
},
setup() {},
});
</script>

107
components/sidebar/context/ubiquity/SidebarUbiquityApeIn.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<SidebarContextRootContainer >
<div class="h-[160px]">
<h3 class=" text-center text-lg font-bold"> APE INTO LP</h3>
<h4 class=" text-center text-[#1874FF] text-sm font-semibold">Created by the Ubiquity Team</h4>
<ul class="list-disc pl-[68px] mt-[32px] text-[#A5ADC6] font-semibold text-md">
<li>Deposits Stablecoins into uAD3CRV-LP</li>
<li class="mt-1">Stakes and lockups LP tokens for UBQ Rewards</li>
</ul>
</div>
<div class="bg-[#1874FF] bg-opacity-[0.04] h-full">
<div>
<div class="mt-10 p-6">
<h3 class="text-primary-gray text-xs font-semibold mb-2.5">
TOKEN TO ZAP
</h3>
<input-numeric
placeholder="0 DAI">
</input-numeric>
</div>
<div class="mt-0 px-6">
<h3 class="text-primary-gray text-xs font-semibold mb-2.5">
LOCKUP TIME IN WEEKS
</h3>
<input-numeric
placeholder="1 - 208 weeks">
</input-numeric>
</div>
</div>
<div class="p-6 " >
<div class="text-[#9FB0C9] text-xs mb-2 font-semibold">ESTIMATED LP VALUE</div>
<div class="flex">
<div
style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
class="w-[56px] h-[56px] rounded-full flex items-center justify-center border border-[#CCDCF3]"
>
<div
class="w-[43px] h-[43px] rounded-full flex items-center justify-center bg-[#FFB45E]"
>
<RainbowIcon class="w-[23px] h-[23px] text-bold"/>
</div>
</div>
<div class="flex flex-col justify-center ml-2">
<div class="text-lg font-semibold">$3,612.017</div>
<div class="flex">
<div class="text-[#C0C5D7] text-xs font-semibold">4.2 UAD3CRV-LP</div>
<DollarIcon class="ml-1" />
</div>
</div>
</div>
</div>
<div class="p-6 mt-[160px]">
<div class="bg-[#F56565] bg-opacity-[0.1] h-[62px] mb-3 rounded-md ">
<div class="flex place-content-between items-center p-4">
<div class="list-disc text-[#F56565] text-xs font-semibold ">
<li>Please provide a valid amount</li>
<li>Position will liquidate</li>
</div>
<div>
<div
class="w-[22px] h-[22px] rounded-full flex items-center justify-center bg-[#F56565]"
>
<UnionIcon class="w-[8px] h-[8px] text-bold"/>
</div>
</div>
</div>
<div></div>
</div>
<div><button class="mr-4 h-[40px] w-full border-2 text-xs font-semibold bg-[#9FB0C9] active:bg-[#1874FF] text-white rounded-[4px] ">
APE IN
</button></div>
<div class="text-[#9FB0C9] text-xs font-semibold mt-2">Instadapp does not charge a fee for this operation</div>
</div>
</div>
</SidebarContextRootContainer>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import InputNumeric from '~/components/common/input/InputNumeric.vue'
import RainbowIcon from "~/assets/img/icons/ubiquity/rainbow.svg?inline";
import DollarIcon from "~/assets/img/icons/ubiquity/dollar.svg?inline";
import UnionIcon from "~/assets/img/icons/ubiquity/Union.svg?inline";
export default defineComponent({
components:{InputNumeric,RainbowIcon,DollarIcon,UnionIcon},
setup() {
},
})
</script>

257
components/sidebar/context/ubiquity/SidebarUbiquityWithdraw.vue Normal file
View File

@ -0,0 +1,257 @@
<template>
<SidebarContextRootContainer>
<div class="h-[160px]">
<h3 class="text-center text-lg font-bold">Withdraw Out of LP</h3>
<h4 class="text-center text-[#1874FF] text-sm font-semibold">
Created by the Ubiquity Team
</h4>
<ul
class="
list-disc
pl-[68px]
mt-[32px]
text-[#A5ADC6]
font-semibold
text-md
"
>
<li>Withdraw Loquidity from uAD3CRV pool and returns stablecoins</li>
</ul>
</div>
<div class="bg-[#1874FF] bg-opacity-[0.04] h-full">
<div>
<div class="mt-10 p-6">
<h3 class="text-primary-gray text-xs font-semibold mb-2.5">
WITHDRAWAL AMOUNT
</h3>
<input-numeric placeholder="45,425 DAI"> </input-numeric>
</div>
<div class="mt-0 px-6 flex">
<select
class="
block
appearance-none
w-[125px]
bg-white
border border-gray-400
hover:border-gray-500
px-4
py-2
pr-8
rounded
shadow
leading-tight
focus:outline-none focus:shadow-outline
"
>
<option>USDC</option>
<option>USDT</option>
<option>INST</option>
</select>
<h3 class="text-primary-gray text-xs font-semibold ml-6">
SELECT OUTPUT CURRENCY
</h3>
</div>
</div>
<div class="p-6">
<div class="text-[#9FB0C9] text-xs mb-2 font-semibold">
ESTIMATED LP VALUE
</div>
<div class="flex">
<div
style="
background: radial-gradient(
42.15% 42.15% at 48.94% 48.94%,
#d6dae0 75.67%,
#f0f3f9 100%
),
#c4c4c4;
"
class="
w-[56px]
h-[56px]
rounded-full
flex
items-center
justify-center
border border-[#CCDCF3]
"
>
<div
class="
w-[43px]
h-[43px]
rounded-full
flex
items-center
justify-center
bg-[#FFB45E]
"
>
<RainbowIcon class="w-[23px] h-[23px] text-bold" />
</div>
</div>
<div class="flex flex-col justify-center ml-2">
<div class="text-lg font-semibold">$3,612.017</div>
<div class="flex">
<div class="text-[#C0C5D7] text-xs font-semibold">
4.2 UAD3CRV-LP
</div>
<DollarIcon class="ml-1" />
</div>
</div>
</div>
</div>
<div
class="
flex
mx-6
p-4
border-dashed border-2 border-[#9FB0C9]
rounded-md
place-content-between
"
>
<div class="flex">
<div
style="
background: radial-gradient(
42.15% 42.15% at 48.94% 48.94%,
#d6dae0 75.67%,
#f0f3f9 100%
),
#c4c4c4;
"
class="
w-[40px]
h-[40px]
rounded-full
flex
items-center
justify-center
border border-[#CCDCF3]
"
>
<div
class="
w-[32px]
h-[32px]
rounded-full
flex
items-center
justify-center
bg-[#FFB45E]
"
>
<RainbowIcon class="w-[17px] h-[17px] text-bold" />
</div>
</div>
<div class="flex flex-col justify-center ml-2">
<div class="text-[14px] font-semibold">$0.017</div>
<div class="flex">
<div class="text-[#C0C5D7] text-[10px] font-semibold">
4.2 UAD3CRV-LP
</div>
</div>
</div>
</div>
<div class="flex items-center">
<UnionIcon1 class="w-[11px] h-[11px] text-[#C4C4C4] text-bold" />
</div>
<div class="flex">
<div
style="
background: radial-gradient(
42.15% 42.15% at 48.94% 48.94%,
#d6dae0 75.67%,
#f0f3f9 100%
),
#c4c4c4;
"
class="
w-[40px]
h-[40px]
rounded-full
flex
items-center
justify-center
border border-[#CCDCF3]
"
>
<div
class="
w-[32px]
h-[32px]
rounded-full
flex
items-center
justify-center
bg-[#2775C9]
"
>
<UsdcIcon class="w-[17px] h-[17px] text-bold" />
</div>
</div>
<div class="flex flex-col justify-center ml-2">
<div class="text-[14px] font-semibold">$400</div>
<div class="flex">
<div class="text-[#C0C5D7] text-[10px] font-semibold">
400 USDC
</div>
</div>
</div>
</div>
</div>
<div class="p-6 mt-[180px]">
<div>
<button
class="
mr-4
h-[40px]
w-full
border-2
text-xs
font-semibold
bg-[#1874FF]
text-white
rounded-[4px]
"
>
Withdraw
</button>
</div>
<div class="text-[#9FB0C9] text-xs font-semibold mt-2">
Instadapp does not charge a fee for this operation
</div>
</div>
</div>
</SidebarContextRootContainer>
</template>
<script>
import { defineComponent } from "@vue/composition-api";
import InputNumeric from "~/components/common/input/InputNumeric.vue";
import RainbowIcon from "~/assets/img/icons/ubiquity/rainbow.svg?inline";
import DollarIcon from "~/assets/img/icons/ubiquity/dollar.svg?inline";
import UnionIcon from "~/assets/img/icons/ubiquity/Union.svg?inline";
import UnionIcon1 from "~/assets/img/icons/ubiquity/Union1.svg?inline";
import UsdcIcon from "~/assets/img/icons/ubiquity/usdc.svg?inline";
export default defineComponent({
components: {
InputNumeric,
RainbowIcon,
DollarIcon,
UnionIcon,
UnionIcon1,
UsdcIcon,
},
setup() {},
});
</script>

7
composables/useSidebar.ts
View File

@ -55,6 +55,9 @@ import SidebarUniverseWithdraw from '~/components/sidebar/context/universe/Sideb
import SidebarStrategySelection from '~/components/sidebar/context/strategy/SidebarStrategySelection.vue'
import SidebarStrategy from '~/components/sidebar/context/strategy/SidebarStrategy.vue'
import SidebarUbiquityApeIn from '~/components/sidebar/context/ubiquity/SidebarUbiquityApeIn.vue';
import SidebarUbiquityWithdraw from '~/components/sidebar/context/ubiquity/SidebarUbiquityWithdraw.vue';
const sidebars = {
"#overview" : {component: SidebarOverview, back : false, close : true },
"#deposit-overview": {component: SidebarDepositOverview, back: { hash: 'overview' } },
@ -107,6 +110,10 @@ const sidebars = {
"/mainnet/yearn-v2": { component: null },
"/mainnet/yearn-v2#supply": { component: SidebarYearnV2Supply },
"/mainnet/yearn-v2#withdraw": { component: SidebarYearnV2Withdraw },
"/mainnet/ubiquity#apein": { component: SidebarUbiquityApeIn },
"/mainnet/ubiquity#withdraw": { component: SidebarUbiquityWithdraw },
};
const sidebar = ref(null);

487
pages/mainnet/ubiquity.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div>
<div>
<nuxt-link
to="/"
@ -9,19 +9,44 @@
Apps
</nuxt-link>
</div>
<div class="mt-10 flex items-center justify-between">
<div class="mt-10 flex items-center justify-between">
<div class="flex items-center">
<div
style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
class="w-16 h-16 rounded-full flex items-center justify-center border border-[#CCDCF3]"
style="
background: radial-gradient(
42.15% 42.15% at 48.94% 48.94%,
#d6dae0 75.67%,
#f0f3f9 100%
),
#c4c4c4;
"
class="
w-16
h-16
rounded-full
flex
items-center
justify-center
border border-[#CCDCF3]
"
>
<div
class="w-12 h-12 rounded-full flex items-center justify-center bg-[#1874FF]"
class="
w-12
h-12
rounded-full
flex
items-center
justify-center
bg-[#1874FF]
"
>
<UbiquityIcon class="w-8 h-8 text-white" />
</div>
</div>
<h1 class="ml-4 text-primary-black text-2xl font-semibold">Ubiquity DAO</h1>
<h1 class="ml-4 text-primary-black text-2xl font-semibold">
Ubiquity DAO
</h1>
</div>
</div>
@ -29,139 +54,352 @@
<h2 class="text-primary-gray text-lg font-semibold">Overview</h2>
<div
class="px-0.5 mt-6 grid w-full grid-cols-1 gap-1 md:grid-cols-3 sm:grid-cols-2 xl:gap-[17px]"
class="
px-0.5
mt-6
grid
w-full
grid-cols-1
gap-1
md:grid-cols-3
sm:grid-cols-2
xl:gap-[17px]
"
>
<div class="shadow rounded-md place-content-between flex">
<div class="flex flex-col place-content-between py-[24px] pl-[24px] pr-[24px] w-[305px] ">
<h3 class="text-[19px] text-primary-black font-semibold leading-[22px]">
Stabilize
Liquity Protocol
<div class="shadow rounded-md place-content-between flex">
<div
class="
flex flex-col
place-content-between
py-[24px]
pl-[24px]
pr-[24px]
w-[305px]
"
>
<h3
class="
text-[19px] text-primary-black
font-semibold
leading-[22px]
"
>
Stabilize Liquity Protocol
</h3>
<p class="mt-1 text-primary font-medium flex justify-end text-[14px] text-[#1874FF]">
<a target="_blank" href="https://docs.liquity.org/faq/stability-pool-and-liquidations">- Learn More -</a></p>
<p
class="
mt-1
text-primary
font-medium
flex
justify-end
text-[14px] text-[#1874FF]
"
>
<a
target="_blank"
href="https://docs.liquity.org/faq/stability-pool-and-liquidations"
>- Learn More -</a
>
</p>
</div>
<div class="flex items-center bg-[#1874FF] shadow rounded-r-md w-[51px] justify-center ">
<SVGStableize class="text-white w-[27px] h-[27px]"/>
<div
class="
flex
items-center
bg-[#1874FF]
shadow
rounded-r-md
w-[51px]
justify-center
"
>
<SVGStableize class="text-white w-[27px] h-[27px]" />
</div>
</div>
<div class="shadow rounded-md place-content-between flex">
<div class="flex flex-col place-content-between py-[24px] pl-[24px] pr-[20px] w-[305px]">
<h3 class="text-[19px] text-primary-black font-semibold leading-[22px]">
Get Passive
Yield on Your LUSD
<div class="shadow rounded-md place-content-between flex">
<div
class="
flex flex-col
place-content-between
py-[24px]
pl-[24px]
pr-[20px]
w-[305px]
"
>
<h3
class="
text-[19px] text-primary-black
font-semibold
leading-[22px]
"
>
Get Passive Yield on Your LUSD
</h3>
<p class="mt-1 text-primary font-medium flex justify-end text-[14px] text-[#1874FF]">
<a target="_blank" href="https://medium.com/b-protocol/b-protocol-liquity-integration-is-live-1342605e7cfb">- Learn More -</a></p>
<p
class="
mt-1
text-primary
font-medium
flex
justify-end
text-[14px] text-[#1874FF]
"
>
<a
target="_blank"
href="https://medium.com/b-protocol/b-protocol-liquity-integration-is-live-1342605e7cfb"
>- Learn More -</a
>
</p>
</div>
<div class="flex items-center bg-[#1874FF] shadow rounded-r-md w-[51px] flex justify-center">
<SVGEarn class="text-white w-[27px] h-[27px]"/>
<div
class="
flex
items-center
bg-[#1874FF]
shadow
rounded-r-md
w-[51px]
flex
justify-center
"
>
<SVGEarn class="text-white w-[27px] h-[27px]" />
</div>
</div>
<div class="shadow rounded-md place-content-between flex">
<div class="flex flex-col place-content-between py-[24px] pl-[24px] pr-[20px] w-[305px]">
<h3 class="text-[19px] text-primary-black font-semibold leading-[22px]">
Improved Liquidity Mining Program
<div class="shadow rounded-md place-content-between flex">
<div
class="
flex flex-col
place-content-between
py-[24px]
pl-[24px]
pr-[20px]
w-[305px]
"
>
<h3
class="
text-[19px] text-primary-black
font-semibold
leading-[22px]
"
>
Improved Liquidity Mining Program
</h3>
<p class="mt-1 text-primary font-medium flex justify-end text-[14px] text-[#1874FF]">
<a target="_blank" href="https://docs.bprotocol.org/info/liquidity-mining">- Learn More -</a></p>
<p
class="
mt-1
text-primary
font-medium
flex
justify-end
text-[14px] text-[#1874FF]
"
>
<a
target="_blank"
href="https://docs.bprotocol.org/info/liquidity-mining"
>- Learn More -</a
>
</p>
</div>
<div class="flex items-center bg-[#1874FF] shadow rounded-r-md w-[51px] flex justify-center">
<SVGUse class="text-white w-[27px]"/>
<div
class="
flex
items-center
bg-[#1874FF]
shadow
rounded-r-md
w-[51px]
flex
justify-center
"
>
<SVGUse class="text-white w-[27px]" />
</div>
</div>
</div>
<div class="px-0.5 mt-6 grid w-full grid-cols-1 gap-1 md:grid-cols-2 xl:gap-[17px]">
<div class="shadow rounded-lg place-content-between flex items-center">
<div class="flex place-content-between">
<div class="flex items-center rounded-r-lg h-[108px] w-[100px] flex justify-center">
<div
style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
class="w-12 h-12 rounded-full flex items-center justify-center border border-[#CCDCF3]"
>
<div
class="w-8 h-8 rounded-full flex items-center justify-center bg-[#00E5DC]"
>
<UbiquityIcon2 class="w-[20px] text-bold"/>
</div>
</div>
</div>
<div class="flex flex-col justify-center">
<div class="text-lg font-semibold">$325,904</div>
<div class="text-[#C0C5D7] text-xs">UAD Twao Price </div>
</div>
</div>
<div class="flex items-center rounded-lg h-[108px] w-[51px] flex justify-center">
<CoinStackIcon class="w-[27px]"/>
</div>
</div>
<div class="shadow rounded-md place-content-between flex items-center">
<div class="flex place-content-between">
<div class="flex items-center rounded-r-lg h-[108px] w-[100px] flex justify-center">
<div
style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
class="w-12 h-12 rounded-full flex items-center justify-center border border-[#CCDCF3]"
>
<div
class="w-8 h-8 rounded-full flex items-center justify-center bg-[#00E5DC]"
>
<UbiquityIcon1 class="w-[20px] text-bold"/>
</div>
</div>
</div>
<div class="flex flex-col justify-center">
<div class="text-lg font-semibold">4.320</div>
<div class="text-[#C0C5D7] text-xs">UBQ Rewards</div>
</div>
</div>
<div class="flex items-center rounded-lg h-[108px] w-[190px] flex justify-center">
<button
class="mr-4 h-10 w-full text-xs font-semibold bg-[#1874FF] shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
<div
class="
px-0.5
mt-6
grid
w-full
grid-cols-1
gap-1
md:grid-cols-2
xl:gap-[17px]
"
>
CLAIM ALL
</button>
</div>
<div class="shadow rounded-lg place-content-between flex items-center">
<div class="flex place-content-between">
<div
class="
flex
items-center
rounded-r-lg
h-[108px]
w-[100px]
flex
justify-center
"
>
<div
style="
background: radial-gradient(
42.15% 42.15% at 48.94% 48.94%,
#d6dae0 75.67%,
#f0f3f9 100%
),
#c4c4c4;
"
class="
w-12
h-12
rounded-full
flex
items-center
justify-center
border border-[#CCDCF3]
"
>
<div
class="
w-8
h-8
rounded-full
flex
items-center
justify-center
bg-[#00E5DC]
"
>
<UbiquityIcon2 class="w-[20px] text-bold" />
</div>
</div>
</div>
<div class="flex flex-col justify-center">
<div class="text-lg font-semibold">$325,904</div>
<div class="text-[#C0C5D7] text-xs">UAD Twao Price</div>
</div>
</div>
<div
class="
flex
items-center
rounded-lg
h-[108px]
w-[51px]
flex
justify-center
"
>
<CoinStackIcon class="w-[27px]" />
</div>
</div>
<div class="shadow rounded-md place-content-between flex items-center">
<div class="flex place-content-between">
<div
class="
flex
items-center
rounded-r-lg
h-[108px]
w-[100px]
flex
justify-center
"
>
<div
style="
background: radial-gradient(
42.15% 42.15% at 48.94% 48.94%,
#d6dae0 75.67%,
#f0f3f9 100%
),
#c4c4c4;
"
class="
w-12
h-12
rounded-full
flex
items-center
justify-center
border border-[#CCDCF3]
"
>
<div
class="
w-8
h-8
rounded-full
flex
items-center
justify-center
bg-[#00E5DC]
"
>
<UbiquityIcon1 class="w-[20px] text-bold" />
</div>
</div>
</div>
<div class="flex flex-col justify-center">
<div class="text-lg font-semibold">4.320</div>
<div class="text-[#C0C5D7] text-xs">UBQ Rewards</div>
</div>
</div>
<div
class="
flex
items-center
rounded-lg
h-[108px]
w-[190px]
flex
justify-center
"
>
<button
class="
mr-4
h-10
w-full
text-xs
font-semibold
bg-[#1874FF]
shadow
text-white
rounded-[4px]
hover:bg-primary-blue-hover
"
>
CLAIM ALL
</button>
</div>
</div>
</div>
<div class="mt-10">
<div class="text-[#C0C5D7] text-sm font-semibold flex items-center">
<GorillaIcon class="w-4 h-4 mr-3" />
APE INTO UAD POOLS
<GorillaIcon class="w-4 h-4 mr-3" />
APE INTO UAD POOLS
</div>
<CardUbiquity />
</div>
<CardUbiquity/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent} from "@nuxtjs/composition-api";
import { defineComponent } from "@nuxtjs/composition-api";
import BackIcon from "~/assets/icons/back.svg?inline";
import UbiquityIcon from "~/assets/icons/ubiquity.svg?inline";
import UbiquityIcon1 from "~/assets/img/icons/ubiquity/ubiquity1.svg?inline";
@ -171,26 +409,23 @@ import SVGBalance from "@/assets/img/icons/balance.svg?inline";
import SVGStableize from "@/assets/img/icons/ubiquity/stableize.svg?inline";
import SVGUse from "@/assets/img/icons/ubiquity/use.svg?inline";
import SVGEarn from "@/assets/img/icons/ubiquity/earn.svg?inline";
import CardUbiquity from '~/components/protocols/ubiquity/CardUbiquity.vue';
import CardUbiquity from "~/components/protocols/ubiquity/CardUbiquity.vue";
import GorillaIcon from "~/assets/img/icons/ubiquity/gorilla.svg?inline";
export default defineComponent({
components: {
BackIcon,
UbiquityIcon,
SVGBalance,
SVGStableize,
SVGUse,
SVGEarn,
UbiquityIcon1,
UbiquityIcon2,
CoinStackIcon,
CardUbiquity,
GorillaIcon
BackIcon,
UbiquityIcon,
SVGBalance,
SVGStableize,
SVGUse,
SVGEarn,
UbiquityIcon1,
UbiquityIcon2,
CoinStackIcon,
CardUbiquity,
GorillaIcon,
},
setup() {
}
setup() {},
});
</script>