Dev

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@albus-finance/sdk": "0.2.6",
-    "@albus-finance/swap-sdk": "0.1.5-next.1",
+    "@albus-finance/swap-sdk": "0.1.5-next.4",
     "@albus-finance/transfer-sdk": "0.2.4",
     "@coral-xyz/anchor": "^0.29.0",
     "@metaplex-foundation/beet": "^0.7.1",

src/App.vue

@@ -31,7 +31,7 @@ const route = useRoute()
 const router = useRouter()
 watch(route, () => {
   if (route.name === 'index' || route.name === 'all' || (route.name && !router.hasRoute(route.name))) {
-    router.push('/transfer')
+    router.push('/swap')
   }
 }, { immediate: true })
 </script>

src/assets/styles/_variables.scss

@@ -1,7 +1,7 @@
 // colors
 $primary: #23353d;
 $secondary: #455A64;
-$yellow: #ffd140;
+$warning: #ffd140;
 $negative: #DC3E38;
 $negative-light: #ea4b45;
 $positive: #007D48;

src/assets/styles/components/_pool-card.scss

@@ -4,49 +4,200 @@
   border: 1px solid #fff;
 
   @media(min-width: $breakpoint-md) {
-    min-width: 397px;
-    max-width: 397px;
+    min-width: calc(50% - 24px);
+    max-width: calc(50% - 24px);
   }
 
   @media(max-width: 389px) {
     min-width: 316px;
   }
 
+  &__body {
+    display: flex;
+    flex-direction: column;
+  }
 
-  &__head {
-    font-size: 15px;
+  &__income {
+    display: flex;
+    align-items: center;
+    background-color: #F9F9F9;
+    margin-right: -16px; 
+    margin-left: -16px; 
+    padding: 8px 24px;
+    .body--dark & {
+      background-color: $primary;
+    }
+
+    &__user {
+      @media(max-width: $breakpoint-xs) {
+        justify-content: flex-end;
+      }
+      .pool-card__label {
+        @media(max-width: $breakpoint-xs) {
+          text-align: right;
+        }
+      }
+      > div:first-child {
+        @media(max-width: $breakpoint-xs) {
+          margin-bottom: 4px;
+        }
+      }
+    }
+  }
+
+  &__income &__label {
+    color: #000;
+    .body--dark & {
+      color: #fff;
+    }
+  }
+
+  &__apr-label {
+    font-size: 13px;
+    line-height: 15px;
+    color: $secondary;
     font-weight: 500;
-    padding: 9px 20px;
-    background-color: $secondary;
-    color: #fff;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    .body--dark & {
+      color: #fff;
+    }
   }
 
-  &__subtitle {
+  &__apr-amount {
+    color: #000;
+    font-size: 32px;
+    line-height: 34px;
     font-weight: 500;
-    font-size: 16px;
-    text-transform: uppercase;
+    .body--dark & {
+      color: #fff;
+    }
   }
 
-  &__pubkey {
-    word-break: break-all;
+  &__stats {
+    font-size: 15px;
+    display: flex;
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 0 8px;
+      margin: 0 auto;
+    }
+
+    &__delimiter {
+      height: 38px;
+      width: 1px;
+      margin: 0 auto;
+      background-color: #A4A4A4;
+    }
+  }
+
+  &__label {
+    font-size: 11px;
+    line-height: 13px;
+    color: $secondary;
+    .body--dark & {
+      color: #fff;
+    }
+  }
+
+  &__amount {
+    font-size: 19px;
+    line-height: 19px;
+    color: #000;
+    font-weight: 500;
+    .body--dark & {
+      color: #fff;
+    }
   }
 
   &__icons {
-    height: 36px;
+    height: 46px;
 
     img {
       height: 100%;
       border-radius: 50%;
     }
 
     :nth-child(2) {
-      margin-left: -8px;
+      margin-left: -14px;
+    }
+  }
+
+  &__actions {
+    height: 56px;
+    .q-btn__content {
+      font-size: 17px;
+    }
+  }
+
+  &__subtitle {
+    font-weight: 500;
+    font-size: 23px;
+    text-transform: uppercase;
+  }
+
+  &__pubkey {
+    word-break: break-all;
+    font-size: 16px;
+    color: #000;
+    font-family: Courier;
+    .body--dark & {
+      color: #fff;
     }
   }
 
   body.body--dark & {
     border: 1px solid #ffffff42;
   }
+
+  .policy-info {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    font-size: 16px;
+  }
+}
+
+.pools-total {
+  display: flex;
+  flex-direction: column;
+  background-color: $primary;
+  border-radius: 6px;
+  padding: 13px 24px;
+  font-weight: 500;
+  min-width: 181px;
+  .body--dark & {
+    background-color: $secondary;
+  }
+  &__name {
+    text-transform: uppercase;
+    color: #E1E1E1;
+    font-size: 13px;
+  }
+  &__value {
+    font-size: 25px;
+    color: #fff;
+  }
+}
+
+.pool-info {
+  width: 390px;
+  max-width: 80vw;
+
+  &__delimiter {
+    height: 38px;
+    width: 1px;
+    margin: 0 16px;
+    background-color: #A4A4A4;
+  }
+  &__fees {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #A4A4A4;
+  }
+  &__addresses {
+    .pool-card__label {
+      margin-bottom: -8px;
+    }
+  }
 }

