ingenuity-build · joe-bowman · Sep 22, 2022
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -23,10 +23,11 @@ import {  setModalClose } from '../slices/connectWalletModal';
 import { increaseStakingStep } from "../slices/stakingActiveStep";
 // @ts-ignore
 import createActivityDetector from 'activity-detector';
-
+import { useParams } from "react-router-dom";
 
 function useIdle(options: any) {
   const [isIdle, setIsIdle] = React.useState(false)
+
   React.useEffect(() => {
     const activityDetector = createActivityDetector(options)
     activityDetector.on('idle', () => setIsIdle(true) )
@@ -45,6 +46,7 @@ function App() {
   const isIdle = useIdle({timeToIdle: 1800000});
   const [loading, setLoading] = React.useState(false);
   const [val, setVal] = React.useState<SigningStargateClient>();
+  let params = useParams();
 
 
 
@@ -55,7 +57,6 @@ function App() {
         if(isQSWalletConnected) {
           //connectKeplr();
           fetchKeplrDetails(val);
-          console.log('hey');
          // setBalances(new Map<string, Map<string, number>>(balances.set(chainId, new Map<string, number>(networkBalances.set(bal.denom, parseInt(bal.amount))))));
         }
     }, 6000)
@@ -72,22 +73,27 @@ connectKeplr();
 }
 };
 
+React.useEffect(() => {
+  console.log(location);
+  if(params.zone && params.address) {
+    handleClickOpen();
+  }
+}, [])
 
 const connectKeplr = async () => {
   setLoading(true);
   initKeplrWithQuickSilver(async(key: string, val: SigningStargateClient) => {
     // @ts-expect-error
     dispatch(setQSWallet(key, val));
-     // @ts-expect-error
-    dispatch(setQSWalletConnected())
-
+
     setVal(val);
-        fetchKeplrDetails(val)
+    fetchKeplrDetails(val)
          // @ts-expect-error
   dispatch(setModalClose());
   setLoading(false);
-         // @ts-expect-error
-  dispatch(increaseStakingStep());
+
+  //        // @ts-expect-error
+  // dispatch(increaseStakingStep());
 
   });
 
@@ -104,6 +110,8 @@ const fetchKeplrDetails = async (val: any) => {
 
             // @ts-expect-error
         dispatch(setQSBalance(roBalance));
+               // @ts-expect-error
+       dispatch(setQSWalletConnected())
     }
 }
 
@@ -118,6 +126,7 @@ const fetchKeplrDetails = async (val: any) => {
 
                       <Route path="/stake" element={<Stake/>} >
           <Route path="delegate" element={<Delegate/>} />
+          <Route path="delegate/:zone/:address" element={<Delegate handleClickOpen={handleClickOpen}/> } />
           <Route path="undelegate" element={<Undelegate />} />
           <Route path="redelegate" element={<Redelegate />} /> 
         </Route>

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -55,6 +55,7 @@ export default function Navbar(props: PropComponent) {
   const isIdle = useIdle({timeToIdle: 1800000});
   const [val, setVal] = React.useState<SigningStargateClient>();
 
+
   const { networks, loading, hasErrors } = useSelector(networksSelector);
   const {selectedNetwork} = useSelector(selectedNetworkSelector);
  const {networkAddress} = useSelector(selectedNetworkWalletSelector);

diff --git a/src/components/staking-interface/delegate/ChooseAllocations.tsx b/src/components/staking-interface/delegate/ChooseAllocations.tsx
@@ -7,16 +7,19 @@ import { validatorListSelector} from "../../../slices/validatorList";
 import {quicksilverSelector} from '../../../slices/quicksilver';
 import {increaseStakingStep, decreaseStakingStep} from '../../../slices/stakingActiveStep';
 import './ChooseAllocations.css';
+import { useParams } from "react-router-dom";
 
 export default function ChooseAllocations() {
     const dispatch = useDispatch();
     const [allocationProp, setAllocationProp] = useState<any>({});
-
+    const [errorValidatorMsg, setErrorValidatorMsg] = useState(false);
+    const [validatorRedirectVar, setValidatorRedirectVar] = useState(false);
+    let params = useParams();
     const isMax = useRef(false);
     const [isMaxClicked, setisMaxClicked] = useState(false);;
     const [showMaxMsg, setShowMaxMsg] = React.useState(false);
 
-    const {selectedValidatorList} = useSelector(validatorListSelector);
+    const {validatorList, selectedValidatorList} = useSelector(validatorListSelector);
     const {stakingAmount, stakingAllocationProp} = useSelector(stakingAllocationSelector)
 
     const {networkAddress, networkBalances} = useSelector(selectedNetworkWalletSelector);
@@ -27,11 +30,13 @@ export default function ChooseAllocations() {
 
     const [QCKBalance, setQCKBalance] = useState(0);
   const [zoneBalance, setZoneBalance] = useState(0);
+  const [validatorRedirect, setValidatorRedirect] = useState('');
 
 
+
   useEffect(() => {
     if(balances !== []) {
-         let balance = balances.find((bal: any) => bal.denom === selectedNetwork.local_denom);
+         let balance = balances.find((bal: any) => bal.denom === selectedNetwork?.local_denom);
          if(balance) {
           console.log(balance)
           setQCKBalance((balance.amount)/1000000);
@@ -44,7 +49,7 @@ export default function ChooseAllocations() {
 useEffect(() => {
 
   if(networkBalances !== []) {
-    let balance = networkBalances.find((bal: any) => bal.denom === selectedNetwork.base_denom);
+    let balance = networkBalances.find((bal: any) => bal.denom === selectedNetwork?.base_denom);
     if(balance) {
      setZoneBalance((balance.amount)/1000000);
     }
@@ -61,11 +66,6 @@ useEffect(() => {
             }, allocationProp);
             setSum(100);
             setAllocationProp(temp);
-        // selectedValidatorList.forEach((x: any) => {      
-        //     let newAllocationProp : any = {...allocationProp};
-
-        // newAllocationProp[x.address]['value'] = +(value/stakingAmount) * 100;
-        // setAllocationProp(newAllocationProp) }) ;
         } else if(selectedValidatorList.length === 1) {
             let temp =  selectedValidatorList.reduce((acc: any, curr: any) => {
                 acc[curr.address] = {...curr, value: 100}
@@ -74,10 +74,32 @@ useEffect(() => {
             setAllocationProp(temp);
             console.log(temp)
             setSum(100);
-        }
-         // @ts-expect-error
+        } else if(params.zone && params.address) {
+            if(validatorList) {
+                let validator;
+            validator = validatorList.find((y:any) => y.address === params.address); 
+            if(validator === undefined)  {
+                console.log(validator);
+                setValidatorRedirectVar(true);
+            }
+            if(validator !== undefined) {
+                setValidatorRedirect(validator?.name);
+                setValidatorRedirectVar(false);
+            }        
+
+            let valAdd = validator?.address;
+            var temp : any = {};
+             temp[valAdd] = {...validator, value: 100}}
+             setAllocationProp(temp)
+            console.log('VARR', temp)
+            setSum(100);
+            }
+
+
+
+         // @ts-expect-errors
          dispatch(setStakingAmount(1))            
-    }, [])
+    }, [validatorList])
 
     useEffect(() => {
         console.log('Checking use Effect');
@@ -242,30 +264,16 @@ useEffect(() => {
     }
     return (
     <div className="allocation-pane d-flex flex-column align-items-center">
- {/* {networkAddress && selectedNetwork !== "Select a network" && balances && <div className="wallet-details d-flex flex-column mt-3">
-                <h4> My Wallet</h4>
-                <h6>{networkAddress}</h6>
-                <div className="row wallet-content mt-4">
-                <div className="col-3 text-center">
-                       <h5 className="font-bold">{zoneBalance}</h5>
-                       <p> {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)}</p>
-                    </div>
-                    <div className="col-3 text-center">
-                    <h5 className="font-bold">{QCKBalance}</h5>
-                    <p> {selectedNetwork.local_denom[1] + selectedNetwork.local_denom.charAt(2).toUpperCase() + selectedNetwork.local_denom.slice(3)}</p>
-                        </div>
-
-                </div>
-            </div> } */}
+        {!validatorRedirectVar && <>
            {zoneBalance <= 0.5 &&  <div className="mt-3">
-                You don't have enough   {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} to stake! 
+                You don't have enough   {selectedNetwork?.base_denom?.charAt(1).toUpperCase() + selectedNetwork?.base_denom?.slice(2)} to stake! 
             </div>}
            {(zoneBalance) > 0.5 &&  <div className="staking-pane d-flex flex-column mt-4">
                 <h4>Stake</h4> 
-                <p className="mx-3 mt-2 mb-2 m-0"> {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} available to stake: <span className="font-bold"> {zoneBalance} {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} </span></p>   
+                <p className="mx-3 mt-2 mb-2 m-0"> {selectedNetwork?.base_denom?.charAt(1).toUpperCase() + selectedNetwork?.base_denom?.slice(2)} available to stake: <span className="font-bold"> {zoneBalance} {selectedNetwork?.base_denom.charAt(1).toUpperCase() + selectedNetwork?.base_denom.slice(2)} </span></p>   
                 <div className="d-flex mt-3 align-items-center">
 
-                    <p className="m-0 mx-3"> Number of {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} you want to stake</p>
+                    <p className="m-0 mx-3"> Number of {selectedNetwork?.base_denom?.charAt(1).toUpperCase() + selectedNetwork?.base_denom?.slice(2)}  to: {validatorRedirect} </p>
                     <input className="mx-3" type="number" value={stakingAmount}  placeholder="0" min={0} onChange={ changeAmount}/>
                     <button className="mx-3 p-1 max-button" onClick={onMaxClick}> MAX </button> 
 
@@ -274,17 +282,20 @@ useEffect(() => {
                 <div className="d-flex flex-column align-items-end mt-2">
                 {selectedValidatorList.length > 1 && renderValidators()}
                 </div>
-                {showMaxMsg && <p className="mb-0 mt-3">We held back 0.3 {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} to cover future transaction fees</p> }
+                {showMaxMsg && <p className="mb-0 mt-3">We held back 0.3 {selectedNetwork?.base_denom?.charAt(1).toUpperCase() + selectedNetwork?.base_denom?.slice(2)} to cover future transaction fees</p> }
             </div>}
             {(zoneBalance) > 0.5 &&  <div className="mt-4 text-center">
             {stakingAmount> ((zoneBalance) - 0.3) ? `The max that you can allocate is ${ ((zoneBalance) - 0.3).toFixed(6) } atom ` : ''}
             { stakingAmount > 0 && sum > 100 && <p className="mt-2"> You have allocated {sum} % of the available atoms. Please move the sliders around until you hit 100% and then you can proceed ahead. </p>}
             { stakingAmount > 0 && sum < 99.5 && <p className="mt-2"> Please allocate the remaining {100.00 - sum} % of atoms to continue </p>}
        </div>}
+
         <div className="button-containers mt-4 mb-4">
             <button className="prev-button mx-3" onClick={onPrev}> Previous </button>
         <button disabled={sum < 99.9  || sum  > 100 || stakingAmount < 1 || stakingAmount > (zoneBalance - 0.3)?  true: false}  className="next-button mx-3" onClick={onClickNext}>Next</button> 
 </div>
+</>}
+{validatorRedirectVar && <h4 className="mt-5 text-center"> Please check the zone ID and the valoper address! </h4>}
         </div> 
     );
 

diff --git a/src/components/staking-interface/delegate/Delegate.tsx b/src/components/staking-interface/delegate/Delegate.tsx
@@ -1,30 +1,37 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import NetworkSelection from './NetworkSelection';
 import ChooseValidators from './ChooseValidators';
 import ChooseAllocations from './ChooseAllocations';
 import ChoosExistingDelegations from './ChooseExistingDelegations';
 import ConnectWallet from './ConnectWallet';
 import { useSelector, useDispatch } from 'react-redux'
-import {stakingActiveStep} from '../../../slices/stakingActiveStep';
-import { selectedNetworkSelector} from "../../../slices/selectedNetwork";
+import {setStakingStep, stakingActiveStep} from '../../../slices/stakingActiveStep';
+import { selectedNetworkSelector, setSelectedNetwork, setSelectedNetworkFunc} from "../../../slices/selectedNetwork";
+import { networksSelector } from '../../../slices/networks'	;
 import { _loadValsAsync , validatorListSelector, setSelectedValidatorList} from "../../../slices/validatorList";
 import { selectedNetworkWalletSelector } from '../../../slices/selectedNetworkWallet';
 import {_loadExistingValsAsync} from '../../../slices/existingDelegations';
+import {quicksilverSelector} from '../../../slices/quicksilver';
 import SummaryExistingDelegations from './SummaryExistingDelegations';
 import SummaryValidators from './SummaryValidators';
 import CongratulationsPane from './CongratulationsPane';
+import { useParams } from "react-router-dom";
+import networks from '../../../slices/networks';
+import { useNetworkState } from 'react-use';
 
 
-
-export default function Delegate() {
+export default function Delegate(props: any) {
     const dispatch = useDispatch();
+    let params = useParams()
+
     const {selectedNetwork} = useSelector(selectedNetworkSelector);
     const {networkAddress} = useSelector(selectedNetworkWalletSelector);
     const {validatorList, selectedValidatorList} = useSelector(validatorListSelector);
+    const {balances, isQSWalletConnected} = useSelector(quicksilverSelector);
+    const { networks } = useSelector(networksSelector);
 
     useEffect(() => {
         if (selectedNetwork !== "Select a network") {
-            console.log(selectedNetwork.chain_id)
                   // @ts-expect-error
          dispatch(_loadValsAsync(selectedNetwork.chain_id));
         //          // @ts-expect-error
@@ -33,7 +40,25 @@ export default function Delegate() {
       }, [selectedNetwork])
 
 
-
+      useEffect(() => {
+        if(params.zone && params.address) {
+            props.handleClickOpen();
+            if(selectedNetwork === "Select a network") {
+                if(networks !== [] && isQSWalletConnected) {
+                    console.log('Networks', networks)
+                let network = networks.find((y:any) => y.value.chain_id === params.zone); 
+                console.log(network);
+                     // @ts-expect-error 
+                     dispatch(setSelectedNetworkFunc(network))
+                     console.log('heyyy')
+                        // @ts-expect-error 
+                     dispatch(setStakingStep(4))
+                }
+            }
+
+
+        }
+      },[networks, isQSWalletConnected])
 
 
 

diff --git a/src/components/staking-interface/delegate/Stake.tsx b/src/components/staking-interface/delegate/Stake.tsx
@@ -70,7 +70,7 @@ export default function Stake() {
             </div>
             <div className="content col-10">
             <div className="mt-5 stake-options d-flex justify-content-center">
-        <Link to="delegate"  className={`${location.pathname === '/stake/delegate'  ? 'active-link mx-3 px-2' : 'mx-3 px-2 link'}`}>Delegate</Link>
+        <Link to="delegate"  className={`${location.pathname.includes('/stake/delegate') ? 'active-link mx-3 px-2' : 'mx-3 px-2 link'}`}>Delegate</Link>
         <Link to="redelegate" className={`${location.pathname === '/stake/redelegate'  ? 'active-link mx-3 px-2' : 'mx-3 px-2 link'}`} >Redelegate</Link>
         <Link to="undelegate" className={`${location.pathname === '/stake/undelegate'  ? 'active-link mx-3 px-2' : 'mx-3 px-2 link'}`} >Undelegate</Link>
         </div>

diff --git a/src/components/staking-interface/delegate/SummaryValidators.tsx b/src/components/staking-interface/delegate/SummaryValidators.tsx
@@ -108,7 +108,6 @@ export default function SummaryValidators() {
             <h5 className="mt-4"> Total Stake: <span className="font-bold">{stakingAmount} {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)}</span></h5>
             <h5>Redemption Rate:  <span className="font-bold">1 {selectedNetwork.local_denom[1] + selectedNetwork.local_denom.charAt(2).toUpperCase() + selectedNetwork.local_denom.slice(3)} =  {parseFloat(selectedNetwork?.redemption_rate).toFixed(8)} {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} </span></h5>
             <h5>qTokens Received:  <span className="font-bold">{stakingAmount/(selectedNetwork?.redemption_rate)}</span></h5>
-            <p> {selectedNetwork?.redemption_rate}</p>
             <h6 className="mt-4"> Validator List: </h6>
         {renderValidators()}
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -20,7 +20,7 @@ const store = configureStore({ reducer: rootReducer,
   getDefaultMiddleware({
     serializableCheck: {
       // Ignore these action types
-      ignoredActions: ['quicksilver-wallet/setWalletQSSuccess', 'selected-network-wallet/setWalletNetworkSuccess', 'selected-network-wallet/setClientSuccess'],
+      ignoredActions: ['quicksilver-wallet/setWalletQSSuccess', 'selected-network-wallet/setWalletNetworkSuccess', 'selected-network-wallet/setClientSuccess', 'selectedNetwork/setSelectedNetwork'],
       // Ignore these field paths in all actions
       ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
       // Ignore these paths in the state

diff --git a/src/utils/chains.ts b/src/utils/chains.ts
@@ -23,7 +23,7 @@ const Chains : { [index:string] : ChainInfo[] } = {
 
 export const QuickSilverChainInfo : ChainInfo =  QuickSilverChains[env.NODE_ENV] 
 
-const ChainInfos: ChainInfo[] =  Chains[env.NODE_ENV] 
+export const ChainInfos: ChainInfo[] =  Chains[env.NODE_ENV] 
 
 export const initKeplr = async (fn: Function):Promise<void> => { 
     const keplr = await getKeplrFromWindow();