Skip to content

Commit 0e7388a

Browse files
janvinshajanvinsha
authored
Merge pull request #10 from janvinsha/sbwr
feat:create assetinput and sbwr components
2 parents c39acb6 + cf126e2 commit 0e7388a

20 files changed

Lines changed: 1304 additions & 83 deletions

‎next.config.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@ module.exports = {
66
webpack: (config) => {
77
config.resolve.fallback = { fs: false, path: false };
88
return config;
9-
}
10-
}
9+
},
10+
images: {
11+
domains: ["assets.coingecko.com", "raw.githubusercontent.com"],
12+
},
13+
};

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"immer": "^9.0.12",
2828
"jotai": "^1.9.1",
2929
"next": "^12.3.1",
30+
"numbro": "^2.3.6",
3031
"react": "17.0.2",
3132
"react-dom": "17.0.2",
3233
"react-responsive": "^9.0.0",

‎public/icons/caretdown.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎public/icons/caretup.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/icons/info.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/stores/globalStates.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,16 @@ export const rpcAtom = atomWithStorage("rpc", {
2020
});
2121

2222
export const isDrawerOpenAtom = atom(false);
23+
24+
interface ReserveAtomType {
25+
address: string;
26+
tokenSymbol: string;
27+
logoUri: string | null;
28+
assetPriceUSD: number;
29+
LTV: number;
30+
supplyAPY: number;
31+
borrowAPY: number;
32+
supplyAPR: number;
33+
borrowAPR: number;
34+
}
35+
export const selectedReserveAtom: PrimitiveAtom<ReserveAtomType> = atom({});

‎src/utils/formatUtils.ts‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,42 @@
11
import BigNumber from "bignumber.js";
22

3-
43
export const formatPercentage = (num: number) => {
5-
return `${(num * 100).toFixed(2)}%`;
4+
return `${(num * 100).toFixed(2)}%`;
65
};
76

87
export const formatAmount = (amount: BigNumber) => {
9-
if (amount.isLessThan(1000)) {
10-
return amount.toFormat(2);
11-
}
12-
return amount.integerValue().toFormat();
8+
if (amount.isLessThan(1000)) {
9+
return amount.toFormat(2);
10+
}
11+
return amount.integerValue().toFormat();
1312
};
1413

1514
export const formatAssetPrice = (price: number) => {
16-
if (price < 1) {
17-
return "$" + BigNumber(price).toFormat(4);
18-
}
19-
return "$" + BigNumber(price).toFormat(2);
15+
if (price < 1) {
16+
return "$" + BigNumber(price).toFormat(4);
17+
}
18+
return "$" + BigNumber(price).toFormat(2);
2019
};
2120

2221
export const calculateValueinUSD = (amount: BigNumber, price: number) => {
23-
return amount.multipliedBy(price);
22+
return amount.multipliedBy(price);
2423
};
2524

2625
export const formatPoolValue = (amount: BigNumber) => {
27-
if (amount.isGreaterThan(10000000)) {
28-
return `$${amount.dividedBy(1000000).toFormat(1)}M`;
29-
}
30-
if (amount.isGreaterThan(1000000)) {
31-
return `$${amount.dividedBy(1000000).toFormat(2)}M`;
32-
}
33-
if (amount.isGreaterThan(100000)) {
34-
return `$${amount.dividedBy(1000).toFormat(0)}K`;
35-
}
36-
if (amount.isGreaterThan(10000)) {
37-
return `$${amount.dividedBy(1000).toFormat(1)}K`;
38-
}
39-
if (amount.isGreaterThan(1000)) {
40-
return `$${amount.dividedBy(1000).toFormat(2)}K`;
41-
}
42-
return `$${amount.toFormat(2)}`;
43-
}
26+
if (amount.isGreaterThan(10000000)) {
27+
return `$${amount.dividedBy(1000000).toFormat(1)}M`;
28+
}
29+
if (amount.isGreaterThan(1000000)) {
30+
return `$${amount.dividedBy(1000000).toFormat(2)}M`;
31+
}
32+
if (amount.isGreaterThan(100000)) {
33+
return `$${amount.dividedBy(1000).toFormat(0)}K`;
34+
}
35+
if (amount.isGreaterThan(10000)) {
36+
return `$${amount.dividedBy(1000).toFormat(1)}K`;
37+
}
38+
if (amount.isGreaterThan(1000)) {
39+
return `$${amount.dividedBy(1000).toFormat(2)}K`;
40+
}
41+
return `$${amount.toFormat(2)}`;
42+
};

