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

feat(dcellar-web-ui): add large amount limit and opt pricing page #267

Merged
merged 3 commits into from
Nov 14, 2023
Merged

feat(dcellar-web-ui): add large amount limit and opt pricing page #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc3be34
feat(dcellar-web-ui): add large amount limit and opt pricing page
devinxl Nov 14, 2023
58e0d68
Merge branch 'main' into feat/large-mount-opt-pricing/devin
devinxl Nov 14, 2023
57816b8
chore(dcellar-web-ui): update LARGET_TRANSFER_AMOUNT to 1000
devinxl Nov 14, 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
131 changes: 42 additions & 89 deletions apps/dcellar-web-ui/src/modules/pricing-calculator/components/Calculator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,7 @@ import { CRYPTOCURRENCY_DISPLAY_PRECISION, DECIMAL_NUMBER } from '@/modules/wall
import { TStoreFeeParams } from '@/store/slices/global';
import { getQuotaNetflowRate, getStoreNetflowRate } from '@/utils/payment';
import { getUTC0Month } from '@/utils/time';
import {
Box,
Divider,
Flex,
Link,
Loading,
Text,
useDisclosure,
useMediaQuery,
} from '@totejs/uikit';
import { Box, Divider, Flex, Loading, Text, useDisclosure, useMediaQuery } from '@totejs/uikit';
import React, { useMemo, useState } from 'react';
import { FeeItem } from './FeeItem';
import { SizeMenu } from './SizeMenu';
Expand All @@ -25,11 +16,13 @@ import { PriceResponsiveContainer } from '..';
import { smMedia } from '@/modules/responsive';
import { currencyFormatter } from '@/utils/formatter';
import { BN } from '@/utils/math';
import { JumpLink } from './Common';

type CalculatorProps = {
storeParams: TStoreFeeParams;
bnbPrice: string;
gasFee: string;
onOpenKey: (key: number) => void;
// gasFee: string;
};

const formatInput = (value: string) => {
Expand All @@ -45,7 +38,7 @@ export const displayUsd = (fee: string, bnbPrice: string) => {
.toString(DECIMAL_NUMBER),
);
};
export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) => {
export const Calculator = ({ storeParams, bnbPrice, onOpenKey }: CalculatorProps) => {
const [isMobile] = useMediaQuery('(max-width: 767px)');
const TOKEN_SYMBOL = 'BNB';
const { isOpen, onClose, onToggle } = useDisclosure();
Expand All @@ -61,7 +54,7 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
size: '',
unit: 'GB',
});
const [gasTimes, setGasTimes] = useState('');
// const [gasTimes, setGasTimes] = useState('');
const [storageTime, setStorageTime] = useState(TimeOptions[0]);
const [customStorageTime, setCustomStorageTime] = useState(TimeOptions[2]);
const sizes = Object.keys(Sizes);
Expand Down Expand Up @@ -114,12 +107,12 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
.toString();
}, [quotaSize, storeParams]);

