From 120e74aa7efaa7679439a911a956811771bed08c Mon Sep 17 00:00:00 2001 From: prakritimalik Date: Thu, 22 Sep 2022 13:59:47 +0400 Subject: [PATCH] Changes for validator redirection --- src/components/App.tsx | 25 +++++-- src/components/navbar/Navbar.tsx | 1 + .../delegate/ChooseAllocations.tsx | 73 +++++++++++-------- .../staking-interface/delegate/Delegate.tsx | 39 ++++++++-- .../staking-interface/delegate/Stake.tsx | 2 +- .../delegate/SummaryValidators.tsx | 1 - src/index.tsx | 2 +- src/utils/chains.ts | 2 +- 8 files changed, 95 insertions(+), 50 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index aa0d7ec..484387d 100644 --- 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(); + let params = useParams(); @@ -55,7 +57,6 @@ function App() { if(isQSWalletConnected) { //connectKeplr(); fetchKeplrDetails(val); - console.log('hey'); // setBalances(new Map>(balances.set(chainId, new Map(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) => { } > } /> + } /> } /> } /> diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index b5a0254..5518649 100644 --- 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(); + 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 index 64f2b09..c03c86b 100644 --- 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({}); - + 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 (
- {/* {networkAddress && selectedNetwork !== "Select a network" && balances &&
-

My Wallet

-
{networkAddress}
-
-
-
{zoneBalance}
-

{selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)}

-
-
-
{QCKBalance}
-

{selectedNetwork.local_denom[1] + selectedNetwork.local_denom.charAt(2).toUpperCase() + selectedNetwork.local_denom.slice(3)}

-
- -
-
} */} + {!validatorRedirectVar && <> {zoneBalance <= 0.5 &&
- 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!
} {(zoneBalance) > 0.5 &&

Stake

-

{selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} available to stake: {zoneBalance} {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)}

+

{selectedNetwork?.base_denom?.charAt(1).toUpperCase() + selectedNetwork?.base_denom?.slice(2)} available to stake: {zoneBalance} {selectedNetwork?.base_denom.charAt(1).toUpperCase() + selectedNetwork?.base_denom.slice(2)}

-

Number of {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} you want to stake

+

Number of {selectedNetwork?.base_denom?.charAt(1).toUpperCase() + selectedNetwork?.base_denom?.slice(2)} to: {validatorRedirect}

@@ -274,17 +282,20 @@ useEffect(() => {
{selectedValidatorList.length > 1 && renderValidators()}
- {showMaxMsg &&

We held back 0.3 {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)} to cover future transaction fees

} + {showMaxMsg &&

We held back 0.3 {selectedNetwork?.base_denom?.charAt(1).toUpperCase() + selectedNetwork?.base_denom?.slice(2)} to cover future transaction fees

}
} {(zoneBalance) > 0.5 &&
{stakingAmount> ((zoneBalance) - 0.3) ? `The max that you can allocate is ${ ((zoneBalance) - 0.3).toFixed(6) } atom ` : ''} { stakingAmount > 0 && sum > 100 &&

You have allocated {sum} % of the available atoms. Please move the sliders around until you hit 100% and then you can proceed ahead.

} { stakingAmount > 0 && sum < 99.5 &&

Please allocate the remaining {100.00 - sum} % of atoms to continue

}
} +
+} +{validatorRedirectVar &&

Please check the zone ID and the valoper address!

}
); diff --git a/src/components/staking-interface/delegate/Delegate.tsx b/src/components/staking-interface/delegate/Delegate.tsx index de7d39b..6ade865 100644 --- 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 index e814fd4..be9aa19 100644 --- a/src/components/staking-interface/delegate/Stake.tsx +++ b/src/components/staking-interface/delegate/Stake.tsx @@ -70,7 +70,7 @@ export default function Stake() {
- Delegate + Delegate Redelegate Undelegate
diff --git a/src/components/staking-interface/delegate/SummaryValidators.tsx b/src/components/staking-interface/delegate/SummaryValidators.tsx index af0f03f..2d513c8 100644 --- a/src/components/staking-interface/delegate/SummaryValidators.tsx +++ b/src/components/staking-interface/delegate/SummaryValidators.tsx @@ -108,7 +108,6 @@ export default function SummaryValidators() {
Total Stake: {stakingAmount} {selectedNetwork.base_denom.charAt(1).toUpperCase() + selectedNetwork.base_denom.slice(2)}
Redemption Rate: 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)}
qTokens Received: {stakingAmount/(selectedNetwork?.redemption_rate)}
-

{selectedNetwork?.redemption_rate}

Validator List:
{renderValidators()} diff --git a/src/index.tsx b/src/index.tsx index 5ed7825..a2204a1 100644 --- 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 index ad81d3d..a7c8af4 100644 --- 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 => { const keplr = await getKeplrFromWindow();