‎src/utils/numberFormatter.ts‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import React from "react";
2+
import numbro from "numbro";
3+
4+
import BigNumber from "bignumber.js";
5+
6+
export function formatExact(value: string | number) {
7+
return new BigNumber(value).toFormat();
8+
}
9+
10+
export function formatToken(
11+
value: string | number,
12+
digits = 4,
13+
exactTip?: boolean,
14+
noTrim?: boolean,
15+
// by default we truncate for tokens
16+
round?: boolean,
17+
exact?: boolean
18+
): React.ReactNode {
19+
const bn = new BigNumber(value);
20+
if (exact) {
21+
return formatExact(value);
22+
}
23+
if (
24+
bn.isLessThan(1 / 10 ** digits) &&
25+
!bn.isLessThanOrEqualTo(new BigNumber(0))
26+
) {
27+
return `< ${1 / 10 ** digits}`;
28+
}
29+
30+
const usedValue = round ? value : bn.toFormat(digits, 1);
31+
32+
const contents = numbro(usedValue).format({
33+
thousandSeparated: true,
34+
trimMantissa: !noTrim,
35+
optionalMantissa: !noTrim,
36+
mantissa: digits,
37+
});
38+
39+
return contents;
40+
}
41+
42+
export function formatRoundedToken(
43+
value: string | number,
44+
rounded?: boolean
45+
): string {
46+
const bn = new BigNumber(value);
47+
if (bn.isLessThan(0.0001) && !bn.isLessThanOrEqualTo(new BigNumber(0))) {
48+
return "< 0.0001";
49+
}
50+
51+
return bn.toFormat(
52+
!bn.isLessThan(1000) || rounded ? 0 : 2,
53+
4 // ROUND_HALF_UP
54+
);
55+
}
56+
57+
export function formatUSD(
58+
value: string | number,
59+
omitPrefix?: boolean,
60+
rounded?: boolean,
61+
sigFigs?: number,
62+
noTrim?: boolean
63+
): string {
64+
const bn = new BigNumber(value);
65+
const neg = bn.isLessThan(0);
66+
const abs = bn.abs();
67+
if (value === "0" && sigFigs)
68+
return `${neg ? "-" : ""}${omitPrefix ? "" : "$"}${Number(abs).toPrecision(
69+
sigFigs + 1
70+
)}`;
71+
if (sigFigs && bn.lt(0.1)) {
72+
return `${neg ? "-" : ""}${omitPrefix ? "" : "$"}${Number(abs).toPrecision(
73+
sigFigs
74+
)}`;
75+
}
76+
if (
77+
!noTrim &&
78+
bn.isLessThan(0.01) &&
79+
!bn.isLessThanOrEqualTo(new BigNumber(0))
80+
) {
81+
return `< ${omitPrefix ? "" : "$"}0.01`;
82+
}
83+
// When we have to do token price conversion into USD, we are often either too precise
84+
// or not precise enough to fully net a number back to 0. This accounts for that inaccuracy
85+
if (bn.abs().isLessThan(0.0001)) {
86+
return `${omitPrefix ? "" : "$"}0${rounded ? "" : ".00"}`;
87+
}
88+
89+
return `${neg ? "-" : ""}${numbro(abs).format({
90+
thousandSeparated: true,
91+
trimMantissa: false,
92+
mantissa: rounded ? 0 : 2,
93+
})}`;
94+
}
95+
96+
// e.g. 2.3M or 4.3K
97+
// export function formatRoundedUSD(value: string | number): string {
98+
// if (new BigNumber(value).isLessThan(1000)) {
99+
// return formatUSD(value);
100+
// }
101+
// const mainLength = numeral(value).format('0a').length - 1;
102+
// return `$${numeral(value)
103+
// .format(`0.${Array(3 - mainLength + 1).join('0')}a`)
104+
// .toUpperCase()}`;
105+
// }
106+
107+
export function formatPercent(
108+
value: string | number,
109+
noTrim?: boolean,
110+
limit?: number
111+
) {
112+
const bnPercent = new BigNumber(value).multipliedBy(100);
113+
if (
114+
bnPercent.isLessThan(limit ?? 0.0001) &&
115+
!bnPercent.isLessThanOrEqualTo(new BigNumber(0))
116+
) {
117+
return "< 0.01%";
118+
}
119+
120+
return numbro(value).format({
121+
output: "percent",
122+
thousandSeparated: true,
123+
trimMantissa: !noTrim,
124+
optionalMantissa: !noTrim,
125+
mantissa: 2,
126+
});
127+
}

0 commit comments

Comments
 (0)