const totalGasFee = useMemo(() => {
return BN(gasTimes || 0)
.times(gasFee)
.dp(CRYPTOCURRENCY_DISPLAY_PRECISION)
.toString();
}, [gasFee, gasTimes]);
// const totalGasFee = useMemo(() => {
// return BN(gasTimes || 0)
// .times(gasFee)
// .dp(CRYPTOCURRENCY_DISPLAY_PRECISION)
// .toString();
// }, [gasFee, gasTimes]);
const costs = useMemo(() => {
let storeTime =
storageTime.id === 'custom'
Expand Down Expand Up @@ -155,17 +148,17 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
.dp(CRYPTOCURRENCY_DISPLAY_PRECISION)
.toString();

const timesByDay = BN(gasTimes || 0).dividedBy(30);
const storeDays = BN(storeTime).dividedBy(24 * 60 * 60);
const totalGasCost = BN(timesByDay || 0)
.times(gasFee)
.times(storeDays)
.dp(CRYPTOCURRENCY_DISPLAY_PRECISION)
.toString();
// const timesByDay = BN(gasTimes || 0).dividedBy(30);
// const storeDays = BN(storeTime).dividedBy(24 * 60 * 60);
// const totalGasCost = BN(timesByDay || 0)
// .times(gasFee)
// .times(storeDays)
// .dp(CRYPTOCURRENCY_DISPLAY_PRECISION)
// .toString();

// .plus(totalGasCost)
const totalCost = BN(totalStorageCost)
.plus(totalQuotaCost)
.plus(totalGasCost)
.dp(CRYPTOCURRENCY_DISPLAY_PRECISION)
.toString();

Expand All @@ -178,15 +171,15 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
return {
totalStorageCost,
totalQuotaCost,
totalGasCost,
// totalGasCost,
totalCost,
averageMonthCost,
};
}, [
customStorageTime.unit,
customStorageTime.value,
gasFee,
gasTimes,
// gasFee,
// gasTimes,
quotaSize.size,
quotaSize.unit,
storageSize.size,
Expand Down Expand Up @@ -239,7 +232,6 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
},
}}
>
{/* <NetworkSwitch /> */}
<Text
fontSize={18}
fontWeight={600}
Expand Down Expand Up @@ -283,19 +275,9 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
tips={
<>
<Text display={'inline-block'}>Check out&nbsp;</Text>
<Link
display={'inline-block'}
cursor={'pointer'}
onClick={() => {
const anchor = '#faq';
let anchorElement = document.getElementById(anchor);
if (anchorElement) {
anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
}}
>
<JumpLink id="#faq" openKey={0} onOpenKey={onOpenKey}>
the Storage Fee Formula
</Link>
</JumpLink>
.
</>
}
Expand Down Expand Up @@ -359,15 +341,6 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
</Flex>
</Flex>
</Flex>
<Divider
display={'none'}
sx={{
[smMedia]: {
margin: '24px 0',
display: 'block',
},
}}
/>
<Flex gap={8} flexDirection={'column'}>
<Flex
fontSize={16}
Expand All @@ -381,15 +354,21 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
Monthly Download Quota
<Tips
placement={'top'}
w={262}
w={'fit-content'}
tips={
<Text display={'inline-block'}>
Each bucket has a one-time free quota offered by SP.
</Text>
<>
Learn More about{' '}
<JumpLink id="#download_quota" openKey={4} onOpenKey={onOpenKey}>
Quota
</JumpLink>.
</>
}
/>
</Flex>
<Text fontSize={12}>How much monthly download quota do you require? </Text>
<Text fontSize={12}>
How much network traffic will cost for your download and view activities within one
month?{' '}
</Text>
<Flex alignItems={'center'} gap={12} flexWrap={'wrap'}>
<NumInput
placeholder="0.0"
Expand Down Expand Up @@ -447,16 +426,7 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
</Flex>
</Flex>
</Flex>
<Divider
display={'none'}
sx={{
[smMedia]: {
margin: '24px 0',
display: 'block',
},
}}
/>
<Flex gap={8} flexDirection={'column'}>
{/* <Flex gap={8} flexDirection={'column'}>
<Flex
fontSize={16}
fontWeight={600}
Expand Down Expand Up @@ -516,16 +486,7 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
</Text>
</Flex>
</Flex>
</Flex>
<Divider
display={'none'}
sx={{
[smMedia]: {
margin: '24px 0',
display: 'block',
},
}}
/>
</Flex> */}
<Flex gap={8} flexDirection={'column'}>
<Text
fontSize={16}
Expand All @@ -540,7 +501,7 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
</Text>
<Flex gap={12} flexWrap={'wrap'}>
{TimeOptions.map((item, index) => (
<>
<Box key={index}>
{item.id !== 'custom' && (
<DCButton
key={item.title}
Expand Down Expand Up @@ -577,16 +538,8 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
setCustomStorageTime(option);
}}
/>
// <DCButton
// key={item.title}
// variant="ghost"
// borderColor={item.id === storageTime.id ? 'readable.brand6' : 'readable.border'}
// onClick={() => setStorageTime(item)}
// >
// {item.title}
// </DCButton>
)}
</>
</Box>
))}
</Flex>
<Text fontSize={'12'}>
Expand Down Expand Up @@ -675,14 +628,14 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
fee={costs.totalQuotaCost}
bnbPrice={bnbPrice}
/>
<FeeItem
{/* <FeeItem
title="Operation fee"
storeTime={storageTimeDisplay}
size={gasTimes}
unit={`time${+gasTimes > 1 ? 's' : ''}/month`}
fee={costs.totalGasCost}
bnbPrice={bnbPrice}
/>
/> */}
<Text color={'readable.disabled'}>*1 month=30 day</Text>
</Flex>
</Flex>
Expand Down
28 changes: 27 additions & 1 deletion apps/dcellar-web-ui/src/modules/pricing-calculator/components/Common.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { smMedia } from '@/modules/responsive';
import { TextProps, Text } from '@totejs/uikit';
import { TextProps, Text, Link, LinkProps } from '@totejs/uikit';

export const H1 = ({ children, ...restProps }: TextProps) => (
<Text
Expand Down Expand Up @@ -65,3 +65,29 @@ export const H3 = ({ children, ...restProps }: TextProps) => (
{children}
</Text>
);

type JumpLinkProps = LinkProps & {
id: string;
openKey: number;
onOpenKey: (key: number) => void;
};
export const JumpLink = ({ id, children, openKey, onOpenKey, ...restProps }: JumpLinkProps) => {
return (
<Link
display={'inline-block'}
cursor={'pointer'}
onClick={() => {
const anchor = id;
const rect = document.getElementById(anchor)?.getBoundingClientRect();
onOpenKey(openKey);
window.scrollTo({
top: (rect?.top || 0) + document.documentElement.scrollTop - 65,
behavior: 'smooth',
});
}}
{...restProps}
>
{children}
</Link>
);
};
Loading