Skip to content

Commit

Permalink
Merge pull request #18 from Kolektivo-Labs/AnotherDev/display_liquidi…
Browse files Browse the repository at this point in the history 
…ty_on_dashboard

Add liquidity table to dashboard
  • Loading branch information
@Another-DevX
Another-DevX authored Jan 19, 2024
2 parents 2d98db4 + 79dd73b commit 949559f
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 257 deletions.
8 changes: 6 additions & 2 deletions src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,10 @@ const rewardsData = [
];
const { upToLargeBreakpoint } = useBreakpoints();
const hasCurrentAllocation = computed(() => {
return parseInt(currentAllocation.value as string) > 0;
});
</script>

<template>
Expand All @@ -94,13 +98,13 @@ const { upToLargeBreakpoint } = useBreakpoints();
<BalTable
:columns="columns"
sticky="both"
:data="rewardsData"
:data="hasCurrentAllocation ? rewardsData : []"
:isLoading="isLoading"
skeletonClass="h-24"
:square="upToLargeBreakpoint"
>
<template #iconsColumnCell>
<div class="flex gap-4 justify-center items-center w-full">
<div class="flex gap-4 justify-start items-center px-6 w-full">
<img :src="RFP" class="w-6 h-6" />
<p class="text-base font-normal">RFPs</p>
</div>
Expand Down
325 changes: 72 additions & 253 deletions src/components/contextual/pages/dashboard/DashboardTable/LiquidityTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,283 +1,102 @@

