Feature/update develop

.env

@@ -1,6 +1,6 @@
-NODE_ENV="test"
-QUICKSILVER_API="https://lcd.test.quicksilver.zone"
-ZONE_URL="test.quicksilver.zone"
-REACT_APP_ENABLE_UNBONDING="false"
+NODE_ENV="dev"
+QUICKSILVER_API="https://lcd.dev.quicksilver.zone"
+ZONE_URL="dev.quicksilver.zone"
+REACT_APP_ENABLE_UNBONDING="true"
 REACT_APP_ENABLE_SET_INTENT="false"
 REACT_APP_ENABLE_CLAIMS="true"

netlify.toml

@@ -19,6 +19,14 @@
   REACT_APP_ENABLE_SET_INTENT="false"
   REACT_APP_ENABLE_CLAIMS="true"
 
+[context.preprod.environment]
+  NODE_ENV = "preprod"
+  QUICKSILVER_API = "https://lcd.quicksilver.zone"
+  ZONE_URL = "quicksilver.zone"
+  REACT_APP_ENABLE_UNBONDING="false"
+  REACT_APP_ENABLE_SET_INTENT="false"
+  REACT_APP_ENABLE_CLAIMS="true"
+
 [context.develop.environment]
   NODE_ENV = "dev"
   QUICKSILVER_API = "https://lcd.dev.quicksilver.zone"

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@cosmjs/stargate": "^0.28.4",
+    "@cosmjs/stargate": "^0.29.5",
     "@keplr-wallet/stores": "^0.10.3",
     "@keplr-wallet/types": "^0.10.3",
     "@reduxjs/toolkit": "^1.8.5",
@@ -82,6 +82,6 @@
       "REACT_APP_ENABLE_UNBONDING",
       "REACT_APP_ENABLE_CLAIMS"
     ]
-  }, 
+  },
   "homepage": ""
 }

public/env.js

@@ -1,8 +1,8 @@
 window.env = {
-  "NODE_ENV": "test",
-  "QUICKSILVER_API": "https://lcd.test.quicksilver.zone",
-  "ZONE_URL": "test.quicksilver.zone",
+  "NODE_ENV": "dev",
+  "QUICKSILVER_API": "https://lcd.dev.quicksilver.zone",
+  "ZONE_URL": "dev.quicksilver.zone",
   "REACT_APP_ENABLE_SET_INTENT": "false",
-  "REACT_APP_ENABLE_UNBONDING": "false",
+  "REACT_APP_ENABLE_UNBONDING": "true",
   "REACT_APP_ENABLE_CLAIMS": "true"
 };

src/components/App.css

@@ -65,4 +65,38 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}
+
+.mobile-message {
+  display: none;
+}
+
+@media (max-width: 1279.98px) { 
+  .navbar .navbar-logo {
+    background:#1A1A1A;
+
+  }
+  .img-logo {
+    display: none;
+  }
+
+  .unbonding-message, .staking-interface, .navbar ul, .navbar .connect-wallet-button, .connect-wallet, .navbar .custom-class,  .assets-interface {
+    display: none !important;
+
+  }
+
+  .mobile-message {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    margin-top: 58px;
+    position: absolute;
+    min-height: calc(100vh - 58px);
+    background:#1A1A1A;
+    width: 100vw;
+  }
+
+  .mobile-message h4 {
+    color: #fff;
+  }
+ }

src/components/App.tsx

