Skip to content

Commit

Permalink
fix: update pools layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@MGrgr
MGrgr committed Feb 2, 2024
1 parent de7fd27 commit e14319d
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 44 deletions.
68 changes: 67 additions & 1 deletion src/assets/styles/components/_pool-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,22 @@
.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 {
Expand Down Expand Up @@ -58,11 +74,27 @@

&__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;
list-style: 13px;
line-height: 13px;
color: $secondary;
.body--dark & {
color: #fff;
Expand Down Expand Up @@ -91,6 +123,13 @@
margin-left: -14px;
}
}

&__actions {
height: 56px;
.q-btn__content {
font-size: 17px;
}
}

&__subtitle {
font-weight: 500;
Expand All @@ -100,6 +139,12 @@

&__pubkey {
word-break: break-all;
font-size: 16px;
color: #000;
font-family: Courier;
.body--dark & {
color: #fff;
}
}

body.body--dark & {
Expand Down Expand Up @@ -135,3 +180,24 @@
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;
}
}
}
109 changes: 66 additions & 43 deletions src/components/pools/PoolsListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,42 +57,63 @@ const dialog = ref(false)
<span class="policy-info q-ml-auto">
i
<q-menu v-model="dialog" transition-duration="100" transition-show="fade" transition-hide="fade">
<q-card class="q-pa-md">
<div class="row items-center">
Pool address:&nbsp;
<span>
<span class="pool-card__pubkey monoscaped">{{ shortenAddress(pubkey.toBase58()) }}</span>
<copy-to-clipboard :text="pubkey.toBase58()" />
</span>
<q-card class="pool-info q-pa-md">
<div class="pool-info__fees row items-center">
<div>
<div class="pool-card__label">
Swap fee
</div>
<div v-if="swapFee" class="pool-card__amount">
{{ formatPct.format(swapFee) }}
</div>
</div>
<div class="pool-info__delimiter" />
<div>
<div class="pool-card__label">
Withdraw fee
</div>
<div v-if="fees" class="pool-card__amount">
{{ formatPct.format(fees.ownerWithdraw) }}
</div>
</div>
</div>
<div class="row items-center">
Token A mint:&nbsp;
<span>
<span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenAMint.toBase58()) }}</span>
<copy-to-clipboard :text="data.tokenAMint.toBase58()" />
</span>
</div>
<div class="row items-center">
Token B mint:&nbsp;
<span>
<span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenBMint.toBase58()) }}</span>
<copy-to-clipboard :text="data.tokenBMint.toBase58()" />
</span>
</div>
<div class="row items-center">
LP token mint:&nbsp;
<span>
<span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.poolMint.toBase58()) }}</span>
<copy-to-clipboard :text="data.poolMint.toBase58()" />
</span>
</div>
<div v-if="swapFee" class="row items-center q-mt-xs">
Swap fee:&nbsp;
<span class="pool-card__pubkey">{{ formatPct.format(swapFee) }}</span>
</div>
<div v-if="fees" class="row items-center q-mt-xs">
Withdraw fee:&nbsp;
<span class="pool-card__pubkey">{{ formatPct.format(fees.ownerWithdraw) }}</span>
<div class="pool-info__addresses">
<div class="column justify-center items-between q-mt-md">
<div class="pool-card__label">
Pool address
</div>
<div class="row justify-between items-center">
<span class="pool-card__pubkey monoscaped">{{ shortenAddress(pubkey.toBase58(), 14) }}</span>
<copy-to-clipboard :text="pubkey.toBase58()" />
</div>
</div>
<div class="column justify-center items-between">
<div class="pool-card__label">
Token A mint
</div>
<div class="row justify-between items-center">
<span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenAMint.toBase58(), 14) }}</span>
<copy-to-clipboard :text="data.tokenAMint.toBase58()" />
</div>
</div>
<div class="column justify-center items-between">
<div class="pool-card__label">
Token B mint
</div>
<div class="row justify-between items-center">
<span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenBMint.toBase58(), 14) }}</span>
<copy-to-clipboard :text="data.tokenBMint.toBase58()" />
</div>
</div>
<div class="column justify-center items-between">
<div class="pool-card__label">
LP token mint
</div>
<div class="row justify-between items-center">
<span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.poolMint.toBase58(), 14) }}</span>
<copy-to-clipboard :text="data.poolMint.toBase58()" />
</div>
</div>
</div>
</q-card>
</q-menu>
Expand All @@ -108,16 +129,16 @@ const dialog = ref(false)
{{ poolStats ? `${formatPct.format(poolStats.apr24)}` : '---' }}
</div>
</div>
<div class="row q-ml-auto">
<div class="q-mr-md">
<div class="pool-card__income__user row q-ml-auto">
<div>
<div class="pool-card__label">
My Liquidity
</div>
<div class="pool-card__amount">
{{ poolStats && userTokens ? `$${formatUsd.format(userTokens / poolStats.poolTokenSupply * poolStats.tvl)}` : '---' }}
</div>
</div>
<div>
<div class="q-ml-md">
<div class="pool-card__label">
My Share
</div>
Expand All @@ -128,24 +149,26 @@ const dialog = ref(false)
</div>
</div>

<div class="row q-mt-sm q-mb-auto q-pt-xs pool-card__stats">
<div class="col-4 q-mt-xs text-center">
<div class="pool-card__stats q-mt-sm q-mb-auto q-pt-xs">
<div class="pool-card__stats__item q-mt-xs text-center">
<div class="pool-card__label">
Volume 24H
</div>
<div class="pool-card__amount">
{{ poolStats ? `$${formatUsd.format(poolStats.volume24)}` : '---' }}
</div>
</div>
<div class="col-4 q-mt-xs text-center">
<div class="pool-card__stats__delimiter" />
<div class="pool-card__stats__item q-mt-xs text-center">
<div class="pool-card__label">
Liquidity
</div>
<div class="pool-card__amount">
{{ poolStats ? `$${formatUsd.format(poolStats.tvl)}` : '---' }}
</div>
</div>
<div class="col-4 q-mt-xs text-center">
<div class="pool-card__stats__delimiter" />
<div class="pool-card__stats__item q-mt-xs text-center">
<div class="pool-card__label">
Fees 24H
</div>
Expand All @@ -161,7 +184,7 @@ const dialog = ref(false)

<div v-if="!useEmit" class="row q-mt-md">
<div class="col">
<q-btn-group spread unelevated square style="height: 56px">
<q-btn-group spread unelevated square class="pool-card__actions">
<q-btn
label="ADD LIQUIDITY"
color="primary"
Expand Down

0 comments on commit e14319d

Please sign in to comment.