<script setup lang="ts">
import { ColumnDefinition } from '@/components/_global/BalTable/types';
import useBreakpoints from '@/composables/useBreakpoints';
import useNumbers from '@/composables/useNumbers';
import { absMaxApr, fiatValueOf } from '@/composables/usePoolHelpers';
import { useI18n } from 'vue-i18n';
import PoolsTable from '@/components/tables/PoolsTable/PoolsTable.vue';
import { configService } from '@/services/config/config.service';
import { Pool } from '@/services/pool/types';
import { APR_THRESHOLD } from '@/constants/pools';
import useDarkMode from '@/composables/useDarkMode';
import TokensWhite from '@/assets/images/icons/tokens_white.svg';
import TokensBlack from '@/assets/images/icons/tokens_black.svg';
import useWeb3 from '@/services/web3/useWeb3';
import { useUserPools } from '@/providers/local/user-pools.provider';
import StakePreviewModal from '@/components/contextual/pages/pool/staking/StakePreviewModal.vue';
import { providePoolStaking } from '@/providers/local/pool-staking.provider';
import { PoolAction } from '../../pools/types';
const { upToLargeBreakpoint, upToSmallBreakpoint } = useBreakpoints();
/**
* STATE
*/
const showStakeModal = ref(false);
const stakePool = ref<Pool | undefined>();
const networkName = configService.network.shortName;
const hiddenColumns = ['poolVolume', 'migrate', 'lockEndDate', 'volume'];
const { t } = useI18n();
const { fNum } = useNumbers();
const { darkMode } = useDarkMode();
/**
* PROVIDERS
*/
providePoolStaking();
type Props = {
data?: Pool[];
poolsType?: 'unstaked' | 'staked';
isLoading?: boolean;
isLoadingMore?: boolean;
showPoolShares?: boolean;
noPoolsLabel?: string;
isPaginated?: boolean;
sortColumn?: string;
selectedTokens?: string[];
hiddenColumns?: string[];
showBoost?: boolean;
showActions?: boolean;
columnStates?: Record<string, string>;
skeletonClass?: string;
shares?: Record<string, string>;
boosts?: Record<string, string>;
shouldPokePoolsMap?: Record<string, string>;
hasNonPrefGaugesPoolsAddresses?: string[];
};
/**
* COMPOSABLES
*/
const { isWalletReady, isWalletConnecting } = useWeb3();
const { t } = useI18n();
const {
unstakedPools,
userPoolShares,
refetchAllUserPools,
isLoading: isLoadingPools,
} = useUserPools();
const defaultPoolActions = [
PoolAction.Stake,
PoolAction.Add,
PoolAction.Remove,
];
const props = withDefaults(defineProps<Props>(), {
poolsType: 'unstaked',
isLoadingMore: false,
showPoolShares: false,
noPoolsLabel: 'No pools',
isPaginated: false,
sortColumn: 'totalLiquidity',
hiddenColumns: () => [],
showBoost: false,
showActions: false,
columnStates: () => ({}),
data: () => [],
selectedTokens: () => [],
skeletonClass: 'h-64',
/**
* COMPUTED
*/
const noPoolsLabel = computed(() => {
return isWalletReady.value || isWalletConnecting.value
? t('noUnstakedInvestments', [networkName])
: t('connectYourWallet');
});
const wideCompositionWidth = computed(() => {
if (upToSmallBreakpoint.value) return 250;
return 350;
});
const poolsToRenderKey = computed(() => JSON.stringify(unstakedPools.value));
function balanceValue(pool: Pool): string {
const bpt = props?.shares?.[pool.id] || '0';
return fiatValueOf(pool, bpt);
/**
* METHODS
*/
function handleStake(pool: Pool) {
showStakeModal.value = true;
stakePool.value = pool;
}
const columns = computed<ColumnDefinition<Pool>[]>(() => [
{
name: 'Icons',
id: 'icons',
accessor: 'uri',
Header: 'iconColumnHeader',
Cell: 'iconColumnCell',
width: 125,
noGrow: true,
},
{
name: t('composition'),
id: 'poolName',
accessor: 'id',
Cell: 'poolNameCell',
width: props.hiddenColumns.length >= 2 ? wideCompositionWidth.value : 350,
},
{
name: t('myBalance'),
accessor: pool =>
fNum(balanceValue(pool), {
style: 'currency',
maximumFractionDigits: 0,
fixedFormat: true,
}),
align: 'right',
id: 'myBalance',
hidden: !props.showPoolShares,
sortKey: pool => Number(balanceValue(pool)),
width: 160,
cellClassName: 'font-numeric',
},
{
name: t('poolValue'),
accessor: pool =>
fNum(pool.totalLiquidity || 0, {
style: 'currency',
maximumFractionDigits: 0,
}),
align: 'right',
id: 'totalLiquidity',
sortKey: pool => {
const apr = Number(pool.totalLiquidity);
if (apr === Infinity || isNaN(apr)) return 0;
return apr;
},
width: 150,
cellClassName: 'font-numeric',
},
{
name: props.showPoolShares ? t('myApr') : t('apr'),
Cell: 'aprCell',
accessor: pool => pool?.apr?.min.toString() || '0',
align: 'right',
id: 'apr',
sortKey: pool => {
let apr = 0;
function handleModalClose() {
refetchAllUserPools();
showStakeModal.value = false;
}
if (pool?.apr) {
apr = Number(absMaxApr(pool.apr, pool.boost));
}
async function handleStakeSuccess() {
await refetchAllUserPools();
}
return isFinite(apr) && (pool.apr?.swapFees || 0) < APR_THRESHOLD
? apr
: 0;
},
width: 150,
},
{
name: t('actions'),
Cell: 'actionsCell',
accessor: 'actions',
align: 'right',
id: 'actions',
hidden: !props.showActions,
width: 150,
},
]);
onMounted(() => {
refetchAllUserPools();
});
</script>




<template>
<BalCard
shadow="lg"
:square="upToLargeBreakpoint"
:noBorder="upToLargeBreakpoint"
noPad
exposeOverflow
>
<BalTable
:columns="columns"
:data="data"
:noResultsLabel="noPoolsLabel"
:isLoading="isLoading"
:isLoadingMore="isLoadingMore"
:skeletonClass="skeletonClass"
sticky="both"
:square="upToLargeBreakpoint"
isOnlyDescSort
>
<template #iconColumnHeader>
<div class="flex items-center">
<img
v-if="darkMode"
:src="TokensWhite"
alt="token"
loading="lazy"
width="24"
height="15"
/>
<img
v-else
:src="TokensBlack"
alt="token"
loading="lazy"
width="24"
height="15"
/>
</div>
</template>
<!-- <template #iconColumnCell="pool">
<div v-if="!isLoading" class="py-4 px-6" :data-testid="pool?.id">
<BalAssetSet
:addresses="iconAddresses(pool)"
:width="100"
:size="isMobile ? 28 : 32"
/>
</div>
</template>
<template #poolNameCell="pool">
<div v-if="!isLoading" class="flex items-center py-4 px-6">
<div v-if="poolMetadata(pool.id)?.name" class="pr-2 text-left">
{{ poolMetadata(pool.id)?.name }}
</div>
<div v-else>
<TokenPills
:tokens="orderedPoolTokens(pool, pool.tokens)"
:isStablePool="isStableLike(pool.poolType)"
:selectedTokens="selectedTokens"
:pickedTokens="selectedTokens"
/>
</div>
<PoolsTableExtraInfo :pool="pool" />
</div>
</template>
<template #volumeCell="pool">
<div
:key="columnStates.volume"
class="flex justify-end py-4 px-6 -mt-1 font-numeric"
>
<BalLoadingBlock v-if="!pool?.volumeSnapshot" class="w-12 h-4" />
<span v-else class="text-right">
{{
fNum(
pool?.volumeSnapshot < VOLUME_THRESHOLD
? pool?.volumeSnapshot
: '-',
{
style: 'currency',
maximumFractionDigits: 0,
}
)
}}
</span>
</div>
</template>
<template #aprCell="pool">
<div
:key="columnStates.aprs"
:class="[
'flex justify-end py-4 px-6 -mt-1 font-numeric text-right',
{
'text-gray-300 dark:text-gray-600 line-through': isLBP(
pool.poolType
),
},
]"
>
<span v-if="!pool?.apr || shouldHideAprs(pool.id)">-</span>
<template v-else>
{{ aprLabelFor(pool) }}
<BalTooltip
v-if="isLBP(pool.poolType)"
width="36"
:text="$t('lbpAprTooltip')"
iconSize="sm"
iconClass="ml-1"
/>
<APRTooltip v-else-if="pool?.apr" :pool="pool" />
</template>
</div>
</template> -->
</BalTable>
</BalCard>
</template>


<!-- <template>
<div>
<BalStack vertical spacing="sm">
<h5 class="px-4 xl:px-0">
{{ $t('staking.unstakedPools') }}
</h5>
<PoolsTable
:isLoading="isWalletReady"
:key="poolsToRenderKey"
:isLoading="isWalletReady && isLoadingPools"
:data="unstakedPools"
:shares="userPoolShares"
:noPoolsLabel="noPoolsLabel"
sortColumn="myBalance"
:hiddenColumns="hiddenColumns"
:defaultPoolActions="defaultPoolActions"
showPoolShares
showActions
@trigger-stake="handleStake"
/>
</BalStack>
<StakePreviewModal
v-if="stakePool"
:pool="stakePool"
:isVisible="showStakeModal"
action="stake"
@close="handleModalClose"
@success="handleStakeSuccess"
/>
</div>
</template> -->
</template>
Loading

0 comments on commit 949559f

Please sign in to comment.