@@ -50,14 +50,14 @@ function App() {
 
 
 
+
   React.useEffect(() => {
     let timer: any;
     if(!isIdle) {
       timer = setInterval( () => {
         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)
@@ -132,7 +132,11 @@ const fetchKeplrDetails = async (val: any) => {
     <div className="img-logo text-center">
     <img className="logo-stroke" src={LogoStroke} alt="Quicksilver Logo"/>
     </div>
+
   {location.pathname !== '/' && <Navbar loading={loading} setLoading={setLoading} handleClickOpen={handleClickOpen} />}
+      <div className="mobile-message p-3"> 
+    <h4>The current display window is too small. Minimum supported resolution is 1280 pixels wide.</h4> 
+    </div>
    <Routes>
                       <Route path="/" element={<Landing/>}/>
 

src/components/assets-interface/Assets.tsx

@@ -209,6 +209,7 @@ export default function Assets() {
                 <h4 className="sub-heading"> Hey there! </h4>
                 <h1 className="mt-3"> Connect your wallet to get started! </h1>
                 <button  onClick={onButtonClick}  className="connect-wallet-button mt-5"> Connect Wallet </button> 
+                       {/* <h4 className="sub-heading"> Assets screen will be enabled soon. Stay tuned.</h4> */}
                 </div>
             </div>
 

src/components/navbar/Navbar.tsx

@@ -133,7 +133,6 @@ export default function Navbar(props: PropComponent) {
         let roBalance = await val.getAllBalances(bech32);
               // @ts-expect-error
           dispatch(setNetworkBalance(roBalance));
-          console.log('roBalance',roBalance);
       }
     }
 
@@ -160,7 +159,6 @@ export default function Navbar(props: PropComponent) {
         if(isQSWalletConnected) {
           //connectKeplr();
           fetchNetworkDetails(val);
-          console.log('VAL', val)
          // setBalances(new Map<string, Map<string, number>>(balances.set(chainId, new Map<string, number>(networkBalances.set(bal.denom, parseInt(bal.amount))))));
         }
     }, 10000)

src/components/staking-interface/delegate/ChooseAllocations.tsx

@@ -33,7 +33,6 @@ export default function ChooseAllocations() {
     if(balances !== []) {
          let balance = balances.find((bal: any) => bal.denom === selectedNetwork.local_denom);
          if(balance) {
-          console.log(balance)
           setQCKBalance((balance.amount)/1000000);
 
          }
@@ -81,7 +80,6 @@ useEffect(() => {
     }, [])
 
     useEffect(() => {
-        console.log('Checking use Effect');
     if(isMax.current) {
 
      calculateMax()
@@ -126,10 +124,6 @@ useEffect(() => {
 
         }
        else if(selectedValidatorList.length !== 6 && selectedValidatorList.length > 1) {
-
-       console.log('Amount' , stakingAmount);
-       console.log('Length' , selectedValidatorList.length);
-       console.log('Value', value);
        selectedValidatorList.forEach((x: any) => {      
            let newAllocationProp : any = {...allocationProp};
 

src/components/staking-interface/delegate/ChooseValidators.css

@@ -29,6 +29,7 @@ padding: 1rem;
 .validator-selection-pane .validators {
     max-height: 41vh;
     overflow-y: auto;
+    width: 90%;
 }
 
 .max-button {
@@ -43,4 +44,15 @@ padding: 1rem;
 .next-button:disabled {
     background: #D87D44;
     border: #D87D44;
-}
+}
+
+.search {
+    border-radius: 10px;
+    width: 275px;
+    padding: 5px;
+    height: 45px;
+}
+
+.choose-heading {
+    margin-left: 0px;
+}

src/components/staking-interface/delegate/ChooseValidators.tsx

@@ -36,15 +36,30 @@ export default function ChooseValidators() {
 
 
       const filterData = () => {
-        setValidators(validatorList.filter((val: any) => val.name.toLowerCase().includes(searchTerm.toLowerCase())));
+        let newData = validatorList.map((val: any) => {
+            if(selectedValidators.find((x: any) => x.address === val.address)) {
+               return Object.assign({}, val, {active: true})
+            } else {
+               return Object.assign({}, val, {active:false})
+            }   
+        }
+        )   
+        setValidators(newData.filter((val: any) => val.name.toLowerCase().includes(searchTerm.toLowerCase())));
      }
 
      React.useEffect(() => {
          if(searchTerm) {
          filterData();
          } else {
-
-             setValidators(validatorList)
+            let newData = validatorList.map((val: any) => {
+                if(selectedValidators.find((x: any) => x.address === val.address)) {
+                   return Object.assign({}, val, {active: true})
+                } else {
+                   return Object.assign({}, val, {active:false})
+                }   
+            }
+            )   
+            setValidators(newData);
          }
      },[searchTerm])
 
@@ -55,8 +70,7 @@ export default function ChooseValidators() {
             let newData = validators.map((val: any) => 
             Object.assign({}, val, {active:false})
             )       
-            console.log(newData);
-            setValidators(newData);
+            setValidators([...newData].sort(() => Math.random() - 0.5));
         }  else {
             let newData = validators.map((val: any) => {
                 if(selectedValidatorList.find((x: any) => x.address === val.address)) {
@@ -66,8 +80,7 @@ export default function ChooseValidators() {
                 }   
             }
             )   
-            console.log(newData)
-            setValidators(newData);
+            setValidators([...newData].sort(() => Math.random() - 0.5));
         }
            // validatorList.find((x: any) => x.address === row.validator_address )?.name
 
@@ -121,12 +134,12 @@ const onNext = () => {
     return (
 
    <div className="validator-selection-pane d-flex flex-column align-items-center">
-        <h2 className="mt-3"> Choose validators </h2>
+        <h2 className="mt-3 choose-heading"> Choose Validators </h2>
 
-        {/* <input className="mt-2 px-2" type="text"  value={searchTerm} onChange={handleChange} placeholder="Search validators"/> */}
+        <input className="mt-2 px-2 search" type="text"  value={searchTerm} onChange={handleChange} placeholder="Search Validators"/>
 
-          <div className="mt-3 validators row w-100 justify-content-center">
-        {validators.length === 0 && <p className="text-center"> There's an issue with fetching validator list. Please try again</p>}
+          <div className="mt-3 validators row justify-content-center">
+          {validatorList.length === 0 && !hasErrors && <p className="text-center"> There's an issue with fetching validator list. Please try again</p>}
           {validators.map((row: any) =>
           <>
                 <div onClick={ (e) => addValidator(e,row)} className={`validator-card col-3 m-3 ${row?.active ? 'val-active' : ''}`}>
@@ -138,16 +151,18 @@ const onNext = () => {
                 {/* <h4 className="font-bold">  Reward </h4> */}
                 </div>
                 </div>
-            {hasErrors && <p> There's an issue with fetching the validators. Please try again</p>}
             </div>
 
           </>
 
 )}
+{hasErrors && <p className="text-center"> There's an issue with fetching the validators. Please try again</p>}
+
               </div>
+              <p className="text-center mt-3">Showing {validators.length} validators... </p>
               {selectedValidators.length > 8 && <p className="mt-3"> A maximum of 8 validators can be selected</p>}
 
-<div className="mt-5 button-container">
+<div className="mt-2 button-container">
         <button onClick={onPrevious} className="prev-button mx-3" > Previous</button>
         <button disabled={selectedValidators.length > 8 || selectedValidators.length === 0 } className="next-button mx-3" onClick={onNext}  >Next</button>
     </div>

src/components/staking-interface/delegate/CongratulationsPane.tsx

@@ -23,8 +23,9 @@ export default function CongratulationsPane() {
         <>
         <div className="congratulations-pane d-flex mt-5 justify-content-center align-items-center flex-column">
     <h4 className="mt-5">Your assets have been successfully staked!</h4> 
+    <h5 className="mt-2">Your qAssets will arrive in your Quicksilver wallet shortly.</h5>
     <div className="button-container mt-4">
-        <button onClick={stakeAnotherNetwork} className="stake mx-2"> Stake on another network </button>
+        <button onClick={stakeAnotherNetwork} className="stake mx-2"> Stake again </button>
         </div>
     </div>
     </>

src/components/staking-interface/delegate/ConnectWallet.tsx

@@ -17,6 +17,7 @@ export default function ConnectWallet() {
                 <h4 className="sub-heading"> Hey there! </h4>
                 <h1 className="mt-3"> Connect your wallet to get started! </h1>
                 <button  onClick={onButtonClick} className="connect-wallet-button mt-5"> Connect Wallet </button> 
+                {/* <h4 className="sub-heading"> Deposits will be enabled soon. Stay tuned. </h4> */}
                 </div>
     </>
   )

src/components/staking-interface/delegate/NetworkSelection.tsx

@@ -38,7 +38,6 @@ export default function NetworkSelection() {
     if(balances !== []) {
          let balance = balances.find((bal: any) => bal.denom === selectedNetwork.local_denom);
          if(balance) {
-          console.log(balance)
           setQCKBalance((balance.amount)/1000000);
          } else 
           {

src/components/staking-interface/delegate/Stake.tsx

@@ -29,7 +29,7 @@ export default function Stake() {
 
     return  (
         <>
-                     <p className="unbonding-message"> The Unbonding feature will be enabled early January 2023. Any assets you stake to the protocol will remain locked until that time.</p>
+                     <p className="unbonding-message"> The Unbonding feature will be enabled early Q1 2023. Any assets you stake to the protocol will remain locked until that time.</p>
             <div className="staking-interface row mx-0">
             <div className="stepper col-2 d-flex flex-column ">
 

src/components/staking-interface/redelegate/RedelegateAllocations.tsx

@@ -65,14 +65,6 @@ export default function RedelegateAllocations() {
           redelegateValidatorList.forEach((x: any) => {      
 
         sum = sum + allocationProp[x.address]['value'] ;  console.log(allocationProp[x.address]['value'])})
-        console.log(sum);
-        if(sum < 100) {
-            console.log("Please allocation more atoms");
-        } else if(sum > 100) {
-            console.log("Please allocation less atoms");
-        } else {
-            console.log("please proceed");
-        }
         setSum(sum);
 
             }
@@ -95,7 +87,7 @@ export default function RedelegateAllocations() {
 
       }
       out = out.toString();
-        console.log(out);
+
 
         let msg =  {
             typeUrl: "/quicksilver.interchainstaking.v1.MsgSignalIntent",