From 35179ecf568250285ea0678f542a7895a86119c0 Mon Sep 17 00:00:00 2001
From: shubhi1928 <shubhijoshi28@gmail.com>
Date: Mon, 21 Feb 2022 14:00:35 +0530
Subject: [PATCH] final design

---
 assets/img/icons/ubiquity/Union.svg           |   3 +
 assets/img/icons/ubiquity/Union1.svg          |   3 +
 assets/img/icons/ubiquity/usdc.svg            |   3 +
 .../protocols/ubiquity/CardUbiquity.vue       | 228 ++++++--
 .../context/ubiquity/SidebarUbiquityApeIn.vue | 107 ++++
 .../ubiquity/SidebarUbiquityWithdraw.vue      | 257 +++++++++
 composables/useSidebar.ts                     |   7 +
 pages/mainnet/ubiquity.vue                    | 487 +++++++++++++-----
 8 files changed, 915 insertions(+), 180 deletions(-)
 create mode 100644 assets/img/icons/ubiquity/Union.svg
 create mode 100644 assets/img/icons/ubiquity/Union1.svg
 create mode 100644 assets/img/icons/ubiquity/usdc.svg
 create mode 100644 components/sidebar/context/ubiquity/SidebarUbiquityApeIn.vue
 create mode 100644 components/sidebar/context/ubiquity/SidebarUbiquityWithdraw.vue

diff --git a/assets/img/icons/ubiquity/Union.svg b/assets/img/icons/ubiquity/Union.svg
new file mode 100644
index 0000000..76251fd
--- /dev/null
+++ b/assets/img/icons/ubiquity/Union.svg
@@ -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>
diff --git a/assets/img/icons/ubiquity/Union1.svg b/assets/img/icons/ubiquity/Union1.svg
new file mode 100644
index 0000000..360d4c5
--- /dev/null
+++ b/assets/img/icons/ubiquity/Union1.svg
@@ -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>
diff --git a/assets/img/icons/ubiquity/usdc.svg b/assets/img/icons/ubiquity/usdc.svg
new file mode 100644
index 0000000..c14c816
--- /dev/null
+++ b/assets/img/icons/ubiquity/usdc.svg
@@ -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>
diff --git a/components/protocols/ubiquity/CardUbiquity.vue b/components/protocols/ubiquity/CardUbiquity.vue
index 69bad48..3b9390e 100644
--- a/components/protocols/ubiquity/CardUbiquity.vue
+++ b/components/protocols/ubiquity/CardUbiquity.vue
@@ -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>
diff --git a/components/sidebar/context/ubiquity/SidebarUbiquityApeIn.vue b/components/sidebar/context/ubiquity/SidebarUbiquityApeIn.vue
new file mode 100644
index 0000000..cdd4410
--- /dev/null
+++ b/components/sidebar/context/ubiquity/SidebarUbiquityApeIn.vue
@@ -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>
diff --git a/components/sidebar/context/ubiquity/SidebarUbiquityWithdraw.vue b/components/sidebar/context/ubiquity/SidebarUbiquityWithdraw.vue
new file mode 100644
index 0000000..59b0771
--- /dev/null
+++ b/components/sidebar/context/ubiquity/SidebarUbiquityWithdraw.vue
@@ -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>
diff --git a/composables/useSidebar.ts b/composables/useSidebar.ts
index 408ebe5..f89ff2d 100644
--- a/composables/useSidebar.ts
+++ b/composables/useSidebar.ts
@@ -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);
diff --git a/pages/mainnet/ubiquity.vue b/pages/mainnet/ubiquity.vue
index a0b5547..fbb6cf0 100644
--- a/pages/mainnet/ubiquity.vue
+++ b/pages/mainnet/ubiquity.vue
@@ -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>