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.

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

feature(dex): add faq section (ON HOLD) #566

Draft
wants to merge 48 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
3f6e989
chore: update tailwindconfigs for 2.0 (#489)
veralygit Feb 15, 2023
3537bb4
feat(ui-ux): add Buttons 2.0 component (#493)
veralygit Feb 21, 2023
bce272f
Merge branch 'main' into feature/2.0
kyleleow Feb 22, 2023
3a6bfa8
feature(ui-ux): hero banner for home page (#494)
nattadex Feb 27, 2023
bf7b6f1
Merge branch 'main' into feature/2.0
kyleleow Feb 27, 2023
5fef1fd
feature(ui-ux): add 2.0 header (#496)
veralygit Feb 28, 2023
0e4a920
fix:linting
veralygit Feb 28, 2023
0ccbeac
Merge branch 'main' into feature/2.0
kyleleow Feb 28, 2023
6b960c3
feat(ui-ux): footer design refresh (#500)
chloezxyy Mar 1, 2023
484b1b0
feat(ui-ux): add statistics display 2.0 design refresh (#507)
veralygit Mar 3, 2023
0ac7f55
feat(ui-ux): add ready for flexibility section for home page refresh …
veralygit Mar 3, 2023
be9d18f
fix(ui-ux): update header to close menu in desktop view (#513)
veralygit Mar 3, 2023
f80f2e6
feat(ui-ux): add common component SectionTitle (#514)
veralygit Mar 6, 2023
33efaa1
feat(ui-ux): add static image when video is loading in index hero ban…
veralygit Mar 6, 2023
a876e97
Merge branch 'main' into feature/2.0
kyleleow Mar 6, 2023
1110744
feat(ui-ux): add cursor tracking for header (#517)
veralygit Mar 6, 2023
a95fe46
fix(ui-ux): minor text color changes in header (#518)
veralygit Mar 7, 2023
588ff26
Merge branch 'main' into feature/2.0
kyleleow Mar 7, 2023
4f98465
fix(ui-ux): styling and update footer e2e (#508)
chloezxyy Mar 7, 2023
0cbddea
chore: add translations for header (#519)
veralygit Mar 8, 2023
716c9b4
feat(ui-ux): add jellyfish animation in ready for flexibility section…
veralygit Mar 8, 2023
4f3c9bb
feat(ui-ux): handle N/A display for Statistics Display in homepage (#…
veralygit Mar 8, 2023
65d6726
feature(ui-ux): decentralized finance section (#512)
nattadex Mar 10, 2023
b550bd5
fix(translation): footer translations (#527)
nattadex Mar 10, 2023
63ca9a1
Merge branch 'main' into feature/2.0
kyleleow Mar 10, 2023
1a17d18
feat(ui-ux): add explore card (#526)
veralygit Mar 10, 2023
c8b1d21
fix(translation): adding translation for home page (#528)
nattadex Mar 10, 2023
f5ffe24
chore: update package lock file
kyleleow Mar 13, 2023
ba6027c
feature(ui-ux): blockchain ecosystem section (#511)
chloezxyy Mar 13, 2023
55370f8
feat(ui-ux): add common component HeroBanner (#530)
veralygit Mar 13, 2023
e6449a2
feat(ui-ux): add common StatisticsPanel component (#535)
veralygit Mar 14, 2023
8bd3ac0
fix(translation): decentralized finance translations (#540)
nattadex Mar 17, 2023
6883bc5
feat(ui-ux): add daily use and advance use sections to explore wallet…
veralygit Mar 23, 2023
84c32ed
feat(ui-ux): update statisticsPanel to check for horizontalView (#539)
veralygit Mar 23, 2023
9f1a52e
feature(ui-ux): dapp cards animations (#542)
chloezxyy Mar 24, 2023
e2a1704
Merge branch 'main' into feature/2.0
kyleleow Mar 24, 2023
c90c435
feat(ui-ux): add hero banner to explore dfi page (#548)
veralygit Mar 24, 2023
1ede8f2
feat(ui-ux): add statistics display to explore/dfi page (#549)
veralygit Mar 29, 2023
08a4aac
fix(ui-ux): language dropdown UI (#553)
chloezxyy Mar 30, 2023
5586600
feat(ui-ux): add harness dfi section to explore dfi page (#557)
veralygit Mar 30, 2023
0e418dd
chore(ui-ux): remove invest trade and earn from header and footer (#558)
veralygit Mar 30, 2023
dd9af4b
feat(ui-ux): add footer cards to explore dfi page (#559)
veralygit Mar 30, 2023
1f6beaf
feat(ui-ux): add explore dex page hero banner (#560)
veralygit Mar 30, 2023
fc0bc64
chore: remove all languages except en and de
kyleleow Mar 30, 2023
6f8a5e7
feat(ui-ux): add dex stats display to explore dex page (#561)
veralygit Apr 3, 2023
a29a7a3
feat(ui-ux): add Initial Token Distribution Section (#564)
veralygit Apr 3, 2023
c1ff52e
feat(ui-ux): add get dfi section (#563)
lykalabrada Apr 3, 2023
f4bb105
feat: add dexfaq
kyleleow Apr 3, 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
Prev Previous commit
Next Next commit
feat(ui-ux): add statistics display to explore/dfi page (#549)
* feat(ui-ux): add statistics display to explore/dfi page

* fix displayId

* update explore dfi page jump link

* remove additional line in locales file

* remove unused log

* updated to provide more context to suffix and value
  • Loading branch information
veralygit authored Mar 29, 2023
commit 1ede8f2c4bd49168763243d2a369fabd6849cd82
10 changes: 10 additions & 0 deletions public/locales/en-US/page-explore-dfi.json
Original file line number Diff line number Diff line change
@@ -3,6 +3,16 @@
"title": "EXPLORE THE POWER OF DFI",
"subtitle": "Experience DeFi with DFI",
"desc": "Our native token unlocks the power of decentralized finance, giving you access to a growing ecosystem of cutting-edge DeFi tools and innovative blockchain applications."
},
"statisticsDisplay" : {
"circulatingSupply": {
"title": "CIRCULATING SUPPLY",
"desc": "{{perc}} of max supply"
},
"dfiMinted": {
"title": "TOTAL DFI MINTED",
"desc": "out of {{value}}{{suffix}} fixed supply"
}
}
}

4 changes: 2 additions & 2 deletions src/hooks/useUnitSuffix.tsx
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ interface UnitSuffix {
value: string;
}

export function useUnitSuffix(value: string): UnitSuffix {
export function useUnitSuffix(value, decimalPlace = 0): UnitSuffix {
const updatedValue = BigNumber(value);
const places = updatedValue.e !== null ? Math.floor(updatedValue.e / 3) : 0;
const suffix = `${units[places * 3] ?? ""}`;
@@ -24,7 +24,7 @@ export function useUnitSuffix(value: string): UnitSuffix {
if (suffix) {
unitValueWithSuffix.value = updatedValue
.dividedBy(1000 ** places)
.toFormat(0);
.toFormat(decimalPlace);
}

return unitValueWithSuffix;
59 changes: 59 additions & 0 deletions src/pages/explore/dfi/_components/DFIStatisticsDisplay.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { useEffect, useState } from "react";
import { SupplyData } from "@defichain/whale-api-client/dist/api/stats";
import { StatisticPanel } from "@components/commons/StatisticPanel";
import { Container } from "@components/commons/Container";
import { useUnitSuffix } from "@hooks/useUnitSuffix";
import { useTranslation } from "next-i18next";
import { useWhaleApiClient } from "../../../../layouts/context/WhaleContext";
import { calculatePercentage } from "../../../../shared/calculatePercentage";

export function DFIStatisticsDisplay() {
const api = useWhaleApiClient();
const [supply, setSupply] = useState<SupplyData>();
const { t } = useTranslation("page-explore-dfi");

const { value: dfiMintedValue, suffix: dfiMintedSuffix } = useUnitSuffix(
supply?.max,
1
);

useEffect(() => {
api.stats.getSupply().then((supplyItem) => {
setSupply(supplyItem);
});
}, [api.stats]);

const supplyItems = [
{
title: t("statisticsDisplay.circulatingSupply.title"),
stats: supply?.circulating,
desc:
supply === undefined
? supply
: t("statisticsDisplay.circulatingSupply.desc", {
perc: calculatePercentage(supply?.circulating, supply?.total),
}),
},
{
title: t("statisticsDisplay.dfiMinted.title"),
stats: supply?.total,
desc:
supply === undefined
? supply
: t("statisticsDisplay.dfiMinted.desc", {
value: dfiMintedValue,
suffix: dfiMintedSuffix,
}),
},
];

return (
<Container className="lg:mt-[69px] md:mt-[33px] mt-0 lg:mb-[180px] mb-[72px]">
<StatisticPanel
displayItem={supplyItems}
displayStripCustomStyle="scroll-mt-[200px]"
displayId="statistics_display_dfi"
/>
</Container>
);
}
20 changes: 12 additions & 8 deletions src/pages/explore/dfi/index.page.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
import { HeroBanner, HeroBannerBg } from "@components/commons/HeroBanner";
import { SSRConfig, useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { DFIStatisticsDisplay } from "./_components/DFIStatisticsDisplay";

export default function ExploreDFI() {
const { t } = useTranslation("page-explore-dfi");
return (
<HeroBanner
title={t("heroBanner.title")}
subtitle={t("heroBanner.subtitle")}
desc={t("heroBanner.desc")}
heroBg={HeroBannerBg.DFI_COIN}
hasStartExploringButton
startExploringJumpLink="/"
/>
<>
<HeroBanner
title={t("heroBanner.title")}
subtitle={t("heroBanner.subtitle")}
desc={t("heroBanner.desc")}
heroBg={HeroBannerBg.DFI_COIN}
hasStartExploringButton
startExploringJumpLink="#statistics_display_dfi"
/>
<DFIStatisticsDisplay />
</>
);
}