APT-1622, APT-1611, APT-1623

.env.local_zq2

@@ -1,2 +1,2 @@
 ZQ2_STAKING_CHAIN_ID=32769
-ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=TODO_REPLACE_THIS_KEY_WITH_YOUR_OWN # you can get one for free on https://reown.com/

.env.mocked

@@ -1,2 +1,2 @@
 ZQ2_STAKING_CHAIN_ID=9999999
-ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=UNUSED

.env.zq2_testnet

@@ -1,2 +1,2 @@
 ZQ2_STAKING_CHAIN_ID=33103
-ZQ2_STAKING_WALLET_CONNECT_API_KEY=ewewewejwje
+ZQ2_STAKING_WALLET_CONNECT_API_KEY=TODO_REPLACE_THIS_KEY_WITH_YOUR_OWN # you can get one for free on https://reown.com/

src/components/withdrawUnstakedZilPanel.tsx

@@ -74,17 +74,15 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
               ) : (
                 <div className="w-[4em] h-[1em] animated-gradient" />
               )}
-
-<div className='lg:w-1/3 lg:max-w-[218px]'>
-              <Button
-                className="btn-primary-gradient-aqua"
-                onClick={() => claim(item.address)}
-                loading={isClaimingInProgress}
-                >
-                Claim 
-              </Button>
-</div>
-
+              <div className='lg:w-1/3 lg:max-w-[218px]'>
+                <Button
+                  className="btn-primary-gradient-aqua"
+                  onClick={() => claim(item.address)}
+                  loading={isClaimingInProgress}
+                  >
+                  Claim 
+                </Button>
+              </div>  
             </div>
           </div>
         ))
@@ -126,15 +124,11 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
               {stakingPoolData.data ? (
                 <div className='flex gap-2.5'>
                  <div className='body1 text-gray4'>
-                 200.00 avZIL 
-               </div>
-
-                <div className='regular-base text-gray4 mt-1'>
-                  ={' '}{parseFloat(
+                 {parseFloat(
                     formatUnits(claim.zilAmount, 18)
                   ).toFixed(3)}{' '}
                   ZIL
-                </div>
+               </div>
                 </div>
               ) : (
                 <div className="w-[4em] h-[1em] animated-gradient" />

src/contexts/stakingOperations.tsx

@@ -33,20 +33,24 @@ const useStakingOperations = () => {
    */
 
   const [stakingCallTxHash, setStakingCallTxHash] = useState<Address | undefined>(undefined);
+  const [preparingStakingTx, setPreparingStakingTx] = useState(false);
 
   const {
-    isLoading: isStakingInProgress,
+    isLoading: submittingStakingTx,
     error: stakeContractCallError,
     status: stakingCallReceiptStatus,
   } = useWaitForTransactionReceipt({
     hash: stakingCallTxHash,
   })
 
   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,20 +104,23 @@ const useStakingOperations = () => {
    */
 
   const [unstakingCallTxHash, setUnstakingCallTxHash] = useState<Address | undefined>(undefined);
+  const [preparingUnstakingTx, setPreparingUnstakingTx] = useState(false);
 
   const {
-    isLoading: isUnstakingInProgress,
+    isLoading: submittingUnstakingTx,
     error: unstakeContractCallError,
     status: unstakeCallReceiptStatus,
   } = useWaitForTransactionReceipt({
     hash: unstakingCallTxHash,
   })
 
   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,20 +173,23 @@ const useStakingOperations = () => {
    */
 
   const [claimCallTxHash, setClaimCallTxHash] = useState<Address | undefined>(undefined);
+  const [preparingClaimTx, setPreparingClaimTx] = useState(false);
 
   const {
-    isLoading: isClaimingInProgress,
+    isLoading: submittingClaimTx,
     error: claimContractCallError,
     status: claimCallReceiptStatus,
   } = useWaitForTransactionReceipt({
     hash: claimCallTxHash,
   })
 
   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,
   }

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,

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 {

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<string, Array<StakingPoolConfig>> = {
   [MOCK_CHAIN.id]: [
@@ -225,7 +226,7 @@ export const stakingPoolsConfigForChainId: Record<string, Array<StakingPoolConfi
         minimumStake: parseUnits("100", 18),
         withdrawPeriodInMinutes: twoWeeksInMinutes,
       },
-      delegatorDataProvider: fetchDelegatorDataFromNetwork.bind(null)
+      delegatorDataProvider: fetchDelegatorDataFromNetwork
     },
     {
       definition: {
@@ -239,7 +240,37 @@ export const stakingPoolsConfigForChainId: Record<string, Array<StakingPoolConfi
         minimumStake: parseUnits("100", 18),
         withdrawPeriodInMinutes: twoWeeksInMinutes,
       },
-      delegatorDataProvider: fetchDelegatorDataFromNetwork.bind(null)
+      delegatorDataProvider: fetchDelegatorDataFromNetwork
+    }
+  ],
+  [CHAIN_ZQ2_DEVNET.id]: [
+    {
+      definition: {
+        id: 'MHg3YTBi',
+        address: '0x7a0b7e6d24ede78260c9ddbd98e828b0e11a8ea2',
+        tokenAddress: '0x9e5c257D1c6dF74EaA54e58CdccaCb924669dc83',
+        iconUrl: '/static/logo1.webp',
+        name: 'Dev Validator 1',
+        tokenDecimals: 18,
+        tokenSymbol: "devLST1",
+        minimumStake: 100000000000000000000n,
+        withdrawPeriodInMinutes: fiveMinutesInMinutes
+      },
+      delegatorDataProvider: fetchDelegatorDataFromNetwork
+    },
+    {
+      definition: {
+        id: 'MHg1YmMz',
+        address: '0x5bc3FcC25638725aaA2ED801b7BA21516f718655',
+        tokenAddress: '0x3261f96C307BAd745578fAa470C8dC2841Dd36E0',
+        iconUrl: '/static/logo2.webp',
+        name: 'Dev Validator 2',
+        tokenDecimals: 18,
+        tokenSymbol: "devLST2",
+        minimumStake: 100000000000000000000n,
+        withdrawPeriodInMinutes: fiveMinutesInMinutes
+      },
+      delegatorDataProvider: fetchDelegatorDataFromNetwork
     }
   ],
   [CHAIN_ZQ2_DOCKERCOMPOSE.id]: [

src/pages/_app.tsx

@@ -36,7 +36,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <ConfigProvider>
         <WagmiProvider config={getWagmiConfig(appConfig.chainId, appConfig.walletConnectPrivateKey)}>
           <QueryClientProvider client={queryClient}>
-            <RainbowKitProvider>
+            <RainbowKitProvider showRecentTransactions={true}>
               <WalletConnector.Provider>
                 <StakingPoolsStorage.Provider>
                   <StakingOperations.Provider>