diff --git a/.env.local_zq2 b/.env.local_zq2 index ce02623..d3a9808 100644 --- a/.env.local_zq2 +++ b/.env.local_zq2 @@ -1,2 +1,2 @@ ZQ2_STAKING_CHAIN_ID=32769 -ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje \ No newline at end of file +ZQ2_STAKING_WALLET_CONNECT_API_KEY=TODO_REPLACE_THIS_KEY_WITH_YOUR_OWN # you can get one for free on https://reown.com/ \ No newline at end of file diff --git a/.env.mocked b/.env.mocked index 26c815a..c9ddc8a 100644 --- a/.env.mocked +++ b/.env.mocked @@ -1,2 +1,2 @@ ZQ2_STAKING_CHAIN_ID=9999999 -ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje \ No newline at end of file +ZQ2_STAKING_WALLET_CONNECT_API_KEY=UNUSED \ No newline at end of file diff --git a/.env.zq2_testnet b/.env.zq2_testnet index 08720e1..846acf3 100644 --- a/.env.zq2_testnet +++ b/.env.zq2_testnet @@ -1,2 +1,2 @@ ZQ2_STAKING_CHAIN_ID=33103 -ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje \ No newline at end of file +ZQ2_STAKING_WALLET_CONNECT_API_KEY=TODO_REPLACE_THIS_KEY_WITH_YOUR_OWN # you can get one for free on https://reown.com/ \ No newline at end of file diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx index 708b69c..96a85c8 100644 --- a/src/components/withdrawUnstakedZilPanel.tsx +++ b/src/components/withdrawUnstakedZilPanel.tsx @@ -74,17 +74,15 @@ const WithdrawZilPanel: React.FC = ({ ) : (
)} - -
- -
- +
+ +
)) @@ -126,15 +124,11 @@ const WithdrawZilPanel: React.FC = ({ {stakingPoolData.data ? (
- 200.00 avZIL -
- -
- ={' '}{parseFloat( + {parseFloat( formatUnits(claim.zilAmount, 18) ).toFixed(3)}{' '} ZIL -
+
) : (
diff --git a/src/contexts/stakingOperations.tsx b/src/contexts/stakingOperations.tsx index 36d7dea..5ec74e3 100644 --- a/src/contexts/stakingOperations.tsx +++ b/src/contexts/stakingOperations.tsx @@ -33,9 +33,10 @@ const useStakingOperations = () => { */ const [stakingCallTxHash, setStakingCallTxHash] = useState
(undefined); + const [preparingStakingTx, setPreparingStakingTx] = useState(false); const { - isLoading: isStakingInProgress, + isLoading: submittingStakingTx, error: stakeContractCallError, status: stakingCallReceiptStatus, } = useWaitForTransactionReceipt({ @@ -43,10 +44,13 @@ const useStakingOperations = () => { }) const stake = (delegatorAddress: string, weiToStake: bigint) => { + setPreparingStakingTx(true); + if (isDummyWalletConnected) { setDummyWalletPopupContent(`Now User gonna approve the wallet transaction for staking ZIL`); setIsDummyWalletPopupOpen(true); setStakingCallTxHash("0x1234567890234567890234567890234567890" as Address); + setPreparingStakingTx(false); } else { writeContract( wagmiConfig, @@ -69,6 +73,8 @@ const useStakingOperations = () => { placement: "topRight" }); } + ).finally( + () => setPreparingStakingTx(false) ) } } @@ -98,9 +104,10 @@ const useStakingOperations = () => { */ const [unstakingCallTxHash, setUnstakingCallTxHash] = useState
(undefined); + const [preparingUnstakingTx, setPreparingUnstakingTx] = useState(false); const { - isLoading: isUnstakingInProgress, + isLoading: submittingUnstakingTx, error: unstakeContractCallError, status: unstakeCallReceiptStatus, } = useWaitForTransactionReceipt({ @@ -108,10 +115,12 @@ const useStakingOperations = () => { }) const unstake = (delegatorAddress: string, tokensToUnstake: bigint) => { + setPreparingUnstakingTx(true); if (isDummyWalletConnected) { setDummyWalletPopupContent(`Now User gonna approve the wallet transaction for unstaking ${tokensToUnstake} staked tokens`); setIsDummyWalletPopupOpen(true); setUnstakingCallTxHash("0x1234567890234567890234567890234567890" as Address); + setPreparingUnstakingTx(false); } else { writeContract( wagmiConfig, @@ -133,6 +142,8 @@ const useStakingOperations = () => { placement: "topRight" }); } + ).finally( + () => setPreparingUnstakingTx(false) ) } } @@ -162,9 +173,10 @@ const useStakingOperations = () => { */ const [claimCallTxHash, setClaimCallTxHash] = useState
(undefined); + const [preparingClaimTx, setPreparingClaimTx] = useState(false); const { - isLoading: isClaimingInProgress, + isLoading: submittingClaimTx, error: claimContractCallError, status: claimCallReceiptStatus, } = useWaitForTransactionReceipt({ @@ -172,10 +184,12 @@ const useStakingOperations = () => { }) const claim = (delegatorAddress: string) => { + setPreparingClaimTx(true); if (isDummyWalletConnected) { setDummyWalletPopupContent(`Now User gonna approve the wallet transaction for withdrawing/claiming ZIL`); setIsDummyWalletPopupOpen(true); setClaimCallTxHash("0x1234567890234567890234567890234567890" as Address); + setPreparingClaimTx(false); } else { writeContract( wagmiConfig, @@ -197,6 +211,8 @@ const useStakingOperations = () => { placement: "topRight" }); } + ).finally( + () => setPreparingClaimTx(false) ) } } @@ -240,17 +256,17 @@ const useStakingOperations = () => { setIsDummyWalletPopupOpen, stake, - isStakingInProgress, + isStakingInProgress: submittingStakingTx || preparingStakingTx, stakingCallTxHash, stakeContractCallError, unstake, - isUnstakingInProgress, + isUnstakingInProgress: submittingUnstakingTx || preparingUnstakingTx, unstakingCallTxHash, unstakeContractCallError, claim, - isClaimingInProgress, + isClaimingInProgress: submittingClaimTx || preparingClaimTx, claimCallTxHash, claimContractCallError, } diff --git a/src/misc/chainConfig.ts b/src/misc/chainConfig.ts index 5ba449e..845dfec 100644 --- a/src/misc/chainConfig.ts +++ b/src/misc/chainConfig.ts @@ -1,8 +1,8 @@ import { connectorsForWallets } from '@rainbow-me/rainbowkit'; -import { rainbowWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets'; +import { coinbaseWallet, ledgerWallet, metaMaskWallet, phantomWallet, rabbyWallet, rainbowWallet, trustWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets'; import { createClient, createPublicClient, defineChain, http } from 'viem'; import { createConfig } from 'wagmi'; -import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets'; + export const CHAIN_ZQ2_DEVNET = defineChain({ id: 33469, @@ -77,7 +77,16 @@ function getConnectorsForWallets(walletConnectApiKey: string) { [ { groupName: 'Recommended', - wallets: [rainbowWallet, walletConnectWallet, rabbyWallet], + wallets: [ + metaMaskWallet, + walletConnectWallet, + coinbaseWallet, + rabbyWallet, + trustWallet, + ledgerWallet, + rainbowWallet, + phantomWallet + ], }, ], { @@ -89,6 +98,7 @@ function getConnectorsForWallets(walletConnectApiKey: string) { export function getChain(chainId: number) { const chain = [ + CHAIN_ZQ2_DEVNET, CHAIN_ZQ2_PROTOTESTNET, CHAIN_ZQ2_DOCKERCOMPOSE, MOCK_CHAIN, diff --git a/src/misc/formatting.ts b/src/misc/formatting.ts index 283ea3c..17b1a04 100644 --- a/src/misc/formatting.ts +++ b/src/misc/formatting.ts @@ -14,21 +14,27 @@ export function getHumanFormDuration(availableAt: DateTime) { const units = availableAt.diff(DateTime.now()).shiftTo('days', 'hours', 'minutes').toHuman({ unitDisplay: 'long', listStyle: 'narrow', + maximumFractionDigits: 0, }) - const mostSignificantUnit = units.split(',').reduce((acc, unit) => { - if (acc !== '') { - return acc - } + const mostSignificantUnit = units + .split(',') + .map(units => units.trim()) + .reduce((acc, unit) => { + if (acc !== '') { + return acc + } - if (unit[0] !== '0') { - return unit.trim() - } + // check if unit starts with smh different that 0 + // e.g., 0 days 2 hours 5 minutes should return "2 hours" + if (unit[0] !== '0') { + return unit + } - return acc - }, '') + return acc + }, '') - return `~${mostSignificantUnit}` + return `~${mostSignificantUnit || '< 1 minute'}` } export function convertTokenToZil(tokenAmount: bigint, zilToTokenRate: number): bigint { diff --git a/src/misc/stakingPoolsConfig.ts b/src/misc/stakingPoolsConfig.ts index ca493ee..24263cc 100644 --- a/src/misc/stakingPoolsConfig.ts +++ b/src/misc/stakingPoolsConfig.ts @@ -1,5 +1,5 @@ import { Address, erc20Abi, formatUnits, parseUnits } from "viem"; -import { CHAIN_ZQ2_PROTOTESTNET, CHAIN_ZQ2_DOCKERCOMPOSE, getViemClient, MOCK_CHAIN } from "./chainConfig"; +import { CHAIN_ZQ2_PROTOTESTNET, CHAIN_ZQ2_DOCKERCOMPOSE, getViemClient, MOCK_CHAIN, CHAIN_ZQ2_DEVNET } from "./chainConfig"; import { readContract } from "viem/actions"; import { delegatorAbi, depositAbi } from "./stakingAbis"; @@ -116,6 +116,7 @@ async function fetchDelegatorDataFromNetwork(definition: StakingPoolDefinition, } const twoWeeksInMinutes = 60 * 24 * 14; +const fiveMinutesInMinutes = 5; export const stakingPoolsConfigForChainId: Record> = { [MOCK_CHAIN.id]: [ @@ -225,7 +226,7 @@ export const stakingPoolsConfigForChainId: Record - +