src/assets/styles/components/_sidebar.scss

@@ -158,7 +158,7 @@ aside {
           font-weight: 300;
           font-size: 12px;
           line-height: 14px;
-          color: $yellow;
+          color: $warning;
         }
       }
     }
@@ -287,7 +287,7 @@ aside {
   }
 
   .active-route {
-    background: $yellow !important;
+    background: $warning !important;
 
     span {
       color: $primary;

src/assets/styles/components/_swap.scss

@@ -1,7 +1,7 @@
 $swap-min-height: 392px;
 $swap-card-border-color: #fff;
 $swap-info-border-color: $light-gray-middle;
-$swap-base-color: $yellow !default;
+$swap-base-color: $warning !default;
 $swap-header-color: $swap-base-color !default;
 $swap-btn-color: $swap-base-color !default;
 $swap-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !default;

src/components/ClusterSelector.vue

@@ -29,7 +29,7 @@ function select(e: Endpoint) {
     :label="endpoint.cluster"
     :model-value="false"
     auto-close
-    color="yellow"
+    color="warning"
     text-color="black"
     rounded
     unelevated

src/components/CopyToClipboard.vue

@@ -26,20 +26,19 @@ export default defineComponent({
 <template>
   <q-btn flat round dense>
     <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
-      height="24"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      width="24"
       xmlns="http://www.w3.org/2000/svg"
       @click="copy"
     >
-      <path
-        d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-      />
+      <g id="Group 3731">
+        <g id="Group 3646">
+          <path id="Vector" d="M14.2856 3.46362H2.14284C0.959381 3.46362 0 4.39401 0 5.54171V17.3175C0 18.4652 0.959381 19.3956 2.14284 19.3956H14.2856C15.469 19.3956 16.4284 18.4652 16.4284 17.3175V5.54171C16.4284 4.39401 15.469 3.46362 14.2856 3.46362Z" :fill="$q.dark.isActive ? '#fff' : '#455A64'" />
+          <path id="Vector_2" d="M17.8571 1.34184e-09H5.00008C3.82302 -4.05863e-05 2.86628 0.92069 2.85724 2.06214C2.85724 2.0677 2.85724 2.07253 2.85724 2.07809H14.2857C16.2572 2.08036 17.8548 3.62967 17.8571 5.54155V16.6247C17.8629 16.6247 17.8678 16.6247 17.8736 16.6247C19.0506 16.6159 20 15.6881 20 14.5466V2.07809C20 0.930391 19.0406 1.34184e-09 17.8571 1.34184e-09Z" :fill="$q.dark.isActive ? '#fff' : '#455A64'" />
+        </g>
+      </g>
     </svg>
     <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
       Copy to clipboard

src/components/CreatePool/CreateSwapCard.vue

@@ -62,14 +62,42 @@ function setPoolMint() {
       </div>
 
       <div class="q-mt-md">
-        <div>Policy:</div>
+        <div>Swap policy:</div>
         <q-select
-          v-model="state.policy" option-disable="inactive" popup-content-class="transition-duration" outlined
+          v-model="state.swapPolicy" option-disable="inactive" popup-content-class="transition-duration" outlined
           :options="servicePolicy" dense :options-dense="false"
           option-value="mint" option-label="name"
         >
           <template #selected>
-            <select-policy-item v-if="state.policy" :key="state.policy.pubkey?.toBase58()" :policy="state.policy.pubkey" :policy-data="state.policy.data" />
+            <select-policy-item
+              v-if="state.swapPolicy"
+              :key="state.swapPolicy.pubkey?.toBase58()"
+              :policy="state.swapPolicy.pubkey"
+              :policy-data="state.swapPolicy.data"
+            />
+          </template>
+          <template #option="scope">
+            <q-item v-bind="scope.itemProps" class="token-select__token">
+              <select-policy-item :key="scope.opt.pubkey" :policy="scope.opt.pubkey" :policy-data="scope.opt.data" />
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+
+      <div class="q-mt-md">
+        <div>Liqudity policy:</div>
+        <q-select
+          v-model="state.addLiquidityPolicy" option-disable="inactive" popup-content-class="transition-duration" outlined
+          :options="servicePolicy" dense :options-dense="false"
+          option-value="mint" option-label="name"
+        >
+          <template #selected>
+            <select-policy-item
+              v-if="state.addLiquidityPolicy"
+              :key="state.addLiquidityPolicy.pubkey?.toBase58()"
+              :policy="state.addLiquidityPolicy.pubkey"
+              :policy-data="state.addLiquidityPolicy.data"
+            />
           </template>
           <template #option="scope">
             <q-item v-bind="scope.itemProps" class="token-select__token">