30 | {(!logoSrc || isFetching) && (
31 |
37 | {logoSrc && (
38 | 
45 | )}
46 |
47 |
48 | );
49 | };
50 |
51 | export default CoinIcon;
52 |
--------------------------------------------------------------------------------
/src/common/components/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | import { THEME } from '@/common/components/Header';
2 | import { DiscordIcon, DocsIcon1, TelegramIcon, TwitterIcon } from '@/common/components/icon/common';
3 | import { copyToClipboard } from '@/utils';
4 | import { Tooltip } from 'antd';
5 | import Image from 'next/image';
6 | import Link from 'next/link';
7 | import React, { useEffect, useState } from 'react';
8 | import { useSelector } from 'react-redux';
9 |
10 | const Footer: React.FunctionComponent = () => {
11 | const [copyText, setCopyText] = useState('Copy');
12 | const [currentTheme, setCurrentTheme] = useState
33 |
55 | );
56 | };
57 | export default Footer;
58 |
--------------------------------------------------------------------------------
/src/common/components/Header/routers.ts:
--------------------------------------------------------------------------------
1 | export const routes = [
2 | {
3 | path: 'staking',
4 | target: false,
5 | name: 'STAKING',
6 | hot: false,
7 | comingSoon: false,
8 | hidden: false,
9 | },
10 | {
11 | path: 'https://wallet.unicelab.io/',
12 | target: true,
13 | name: 'WALLET',
14 | hot: false,
15 | comingSoon: false,
16 | hidden: false,
17 | },
18 | {
19 | path: 'https://docs.unicelab.io/',
20 | target: true,
21 | name: 'DOCS',
22 | hot: false,
23 | comingSoon: false,
24 | hidden: false,
25 | },
26 | // {
27 | // path: 'vesting',
28 | // target: false,
29 | // name: 'Claim token',
30 | // hot: true,
31 | // comingSoon: false,
32 | // hidden: false,
33 | // },
34 | ];
35 |
--------------------------------------------------------------------------------
/src/common/components/Modal/ModalConnectWallet.tsx:
--------------------------------------------------------------------------------
1 | import fewcha from '@/common/assets/images/logo-fewcha.png';
2 |
3 | import { CloseIcon, DotIcon } from '@/common/components/icon/common';
4 | import { config } from '@/common/consts';
5 | import { showConnect } from '@/common/stores/actions/appAction';
6 | import { Modal } from 'antd';
7 | import React, { useContext, useEffect, useState } from 'react';
8 | import { isIOS, isMobile } from 'react-device-detect';
9 | import { useDispatch } from 'react-redux';
10 | import { Connector, useConnect } from 'wagmi';
11 |
12 | interface Props {
13 | isModalOpen: boolean;
14 | handleClose: () => void;
15 | }
16 |
17 | enum WalletName {
18 | Petra = 'Petra',
19 | Pontem = 'Pontem',
20 | Martian = 'Martian',
21 | Fewcha = 'Fewcha',
22 | RiseWallet = 'Rise Wallet',
23 | OKXWallet = 'OKX Wallet',
24 | }
25 |
26 | const ModalConnectWallet: React.FunctionComponent
38 |
54 | © 2024 Unice Lab Pte., Ltd.
39 |
40 |
41 |
53 |
100 |
139 |
101 |
106 | Connect wallet
102 |
103 |
105 | Choose a wallet you want connect to
107 |
108 |
138 | -
109 | {connectors.map((connector: Connector) => {
110 | return (
111 |
- {
113 | connect({ connector });
114 | handleClose();
115 | }}
116 | className={'wallet-item cursor-pointer p-4 rounded-[6px]'}
117 | key={connector.uid}
118 | >
119 | 120 |133 |121 |132 |122 |131 |
123 |
124 |130 |127 | {connector.name} 128 |129 |
134 | );
135 | })}
136 |
62 | {type === 'PENDING' &&
123 |
68 | {title &&
71 | {unstakeInfo && (
72 | {title}
}
69 | {desc}
70 |
73 |
88 | )}
89 | {type !== 'PENDING' && type !== 'WARNING' && (
90 |
97 | )}
98 | {type === 'WARNING' && (
99 |
74 |
77 | Unstaked
75 | {unstakeInfo?.amount} UNICE
76 |
78 |
81 | Claimed reward
79 | {formatNumber(unstakeInfo?.reward)} UNICE
80 |
82 |
87 | Transaction hash
83 |
84 | {ellipseAddress(unstakeInfo?.hash, 5)}
85 |
86 |
100 |
113 |
120 |
121 | )}
122 | Processing...
47 | Please wait ~5 minutes
48 |
49 | }
50 | isModalOpen={!!show}
51 | />
52 | );
53 | };
54 | export default ModalReceiveBnb;
55 |
--------------------------------------------------------------------------------
/src/common/components/Views/Staking/ModalStaking.tsx:
--------------------------------------------------------------------------------
1 | import ModalNotification from '@/common/components/Modal/ModalNotification';
2 | import { STATUS } from '@/common/types/comon';
3 | import React from 'react';
4 |
5 | interface Props {
6 | amount: number;
7 | status: STATUS;
8 | show: boolean | undefined;
9 | txHash?: string;
10 | txVersion?: string;
11 | networkCfg?: any;
12 | error?: string;
13 | toggle: () => void;
14 | setShow: (show: boolean) => void;
15 | }
16 |
17 | const errorCase = {
18 | not_registered: "Campaign's user not found",
19 | };
20 |
21 | enum ERROR_TEXT {
22 | NOT_REGISTERED = 'The wallet is not whitelisted!',
23 | }
24 |
25 | const ModalStaking: React.FunctionComponent
42 | {isExpired ? (
43 | setShow(false)}
49 | />
50 | ) : (
51 |
56 | You can’t unstake until {timeExpired}
57 |
58 | }
59 | isModalOpen={!!show}
60 | handleClose={() => setShow(false)}
61 | buttonTitle={'Okay, I got it'}
62 | />
63 | )}
64 |
65 | );
66 | }
67 | if (status === STATUS.SUCCESS) {
68 | return (
69 |
31 |
112 |
32 |
37 | {/*Top referrers
33 |
34 |
36 | */}
38 | {/*
*/}
111 | */}
39 | {/*
*/}
77 | {/* */}
40 | {/* */}
41 | {/*
*/}
51 | {/* {!isFetchingReferrer && leaderboardInfo.length > 0 && (*/}
52 | {/*
*/}
76 | {/* */}
53 | {/* {leaderboardInfo?.map((item: any, index: number) => {*/}
54 | {/* return (*/}
55 | {/* */}
60 | {/*
*/}
74 | {/* )}*/}
75 | {/* {item?.rank}
*/}
62 | {/* */}
63 | {/* {ellipseAddress(item?.address, 4)}
*/}
65 | {/* {ellipseAddress(item?.address, 8)}
*/}
66 | {/* */}
67 | {/* {formatNumber(item?.totalAmount)}
*/}
69 | {/* */}
70 | {/* */}
71 | {/* );*/}
72 | {/* })}*/}
73 | {/* */}
78 | {/*
*/}
91 | {/* */}
79 | {/* Total {totalLeaderboardItem} participants*/}
80 | {/*
*/}
81 | {/* */}
92 | {/* */}
94 | {/*
*/}
109 | {/*
*/}
110 | {/*Your rank
*/}
93 | {/* {userReferralInfo?.rank ? userReferralInfo?.rank : '--'}
*/}
96 | {/* */}
97 | {/* */}
99 | {/* {connected ? ellipseAddress(account?.address as string, 5) : '--'}*/}
100 | {/*
*/}
101 | {/* */}
102 | {/* {connected ? ellipseAddress(account?.address as string, 8) : '--'}*/}
103 | {/*
*/}
104 | {/* */}
105 | {/* {formatNumber(userReferralInfo?.totalAmount)}
*/}
107 | {/* */}
108 | {/*
12 |
32 | );
33 | };
34 |
35 | export default StatusColumn;
36 |
--------------------------------------------------------------------------------
/src/common/components/Views/Staking/StakingCommonComponent/VotingReward.tsx:
--------------------------------------------------------------------------------
1 | import { DEFAULT_DECIMALS } from '@/common/consts';
2 | import { formatNumber } from '@/utils';
3 | import BigNumber from 'bignumber.js';
4 | import moment from 'moment/moment';
5 | import React, { useMemo } from 'react';
6 |
7 | const VotingRewardRerender: React.FunctionComponent<{ record: any }> = ({ record }) => {
8 | const unstakeTime = useMemo(() => {
9 | return moment(record?.close_at).add(Number(record?.est_apr[0].time), 'days').endOf('days').valueOf();
10 | }, [record?.stakedInfo?.start_time]);
11 |
12 | const remainingTime = useMemo(() => {
13 | return (unstakeTime - moment().endOf('days').valueOf()) / (1000 * 60 * 60 * 24);
14 | }, [unstakeTime]);
15 |
16 | const votingPower = useMemo(() => {
17 | return BigNumber(record?.stakedInfo?.stake_amount)
18 | .minus(BigNumber(record?.stakedInfo?.claimed_amount))
19 | .times(BigNumber(remainingTime))
20 | .div(BigNumber(365 * 2))
21 | .div(BigNumber(10).pow(DEFAULT_DECIMALS))
22 | .toNumber();
23 | }, [remainingTime]);
24 |
25 | return (
26 |
13 |
22 |
14 |
21 |
15 |
20 |
16 |
19 | Open
18 |
23 |
30 |
31 |
27 | {votingPower && votingPower !== 0 ? formatNumber(votingPower) : 0} veMGPT
28 |
29 | );
30 | };
31 |
32 | export default VotingRewardRerender;
33 |
--------------------------------------------------------------------------------
/src/common/components/Views/Staking/StakingDetails.tsx:
--------------------------------------------------------------------------------
1 | import Skeleton from '@/common/components/Skeleton';
2 | import { formatNumber, formatRewardBalance } from '@/utils';
3 | import { Col, Popover, Row } from 'antd';
4 | import React, { useEffect, useMemo, useState } from 'react';
5 |
6 | interface Props {
7 | loading: boolean;
8 | vipLevel: VipLevel;
9 | balanceStaked: number | string | any;
10 | stakeInfo: StakeInfo;
11 | poolInfo: PollInfo;
12 | }
13 |
14 | const StakingDetails: React.FunctionComponent
22 |
37 | )}
38 |
39 | Current VIP Tier
23 |
24 | {!vipLevel?.vip ? (
25 |
36 |
26 | You are not yet a VIP.
27 |
Stake now to receive rewards and
participate in the IDO 28 |
29 | ) : (
30 | Stake now to receive rewards and
participate in the IDO 28 |
31 | {/*
34 | )}
35 |
44 |
50 | )}
51 |
52 | Staked Amount
45 |
46 | {/*{connected ? formatNumber(Number(stakeInfo?.stake_amount) / Math.pow(10, 8)) : 0} MGPT*/}
47 | {formatNumber(Number(vipLevel?.amount))} UNICE
48 |
49 |
57 |
75 | {stakeInfo && balanceStaked != 0 ? (
76 |
58 | */}
64 | {/* The previously accrued interest is retained and added to the final cumulative earnings at the end of*/}
65 | {/* the staking period.*/}
66 | {/*
*/}
67 | {/* }*/}
68 | {/* trigger="hover"*/}
69 | {/*>*/}
70 | {/* Current voting power
59 | {/**/}
71 | {/*
*/}
73 | {/**/}
74 | 0 veMGPT
77 | ) : (
78 | -
79 | )}
80 |
81 | )}
82 |
83 |
88 |
90 | )}
91 |
92 | {formatNumber(vipLevel?.required)} UNICE
89 |
13 |
35 | );
36 | };
37 |
38 | export default StakingPoolAPR;
39 |
--------------------------------------------------------------------------------
/src/common/components/Views/Staking/StakingPoolTab/StakingPoolDuration.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React, { useEffect, useMemo, useState } from 'react';
3 |
4 | interface Props {
5 | poolIndex: number;
6 | totalPool: any;
7 | poolName: string;
8 | pools: any;
9 | pool: any;
10 | setPoolSelected: (value: any) => void;
11 | selectedItem: any;
12 | handleSelectItems: (poolName: any, selectedId: any) => void;
13 | handleSelectDuration: (poolId: number, duration: any) => void;
14 | }
15 |
16 | const StakingPoolDuration: React.FunctionComponent
14 |
20 |
15 |
18 | UNICE
17 | {formatRewardBalance(uniceAPR, 2)}%
19 |
21 |
27 |
22 |
25 | FRENS
24 | {formatRewardBalance(frensAPR, 2)}%
26 |
29 |
34 |
30 |
32 | Total APR
31 | {formatRewardBalance(uniceAPR + frensAPR, 2)}%
33 |
50 | {pools?.map((pool: any, index: number) => {
51 | return (
52 |
77 | );
78 | };
79 |
80 | export default StakingPoolDuration;
81 |
--------------------------------------------------------------------------------
/src/common/components/Views/Staking/StakingPoolTab/StakingPoolTabContent.tsx:
--------------------------------------------------------------------------------
1 | import StakingPoolItem from '@/common/components/Views/Staking/StakingPoolTab/StakingPoolItem';
2 | import { useConnectModal } from '@rainbow-me/rainbowkit';
3 | import { Col, Row } from 'antd';
4 | import React, { useMemo } from 'react';
5 | import { useAccount } from 'wagmi';
6 |
7 | interface Props {
8 | token: any;
9 | dataSource: any[];
10 | selectedItem: any;
11 | handleSelectItems: (poolName: any, selectedId: any) => void;
12 | selectedPool: any;
13 | selectedDurations: any;
14 | setShowModalStaking: (val: boolean) => void;
15 | setPoolIndex: (val: any) => void;
16 | setSelectedPool: (val: any) => void;
17 | setSelectedParentPool: (val: any) => void;
18 | handleSelectDuration: (poolId: number, duration: any) => void;
19 | infoPool: any;
20 | infoPool2: any;
21 | }
22 |
23 | const StakingPoolTabContent: React.FunctionComponent {
55 | handleSelectItems(poolName, pool?.id);
56 | handleSelectDuration(poolIndex, pool?.time);
57 | handleSelect(poolIndex, index, pool?.time);
58 | e.stopPropagation();
59 | }}
60 | className={classNames(
61 | 'relative flex justify-center items-center w-[32px] h-[32px] bg-[#393C46] border-[2px] border-[#393C46] rounded-[4px] text-[#fff] text-sm font-semibold cursor-pointer',
62 | {
63 | 'border-[2px] border-[#4A7DFF]': selectedItem?.contract_address == pool?.contract_address,
64 | },
65 | )}
66 | >
67 | {pool?.time}
68 | {/*
74 | );
75 | })}
76 |
47 |
99 | );
100 | };
101 |
102 | export default StakingPoolTabContent;
103 |
--------------------------------------------------------------------------------
/src/common/components/Views/Staking/StakingReward.tsx:
--------------------------------------------------------------------------------
1 | import { formatRewardBalance } from '@/utils';
2 | import Image from 'next/image';
3 | import React from 'react';
4 |
5 | interface Props {
6 | rewardUnice: any;
7 | rewardFrens: any;
8 | tokenPrice: number;
9 | frensPrice: number;
10 | }
11 |
12 | const StakingReward: React.FunctionComponent
48 |
49 |
60 |
98 |
61 | {tableData?.map((item: any, index: number) => {
62 | return (
63 |
97 | {
66 | if (!address) {
67 | if (openConnectModal) {
68 | openConnectModal();
69 | }
70 | return;
71 | }
72 | setPoolIndex(index);
73 | setSelectedParentPool(item);
74 | // setShowModalStaking(true);
75 | }}
76 | >
77 |
94 | );
95 | })}
96 |
15 |
40 | );
41 | };
42 |
43 | export default StakingReward;
44 |
--------------------------------------------------------------------------------
/src/common/components/Views/Staking/StakingTab/index.tsx:
--------------------------------------------------------------------------------
1 | import InputCurrency from '@/common/components/common-components/InputCureency';
2 | import StakingPoolAPR from '@/common/components/Views/Staking/StakingPoolTab/StakingPoolAPR';
3 | import { tokenAddress } from '@/common/consts';
4 | import tokenABI from '@/common/contracts/abis/token.json';
5 | import { formatNumber } from '@/utils';
6 | import { Button, Popover } from 'antd';
7 | import classNames from 'classnames';
8 | import Image from 'next/image';
9 | import Link from 'next/link';
10 | import React, { useMemo } from 'react';
11 | import { useAccount, useClient, useReadContract } from 'wagmi';
12 |
13 | interface Props {
14 | loading: boolean;
15 | poolName: string;
16 | totalPool: any;
17 | stakeInfo: StakeInfo;
18 | amount: string;
19 | listPool: any[];
20 | selectedItem: any;
21 | selectedPool: any;
22 | poolInfo: any;
23 | poolAddress: string;
24 | setPoolAddress: (address: string) => void;
25 | validate: string;
26 | setValidate: (value: string) => void;
27 | balance: number | string;
28 | stakeToken: Token;
29 | onChangeAmount: (value: string) => void;
30 | handleStake: (pool: any, poolId: string) => void;
31 | setSelectedPool: (val: any) => void;
32 | handleSelectItems: (poolName: any, selectedId: any) => void;
33 | }
34 |
35 | const StakingTab: React.FunctionComponent
16 |
27 |
17 |
20 | UNICE
19 |
21 |
26 | +{formatRewardBalance(rewardUnice, 4)}
22 |
23 | ~${formatRewardBalance(Number(rewardUnice) * tokenPrice, 4)} USDT
24 |
25 |
28 |
39 |
29 |
32 | FRENS
31 |
33 |
38 | +{formatRewardBalance(rewardFrens, 4)}
34 |
35 | ~${formatRewardBalance(Number(rewardFrens) * frensPrice, 4)} USDT
36 |
37 |
70 |
150 | );
151 | };
152 |
153 | export default StakingTab;
154 |
--------------------------------------------------------------------------------
/src/common/components/Views/Staking/VipLevelDetails.tsx:
--------------------------------------------------------------------------------
1 | import { formatNumber } from '@/utils';
2 | import { Row } from 'antd';
3 | import Image from 'next/image';
4 | import React from 'react';
5 |
6 | interface Props {
7 | vipLevels: any;
8 | }
9 |
10 | const VipLevelDetails: React.FunctionComponent
71 |
119 |
72 |
102 | Duration (months)
73 |
74 | {listPool?.map((pool: any) => {
75 | return (
76 |
101 | {
79 | handleSelectItems(poolName, pool?.id);
80 | setPoolAddress(pool?.contract_address);
81 | setSelectedPool(pool);
82 | // setPoolSelected();
83 | }}
84 | className={classNames(
85 | 'w-[38px] sm:w-[41px] relative text-center bg-[#393C46] border border-[#393C46] rounded-[4px] text-base font-semibold py-[6px] sm:px-[12px] cursor-pointer',
86 | {
87 | 'border border-[#4A7DFF]': currentPool?.contract_address === pool?.contract_address,
88 | },
89 | )}
90 | >
91 | {pool?.time}
92 |
98 | );
99 | })}
100 |
103 |
118 | APR
104 |
109 | {Number(currentPool?.value[0] ?? 0) + Number(currentPool?.value[1] ?? 0)}%
110 |
116 |
117 |
120 | {
130 | setValidate('');
131 | onChangeAmount(value);
132 | }}
133 | loading={true}
134 | />
135 |
140 |
149 | {validate}
136 | 137 |Get $UNICE
138 |
139 |
15 |
19 | Tier Levels
16 | Voting power Required
17 | Allocation
18 |
20 | {vipLevels?.map(({ name, amount }: any) => {
21 | return (
22 |
37 |
23 |
34 | );
35 | })}
36 |
29 | {name}
30 |
31 | {formatNumber(amount)}
32 | {formatNumber(amount)}
33 |
40 |
41 |
42 |
80 |
81 | | 44 | {vipLevels?.map(({ name }: any) => { 45 | return ( 46 | |
47 | |
53 | );
54 | })}
55 |
| VIP Levels | 58 | {vipLevels?.map(({ name }: any) => { 59 | return ( 60 |
61 |
64 | {name}
65 |
66 | |
67 | );
68 | })}
69 |
|
72 | Voting power Required 73 | |
74 | {vipLevels?.map(({ name, amount }: any) => {
75 | return {formatNumber(amount)} | ; 76 | })} 77 |
71 | {label && (
72 |
149 | );
150 | };
151 | export default DisableInput;
152 |
--------------------------------------------------------------------------------
/src/common/components/common-components/InputCureency/index.tsx:
--------------------------------------------------------------------------------
1 | import PositiveFloatNumInput from '@/common/components/PositiveFloatNumInput';
2 | import { APTIcon } from '@/common/components/icon/common';
3 | import { useModal } from '@/common/hooks/useModal';
4 | import { formatNumber, formatNumberBalance } from '@/utils';
5 | import Image from 'next/image';
6 | import React, { useMemo } from 'react';
7 | import Skeleton from '../../Skeleton';
8 |
9 | interface InputProps {
10 | max?: number;
11 | min?: number;
12 | handleChange?: (value: string) => void;
13 | amount: string;
14 | token: any;
15 | balance: any;
16 | subTitle?: string;
17 | setShowTokens?: (value: boolean) => void;
18 | disabled?: boolean;
19 | isAllowDecimal?: boolean;
20 | isOnSelected?: boolean;
21 | setTokenSelected?: any;
22 | enableUseMax?: boolean;
23 | label?: string;
24 | hiddenBalance?: boolean;
25 | className?: string;
26 | maxDecimals?: number;
27 | loading?: boolean;
28 | enableBalance?: string;
29 | }
30 |
31 | const MIN_AMOUNT_DEFAULT = 0.15;
32 |
33 | const InputCurrency: React.FunctionComponent
73 |
96 | )}
97 | {label}
74 | {!hiddenBalance && (
75 |
76 | {loading ? (
77 |
78 | ) : (
79 |
86 | )}
87 | {enableBalance == 'top' && (
88 | ${formatNumberBalance(Number(amount) * token?.price, 4)}
80 | )}
81 |
82 | {subTitle ? subTitle : 'Balance'}: {''}
83 | {`${formatNumber(balance, 2)}`}
84 |
85 |
89 |
90 | Max:
91 | {`${formatNumber(balance, 2)}`}
92 |
93 |
94 | )}
95 |
98 |
99 |
134 | {enableBalance == 'bottom' && (
135 |
125 | {!token?.symbol &&
132 |
133 | {token?.symbol}
129 |
130 | )}
131 |
136 |
137 | Max:
138 | {`${formatNumber(balance, 2)}`}
139 |
140 |
141 | )}
142 |
143 | {/*
79 | {label && (
80 |
167 | );
168 | };
169 | export default InputCurrency;
170 |
--------------------------------------------------------------------------------
/src/common/components/common-components/MobileMenu/BottomMenu.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: fixed;
3 | bottom: 0;
4 | left: 0;
5 | right: 0;
6 | z-index: 100;
7 | text-align: center;
8 | border-radius: 16px 16px 0px 0px;
9 | border: 0px solid #E7E7E8;
10 | background: #FFF;
11 | box-shadow: 0px -3px 12px 0px rgba(0, 3, 28, 0.16);
12 | }
13 |
14 | @media (min-width: 768px) {
15 | .container {
16 | display: none;
17 | }
18 | }
19 |
20 | .toggleButton {
21 | width: 100%;
22 | }
23 |
24 | .menu {
25 | /*height: 0;*/
26 | /*overflow: hidden;*/
27 | /*transition: all .5s ease-in-out;*/
28 | opacity: 0;
29 | }
30 |
31 | .visible {
32 | /*height: 300px;*/
33 | /*opacity: 1;*/
34 | }
35 |
36 | .blurOverlay {
37 | position: fixed;
38 | top: 0;
39 | left: 0;
40 | right: 0;
41 | bottom: 0;
42 | background-color: rgba(0, 0, 0, 0.5);
43 | backdrop-filter: blur(5px);
44 | z-index: -50;
45 | }
46 |
47 | .arrow {
48 | margin-left: 8px;
49 | transition: transform 0.3s ease;
50 | }
51 |
52 | .arrowUp {
53 | transform: rotate(360deg);
54 | }
--------------------------------------------------------------------------------
/src/common/components/common-components/MobileMenu/index.tsx:
--------------------------------------------------------------------------------
1 | import { LargeArrowDownIcon, LargeArrowUpIcon } from '@/common/components/icon/common';
2 | import React, { useEffect, useRef, useState } from 'react';
3 | import { useSwipeable } from 'react-swipeable';
4 | import styles from './BottomMenu.module.css';
5 |
6 | const BottomMenu: React.FunctionComponent<{ campaign?: Campaign; childCmp: any; title: any; currentStep?: number }> = ({
7 | campaign,
8 | childCmp,
9 | title,
10 | currentStep,
11 | }) => {
12 | const [visible, setVisible] = useState(false);
13 | const contentRef = useRef
81 |
110 | )}
111 | {label}
82 | {!hiddenBalance && (
83 |
84 | {loading ? (
85 |
86 | ) : (
87 |
100 | )}
101 | {enableBalance == 'top' && (
102 | ${formatNumberBalance(Number(amount) * token?.price, 4)}
88 | )}
89 |
90 | {subTitle ? subTitle : 'Balance'}: {''}
91 | {`${formatNumber(balance, 2)}`}
92 |
96 | Max
97 |
98 |
99 |
103 |
104 | Max:
105 | {`${formatNumber(balance, 2)}`}
106 |
107 |
108 | )}
109 |
112 |
113 |
151 |
152 | {enableBalance == 'bottom' && (
153 |
142 | {!token?.symbol &&
149 |
150 |
145 |
147 | )}
148 | {token?.symbol}
146 |
154 |
155 | Max:
156 | {`${formatNumber(balance, 2)}`}
157 |
158 |
159 | )}
160 |
161 | {/*
37 | = ({ campaign, onMomentChange }) => {
28 | const [time_left, setTimeLeft] = useState
43 | {title}
44 |
45 | {!visible ?
48 |
57 | {childCmp}
58 |
59 | {visible && setVisible(false)} />}
60 |
61 | );
62 | };
63 |
64 | export default BottomMenu;
65 |
--------------------------------------------------------------------------------
/src/common/components/countdowns/CampaignTitle.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | const CampaignTittle = () => {
4 | return ;
5 | };
6 |
7 | export default CampaignTittle;
8 |
--------------------------------------------------------------------------------
/src/common/components/countdowns/CountdownActiveCampaign.tsx:
--------------------------------------------------------------------------------
1 | import { getData } from '@/common/hooks/useLocalStoragre';
2 | import moment from 'moment';
3 | import React, { useEffect, useMemo, useState } from 'react';
4 | import { useDispatch, useSelector } from 'react-redux';
5 |
6 | export interface Time {
7 | days: string;
8 | hours: string;
9 | minutes: string;
10 | seconds: string;
11 | }
12 |
13 | interface CountdownProps {
14 | campaign: any;
15 | onMomentChange: () => void;
16 | width?: number;
17 | height?: number;
18 | }
19 |
20 | const default_time: Time = {
21 | days: '00',
22 | hours: '00',
23 | minutes: '00',
24 | seconds: '00',
25 | };
26 |
27 | const CountdownActiveCampaign: React.FunctionComponent