Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Another dev/add dashboard route #5

Closed
wants to merge 12 commits into from
Closed

Another dev/add dashboard route #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
33ff392
feat: add route
Another-DevX Dec 8, 2023
0ca6d7c
feat: add tables
Another-DevX Dec 8, 2023
1dafe62
feat: add card
Another-DevX Dec 8, 2023
ea235e7
target title
Another-DevX Dec 8, 2023
528998c
mocked refi profile card
Another-DevX Dec 8, 2023
3ca95b3
mocked connect wallet my refi profile card
Another-DevX Dec 8, 2023
57bdcb9
feat: add nft card
Another-DevX Dec 10, 2023
6db5b71
feat: add responsive
Another-DevX Dec 10, 2023
69a3bea
feat: resolve feedback issues and clean code practices
Another-DevX Dec 15, 2023
2801761
chore: TW theme for hardcoded colors
Another-DevX Dec 15, 2023
2f1d471
chore: remove unit testing issues
Another-DevX Dec 15, 2023
8d6a0a9
chore: fix unitesting issues
Another-DevX Dec 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/images/mocks/NFT.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/components/_global/BalBtn/BalBtn.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ const bgGradientClasses = computed(() => {
fromColor = 'pink';
toColor = 'yellow';
}

if (props.disabled) {
return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`;
}
Expand Down
120 changes: 120 additions & 0 deletions src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<script setup lang="ts">
import NFTImage from '@/assets/images/mocks/NFT.png';
import useBreakpoints from '@/composables/useBreakpoints';
import useWeb3 from '@/services/web3/useWeb3';
const { startConnectWithInjectedProvider } = useWeb3();
const { isMobile, bp } = useBreakpoints();
</script>
<template>
<template v-if="isMobile">
<BalCard v-if="bp === 'xs'">
<div class="flex flex-col gap-5 justify-center items-start px-4 h-fit">
<img :src="NFTImage" class="w-full h-full rounded-md bg-slate-500" />
<div class="flex flex-col gap-10 w-full">
<div class="flex flex-col gap-4">
<h3 class="self-start text-lg">Connect wallet</h3>
<div class="flex justify-between items-center text-base">
<p>Voting Power</p>
<p>- Votes</p>
</div>
</div>
<div class="w-full border-t-2" />
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center text-base">
<p>My Points</p>
<p>- RFP</p>
</div>
<div
class="flex justify-between items-center text-base text-disabled"
>
<p>Next level</p>
<p>- RFP</p>
</div>
</div>
<BalBtn
color="gradient"
class="self-end w-fit"
size="sm"
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
</div>
</div>
</BalCard>
<BalCard v-else>
<div class="flex flex-row gap-5 justify-center items-start px-4 h-80">
<img :src="NFTImage" class="w-48 h-full rounded-md bg-slate-500" />
<div class="flex flex-col gap-10 w-full">
<div class="flex flex-col gap-4">
<h3 class="self-start text-lg">Connect wallet</h3>
<div class="flex justify-between items-center text-base">
<p>Voting Power</p>
<p>- Votes</p>
</div>
</div>
<div class="w-full border-t-2" />
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center text-base">
<p>My Points</p>
<p>- RFP</p>
</div>
<div
class="flex justify-between items-center text-base text-disabled"
>
<p>Next level</p>
<p>- RFP</p>
</div>
</div>
<BalBtn
color="gradient"
class="self-end w-fit"
size="sm"
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
</div>
</div>
</BalCard>
</template>
<template v-else>
<div class="p-4 h-full bg-white rounded-lg shadow-lg">
<div
class="flex flex-row gap-5 justify-center items-center px-4 h-[265px]"
>
<img
:src="NFTImage"
class="rounded-md h-[224px] w-[168px] bg-slate-500"
/>
<div class="flex flex-col gap-6 w-full">
<div class="flex flex-col gap-4">
<h3 class="self-start text-lg">Connect wallet</h3>
<div class="flex justify-between items-center text-base">
<p>Voting Power</p>
<p>- Votes</p>
</div>
</div>
<div class="w-full border-t-2" />
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center text-base">
<p class="text-sm">My Points</p>
<p class="text-sm">- RFP</p>
</div>
<div
class="flex justify-between items-center text-base text-disabled"
>
<p>Next level</p>
<p>- RFP</p>
</div>
</div>
<BalBtn
color="gradient"
class="self-end w-fit"
size="sm"
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
</div>
</div>
</div>
</template>
</template>
145 changes: 145 additions & 0 deletions src/components/contextual/pages/dashboard/Cards/WeeklyCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<script setup lang="ts">
import useBreakpoints from '@/composables/useBreakpoints';

const { isMobile, upToSmallBreakpoint } = useBreakpoints();
</script>
<template>
<template v-if="isMobile">
<BalCard v-if="upToSmallBreakpoint">
<div class="flex flex-col gap-5 justify-center items-center px-4 h-fit">
<h3 class="self-start text-lg">Weekly progress</h3>
<p class="text-base text-complementary">
Participate in the
<a class="font-medium text-blue-700" href="#">
Early Growth Campaign</a
>
by trading each week to level up your ReFi Profile and earn more
Voting Power. Each Monday at 12:00 CET weekly snapshots are taken and
rewards are allocated.
</p>
<div class="flex flex-row gap-5 w-full">
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 mr-0 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Your Volume this week
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 mr-0 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Volume for next tier
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
</div>
</div>
</BalCard>
<BalCard v-else>
<div class="flex flex-col gap-5 justify-center items-center px-4 h-80">
<h3 class="self-start text-lg leading-[1.125rem]">Weekly progress</h3>
<p class="text-base text-complementary">
Participate in the
<a class="font-medium text-[#4654D2]" href="#">
Early Growth Campaign</a
>
by trading each week to level up your ReFi Profile and earn more
Voting Power. Each Monday at 12:00 CET weekly snapshots are taken and
rewards are allocated.
</p>
<div class="flex flex-row gap-5 w-full">
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 mr-0 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Your Volume this week
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center items-center pb-5 mr-0 w-full text-center"
>
<h4 class="text-complementary text-[10px]">
Volume for next tier
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
</div>
</div>
</BalCard>
</template>
<template v-else>
<div class="p-4 h-full bg-white rounded-lg shadow-lg">
<div
class="flex flex-col gap-4 justify-center items-center px-4 min-h-[265px]"
>
<h3 class="self-start text-lg leading-[1.125rem]">Weekly progress</h3>
<p class="text-base text-complementary">
Participate in the
<a class="font-medium text-[#4654D2]" href="#">
Early Growth Campaign</a
>
by trading each week to level up your ReFi Profile and earn more
Voting Power. Each Monday at 12:00 CET weekly snapshots are taken and
rewards are allocated.
</p>
<div class="flex flex-row gap-5 w-full">
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Your Volume this week
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Volume for next tier
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
</div>
</div>
</div>
</template>
</template>
107 changes: 107 additions & 0 deletions src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import useBreakpoints from '@/composables/useBreakpoints';
import { ColumnDefinition } from '@/components/_global/BalTable/types';
import useNumbers, { FNumFormats } from '@/composables/useNumbers';
/**
* TYPES
*/
export type ClaimRow = {
token: string;
amount: string;
value: string;
};

/**
* PROPS & EMITS
*/

/**
* COMPOSABLES
*/
const { t } = useI18n();
const { fNum } = useNumbers();

/**
* STATE
*/
// ref<ColumnDefinition<RewardRow>[]>
const columns = ref<ColumnDefinition<ClaimRow>[]>([
{
name: t('token'),
id: 'icons',
accessor: 'icons',
Cell: 'iconsColumnCell',
width: 50,
noGrow: true,
},
{
name: t('amount'),
id: 'amount',
align: 'right',
width: 150,
totalsCell: 'totalAmountCell',
accessor: ({ amount }) => `${fNum(amount, FNumFormats.token)} BAL`,
},
{
name: t('value'),
id: 'value',
align: 'right',
width: 150,
totalsCell: 'totalValueCell',
accessor: ({ value }) => fNum(value, FNumFormats.fiat),
},
{
name: '',
id: 'claim',
accessor: 'claim',
Cell: 'claimColumnCell',
totalsCell: 'claimTotalCell',
width: 150,
},
]);

const rewardsData = [];

const { upToLargeBreakpoint } = useBreakpoints();
</script>

<template>
<BalCard
shadow="lg"
:square="upToLargeBreakpoint"
:noBorder="upToLargeBreakpoint"
noPad
>
<BalTable
:columns="columns"
:data="rewardsData"
:isLoading="true"
skeletonClass="h-24"
:square="upToLargeBreakpoint"
>
<template #claimColumnCell="{ amount }">
<div class="py-4 px-6">
<ClaimBalBtn :label="$t('claim')" :amount="amount" />
</div>
</template>
<!-- <template #totalAmountCell>
<div class="flex justify-end">
{{ fNum(totalClaimAmount, FNumFormats.token) }} BAL
</div>
</template>
<template #totalValueCell>
<div class="flex justify-end">
{{ fNum(totalClaimValue, FNumFormats.fiat) }}
</div>
</template>
<template #claimTotalCell>
<ClaimBalBtn
:label="$t('claimAll')"
:gauges="allGauges"
:amount="totalClaimAmount"
/>
</template> -->
</BalTable>
</BalCard>
</template>
Loading
Loading