ingenuity-build · joe-bowman · Feb 7, 2023
diff --git a/.env b/.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"
+REACT_APP_ENABLE_CLAIMS="true"
diff --git a/public/env.js b/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"
 };
diff --git a/src/components/airdrops-interface/Airdrops.tsx b/src/components/airdrops-interface/Airdrops.tsx
@@ -9,11 +9,11 @@ export default function Airdrop() {
           <div className="assets-interface row mx-0">
 
 
-      {!showAirdrops && <div className="col-12 max-auto mt-5">
+      {!showAirdrops && <div className="col-12 mx-auto mt-3">
       <div className="mt-5 d-flex flex-column justify-content-center align-items-center">
-      <h3 className="text-center mt-5"> Airdrop</h3>
+      <h3 className="text-center mt-2"> Airdrop</h3>
       <p className="text-center coming-soon"> Coming soon</p>
-      <div className="w-50 mt-2">
+      <div className="col-7 mt-2">
         <p>
         Over 50% of the Genesis supply will be going to incentivising the community and driving usage. Eligible stakers of chains onboarded on the Protocol will receive airdrops upon the onboarding of said chains. This means that stakers of chains that do not exist yet will receive a QCK airdrop in the future. 
         <br/>

diff --git a/src/components/assets-interface/Assets.css b/src/components/assets-interface/Assets.css
@@ -35,10 +35,10 @@ h2 {
 
   .asset-card {
 
-        background: #282828;
+    background: #282828;
     border: 2px solid #282828;
     border-radius: 5px;
-    padding: 1rem;
+    padding: 1rem 3rem 1rem 3rem;
 
   }
 

diff --git a/src/components/assets-interface/Assets.tsx b/src/components/assets-interface/Assets.tsx
@@ -43,21 +43,21 @@ export default function Assets() {
   const { networks, hasErrors } = useSelector(networksSelector);
   const [denomArray, setDenomArray] = useState<Array<string>>([])
 
-  // useEffect(() => {
-  //   if(isQSWalletConnected && networks) {
-  //   let denomArray : Array<string> = [];
-  //   networks.forEach((network: any) => denomArray.push(network.value.local_denom));
-  //   denomArray.push('uqck');
-  //   setDenomArray(denomArray);
-  //   if(!sum) {
-  // fetchSum();
-  //   }
-  // }
-  //   // if(messages.length == 0) {
-  //   //   queryXccLookup();
-  //   // }
+  useEffect(() => {
+    if(isQSWalletConnected && networks) {
+    let denomArray : Array<string> = [];
+    networks.forEach((network: any) => denomArray.push(network.value.local_denom));
+    denomArray.push('uqck');
+    setDenomArray(denomArray);
+    if(!sum) {
+  fetchSum();
+    }
+  }
+    if(messages.length == 0) {
+      queryXccLookup();
+    }
 
-  // }, [balances])
+  }, [balances])
 
   const onButtonClick = () => {
     // @ts-expect-error
@@ -109,6 +109,7 @@ export default function Assets() {
   // }
   const onClaimsClick = async (e: any) => {
 
+
     if (messages.length == 0) {
       alert("nope!")
       return
@@ -156,7 +157,7 @@ export default function Assets() {
         "gas": "400000",
         "amount": [
           {
-            "denom": "umuon",
+            "denom": "uqck",
             "amount": "300"
           }
         ]
@@ -203,70 +204,70 @@ export default function Assets() {
 
     return (
        <>
-        {!isQSWalletConnected && <div>
+        {!isQSWalletConnected && 
           <div className="assets-interface row mx-0">
-          <div className="connect-wallet-pane d-flex flex-column align-items-center ">
-                <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> 
-                </div>
+            <div className="connect-wallet-pane d-flex flex-column align-items-center ">
+              <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> 
             </div>
-
-        </div>}
-       {isQSWalletConnected && <div>
-          <div className="assets-interface row mx-0">
-          {showAssets && <div className="col-8 mx-auto mt-5">
-<div className="participation-rewards">
-    <div className="d-flex p-3 justify-content-center flex-column">
-    <h3> Claim Participation Rewards </h3>
-    <p className="coming-soon"> Coming soon</p>
-    {/* <button onClick={onClaimsClick}> Claim </button> */}
-    <p>
-    Participation Rewards are QCK token emissions that will reward Protocol users for delegating to decentralized, performant validators that are active in governance.
-<br/> <br/>
-These rewards will be distributed on an epochly basis (every 3 days).
-    </p>
-    <button> Claim</button>
-    </div>
-
-  </div>
-  <h3 className="mt-5">My Assets</h3> 
+          </div>
+        }
+
+       {isQSWalletConnected && <div className="assets-interface row mx-0">
+          {showAssets && <div className="col-12 mx-auto mt-3">
+            <div className="mt-5 d-flex flex-column justify-content-center align-items-center">
+                <h3 className="text-center mt-2">Participation Rewards Claims</h3>
+                <p className="text-center coming-soon"> Coming soon</p>
+                <div className="col-7 mt-2">
+                  <p>Participation Rewards are QCK token emissions that will reward Protocol users for delegating to decentralized, performant validators that are active in governance.</p>
+                  <p>These rewards will be distributed on an epochly basis (every 3 days).</p>
+                  <button className="d-block mx-auto m-5" onClick={onClaimsClick}> Claim</button>
+                </div>
+
+                <h3 className="text-center mt-2">My Assets</h3> 
   {/* {sum === 0 && <h5 className="mt-4">Calculating...</h5>} */}
   {hasErrors && <p> There's an issue with fetching the network list. Please try again.</p>}
    {/* {sum !==0 && <h5 className="mt-4"><span className="amount">$ {sum.toFixed(4)} </span>in {balances.length} assets across Quicksilver chain</h5>} */}
-  {balances.length > 0 && <div className="mt-3 validators row w-100 justify-content-start">
-  {balances.map((bal: Coin, i: number) =>
-
-            <div className="asset-card col-3 m-3" key={i}>
-
-            <img className="d-block mx-auto" src={params[bal.denom]}/>
-              <div className="d-flex mt-2 align-items-baseline justify-content-center">
+  {balances.length > 0 && 
+    <div className="mt-3 validators row  justify-content-start">
+      {balances.map((bal: Coin, i: number) =>
+
+                <div className="asset-card col-4 m-3" key={i}>
+
+                <img className="d-block mx-auto" src={params[bal.denom]}/>
+                  <div className="d-flex mt-2 align-items-baseline justify-content-center">
+
+                    <h4 className="font-bold"> {(+(bal.amount)/1000000).toFixed(2)}</h4>
+                    {bal.denom !== 'uqck' && <h6 className="text-center mx-2"> {bal.denom[1] + bal.denom.slice(2).toUpperCase()}</h6>}
+                    {bal.denom === 'uqck' && <h6 className="text-center mx-2"> QCK</h6>}
+                    </div>
+
+                </div>        
 
-                <h4 className="font-bold"> {(+(bal.amount)/1000000).toFixed(2)}</h4>
-                {bal.denom !== 'uqck' && <h6 className="text-center mx-2"> {bal.denom[1] + bal.denom.slice(2).toUpperCase()}</h6>}
-                {bal.denom === 'uqck' && <h6 className="text-center mx-2"> QCK</h6>}
-                </div>
 
-            </div>
-
-
-
-
-)}
-
-</div>}
-{balances.length === 0 && <div className="row w-100 justify-content-start">
-  <h5 className="mt-5"> You currently do not have any assets on the Quicksilver chain.</h5>
-</div>}
+    )}
+    </div>
+  }
 
-</div>  }
-{!showAssets && <div className="col-12 max-auto mt-5">
-  <div className="mt-5 d-flex justify-content-center align-items-center">
-    <h4 className="text-center"> Coming Soon!</h4>
+  {balances.length === 0 && 
+    <div className="row w-100 justify-content-start">
+      <h5 className="mt-5"> You currently do not have any assets on the Quicksilver chain.</h5>
     </div>
-  </div>}
+  }
+
+</div>
+</div> 
+}
 
+{!showAssets && 
+  <div className="col-12 max-auto mt-5">
+    <div className="mt-5 d-flex justify-content-center align-items-center">
+      <h4 className="text-center"> Coming Soon!</h4>
       </div>
+  </div>
+}
+
       </div>}
     </>
 

diff --git a/src/components/governance-interface/Governance.tsx b/src/components/governance-interface/Governance.tsx
@@ -9,11 +9,11 @@ export default function Governance() {
           <div className="assets-interface row mx-0">
 
 
-      {!showAirdrops && <div className="col-12 max-auto mt-5">
+      {!showAirdrops && <div className="col-12 mx-auto mt-3">
       <div className="mt-5 d-flex flex-column justify-content-center align-items-center">
-      <h3 className="text-center mt-5">Governance by Proxy</h3>
+      <h3 className="text-center mt-2">Governance by Proxy</h3>
       <p className="text-center coming-soon"> Coming soon</p>
-      <div className="w-50 mt-2">
+      <div className="col-7 mt-2">
         <p>
         Governance by Proxy will allow users to retain their voting rights when liquid staking their assets, and continue participating in network governance while staking assets through the Protocol.
         <br/>

diff --git a/src/components/landing-screen/Landing.css b/src/components/landing-screen/Landing.css
@@ -14,7 +14,7 @@
 
 .landing-page .landing-page-content a {
     background: #D35100;
-border-radius: 20px;
+border-radius: 5px;
 font-family: 'Mulish';
 font-style: normal;
 font-weight: 600;

diff --git a/src/components/navbar/Navbar.css b/src/components/navbar/Navbar.css
@@ -4,7 +4,7 @@
 }
 
 .navbar {
-    background: #1A1A1A;
+    background: #282828;
     position: fixed !important;
     width:100vw !important;
     z-index: 4;
@@ -21,7 +21,7 @@ color: #FFFFFF;
 
 .navbar .connect-wallet, .navbar .connect-wallet-button {
 background: #D35100;
-border-radius: 10px;
+border-radius: 5px;
 font-family: 'Mulish';
 font-style: normal;
 font-weight: 600;
@@ -44,11 +44,6 @@ color: #FFFFFF;
    font-weight: 700 !important;
 }
 
-.navbar .navbar-logo {
-    background: #333333;
-}
-
-
 .navbar .nav-icon-stake {
     height: 30px;
     margin-right:1px;

diff --git a/src/components/staking-interface/delegate/ChooseAllocations.css b/src/components/staking-interface/delegate/ChooseAllocations.css
@@ -6,7 +6,7 @@
 .allocation-pane .staking-pane {
     z-index: 3;
     align-items: center;
-    border-radius: 30px;
+    border-radius: 5px;
     width: 60%;
     padding: 20px;
     background: #282828;

diff --git a/src/components/staking-interface/delegate/CongratulationsPane.css b/src/components/staking-interface/delegate/CongratulationsPane.css
@@ -1,6 +1,6 @@
 .congratulations-pane .stake, .congratulations-pane .use-qassets {
     background: #D35100;
-border-radius: 10px;
+border-radius: 5px;
 font-size: 18px;
 line-height: 30px;
 font-weight: 400;

diff --git a/src/components/staking-interface/delegate/ConnectWallet.css b/src/components/staking-interface/delegate/ConnectWallet.css
@@ -12,7 +12,7 @@
     width: 415px;
     height: 60px;
     background: #D35100;
-    border-radius: 20px;
+    border-radius: 5px;
     font-style: normal;
 font-weight: 400;
 font-size: 28px;

diff --git a/src/components/staking-interface/delegate/NetworkSelection.css b/src/components/staking-interface/delegate/NetworkSelection.css
@@ -1,6 +1,6 @@
 .wallet-details {
     align-items: center;
-    border-radius: 30px;
+    border-radius: 5px;
     width: 60%;
     padding: 20px;
     background: #282828;
@@ -24,7 +24,7 @@
 
 .prev-button {
     background: hwb(0 100% 0%);
-border-radius: 10px;
+border-radius: 5px;
 font-weight: 400;
 font-size: 18px;
 color: #D35100;
@@ -37,7 +37,7 @@ padding: 5px 20px;
 
 .stake-liquid-atoms-button, .stake-existing-delegations-button, .next-button {
 background: #D35100;
-border-radius: 10px;
+border-radius: 5px;
 font-size: 18px;
 line-height: 30px;
 font-weight: 400;
@@ -72,7 +72,7 @@ border: 2px solid #D35100;
 
   .copy-button {
     background: white;
-    border-radius: 10px;
+    border-radius: 5px;
     font-size: 18px;
     font-weight: 400;
     color: #D35100;

diff --git a/src/components/staking-interface/delegate/NetworkSelection.tsx b/src/components/staking-interface/delegate/NetworkSelection.tsx
@@ -35,7 +35,7 @@ export default function NetworkSelection() {
   }
 
   useEffect(() => {
-    if(balances.length > 0) {
+    if(balances && balances.length > 0) {
          let balance = balances.find((bal: any) => bal.denom === selectedNetwork.local_denom);
          if(balance) {
           console.log(balance)
@@ -57,7 +57,7 @@ useEffect(() => {
 
 useEffect(() => {
 
-  if(networkBalances.length > 0) {
+  if(networkBalances && networkBalances.length > 0) {
     let balance = networkBalances.find((bal: any) => bal.denom === selectedNetwork.base_denom);
     if(balance) {
      setZoneBalance((balance.amount)/1000000);