rough dev mode

quicksilver-zone · Dec 28, 2023 · ff4b545 · ff4b545
1 parent f2dd4df
commit ff4b545
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 24 deletions.
diff --git a/web-ui/.env.development b/web-ui/.env.development
@@ -1,7 +1,7 @@
 NEXT_PUBLIC_CHAIN_ENV="testnet"
 NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_QUICKSILVER="https://lcd.test.quicksilver.zone/"
 NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_QUICKSILVER="https://rpc.test.quicksilver.zone/"
-NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_COSMOSHUB=https://lcd.cosmoshub-4.quicksilver.zone
+NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_COSMOSHUB=https://lcd.provider.test.quicksilver.zone
 NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_COSMOSHUB=https://rpc.provider.test.quicksilver.zone
 NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_OSMOSIS="https://lcd.osmo-test-5.test.quicksilver.zone/"
 NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_OSMOSIS="https://rpc.osmo-test-5.test.quicksilver.zone/"
@@ -21,4 +21,9 @@ REACT_APP_ENABLE_CLAIMS="true"
 APY_ZONES_ENDPOINT = "https://chains.cosmos.directory"
 NEXT_PUBLIC_OSMOSIS_API="https://api.osmosis.zone"
 NEXT_PUBLIC_WHITELISTED_DENOM="uatom,ustars,uosmo,usomm,uregen"
-NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3"
+NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3"
+NEXT_PUBLIC_COSMOSHUB_CHAIN_ID=provider
+NEXT_PUBLIC_OSMOSIS_CHAIN_ID=osmo-test-5
+NEXT_PUBLIC_STARGAZE_CHAIN_ID=elgafar-1
+NEXT_PUBLIC_REGEN_CHAIN_ID=regen-redwood-1
+NEXT_PUBLIC_SOMMELIER_CHAIN_ID=sommelier-3
diff --git a/web-ui/.env.production b/web-ui/.env.production
@@ -21,4 +21,9 @@ REACT_APP_ENABLE_CLAIMS="true"
 APY_ZONES_ENDPOINT = "https://chains.cosmos.directory"
 NEXT_PUBLIC_OSMOSIS_API="https://api.osmosis.zone"
 NEXT_PUBLIC_WHITELISTED_DENOM="uatom,ustars,uosmo,usomm,uregen"
-NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3"
+NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3"
+NEXT_PUBLIC_COSMOSHUB_CHAIN_ID=cosmoshub-4
+NEXT_PUBLIC_OSMOSIS_CHAIN_ID=osmosis-1
+NEXT_PUBLIC_STARGAZE_CHAIN_ID=stargaze-1
+NEXT_PUBLIC_REGEN_CHAIN_ID=regen-1
+NEXT_PUBLIC_SOMMELIER_CHAIN_ID=sommelier-3
diff --git a/web-ui/components/Staking/modals/validatorSelectionModal.tsx b/web-ui/components/Staking/modals/validatorSelectionModal.tsx
@@ -52,7 +52,6 @@ export const MultiModal: React.FC<MultiModalProps> = ({
   const { validatorsData, isLoading, isError } = useValidatorsQuery(selectedChainName);
 
   const { missedBlocksData } = useMissedBlocks(selectedChainName);
-  console.log(missedBlocksData);
   const { data: logos, isLoading: isFetchingLogos } = useValidatorLogos(selectedChainName, validatorsData || []);
 
   const validators = validatorsData;

diff --git a/web-ui/components/Staking/networkSelectButton.tsx b/web-ui/components/Staking/networkSelectButton.tsx
@@ -5,7 +5,9 @@ import { Menu, MenuButton, MenuList, MenuItem, Button, Flex, Image, Text, useDis
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { BsArrowDown } from 'react-icons/bs';
 
-import { networks } from '@/state/chains/prod';
+import { networks as prodNetworks, testNetworks as devNetworks } from '@/state/chains/prod';
+
+const networks = process.env.NEXT_PUBLIC_CHAIN_ENV === 'mainnet' ? prodNetworks : devNetworks;
 
 interface CustomMenuProps {
   buttonTextColor?: string;

diff --git a/web-ui/pages/assets.tsx b/web-ui/pages/assets.tsx
@@ -34,8 +34,7 @@ type APYRates = {
 };
 
 function Home() {
-  const { address: qAddress, isWalletConnected } = useChain('quicksilver');
-  const { address } = useChain('quicksilver');
+  const { address, isWalletConnected } = useChain('quicksilver');
   // Function to fetch token price from an API
   const fetchTokenPrice = async (token: any) => {
     try {
@@ -47,25 +46,31 @@ function Home() {
     }
   };
 
+  const COSMOSHUB_CHAIN_ID = process.env.NEXT_PUBLIC_COSMOSHUB_CHAIN_ID;
+  const OSMOSIS_CHAIN_ID = process.env.NEXT_PUBLIC_OSMOSIS_CHAIN_ID;
+  const STARGAZE_CHAIN_ID = process.env.NEXT_PUBLIC_STARGAZE_CHAIN_ID;
+  const REGEN_CHAIN_ID = process.env.NEXT_PUBLIC_REGEN_CHAIN_ID;
+  const SOMMELIER_CHAIN_ID = process.env.NEXT_PUBLIC_SOMMELIER_CHAIN_ID;
+
   // Retrieve balance for each token
-  const { balance: qAtom, isLoading: qAtomIsLoading, isError: qAtomIsError } = useQBalanceQuery('quicksilver', qAddress ?? '', 'atom');
-  const { balance: qOsmo, isLoading: qOsmoIsLoading, isError: qOsmoIsError } = useQBalanceQuery('quicksilver', qAddress ?? '', 'osmo');
-  const { balance: qStars, isLoading: qStarsIsLoading, isError: qStarsIsError } = useQBalanceQuery('quicksilver', qAddress ?? '', 'stars');
-  const { balance: qRegen, isLoading: qRegenIsLoading, isError: qRegenIsError } = useQBalanceQuery('quicksilver', qAddress ?? '', 'regen');
-  const { balance: qSomm, isLoading: qSommIsLoading, isError: qSommIsError } = useQBalanceQuery('quicksilver', qAddress ?? '', 'somm');
+  const { balance: qAtom, isLoading: qAtomIsLoading, isError: qAtomIsError } = useQBalanceQuery('quicksilver', address ?? '', 'atom');
+  const { balance: qOsmo, isLoading: qOsmoIsLoading, isError: qOsmoIsError } = useQBalanceQuery('quicksilver', address ?? '', 'osmo');
+  const { balance: qStars, isLoading: qStarsIsLoading, isError: qStarsIsError } = useQBalanceQuery('quicksilver', address ?? '', 'stars');
+  const { balance: qRegen, isLoading: qRegenIsLoading, isError: qRegenIsError } = useQBalanceQuery('quicksilver', address ?? '', 'regen');
+  const { balance: qSomm, isLoading: qSommIsLoading, isError: qSommIsError } = useQBalanceQuery('quicksilver', address ?? '', 'somm');
 
   // Retrieve zone data for each token
-  const { data: CosmosZone, isLoading: isCosmosZoneLoading, isError: isCosmosZoneError } = useZoneQuery('cosmoshub-4');
-  const { data: OsmoZone, isLoading: isOsmoZoneLoading, isError: isOsmoZoneError } = useZoneQuery('osmosis-1');
-  const { data: StarZone, isLoading: isStarZoneLoading, isError: isStarZoneError } = useZoneQuery('stargaze-1');
-  const { data: RegenZone, isLoading: isRegenZoneLoading, isError: isRegenZoneError } = useZoneQuery('regen-1');
-  const { data: SommZone, isLoading: isSommZoneLoading, isError: isSommZoneError } = useZoneQuery('sommelier-3');
+  const { data: CosmosZone, isLoading: isCosmosZoneLoading, isError: isCosmosZoneError } = useZoneQuery(COSMOSHUB_CHAIN_ID ?? '');
+  const { data: OsmoZone, isLoading: isOsmoZoneLoading, isError: isOsmoZoneError } = useZoneQuery(OSMOSIS_CHAIN_ID ?? '');
+  const { data: StarZone, isLoading: isStarZoneLoading, isError: isStarZoneError } = useZoneQuery(STARGAZE_CHAIN_ID ?? '');
+  const { data: RegenZone, isLoading: isRegenZoneLoading, isError: isRegenZoneError } = useZoneQuery(REGEN_CHAIN_ID ?? '');
+  const { data: SommZone, isLoading: isSommZoneLoading, isError: isSommZoneError } = useZoneQuery(SOMMELIER_CHAIN_ID ?? '');
   // Retrieve APY data for each token
-  const { APY: cosmosAPY, isLoading: isCosmosAPYLoading, isError: isCosmosAPYError } = useAPYQuery('cosmoshub-4');
-  const { APY: osmoAPY, isLoading: isOsmoAPYLoading, isError: isOsmoAPYError } = useAPYQuery('osmosis-1');
-  const { APY: starsAPY, isLoading: isStarsAPYLoading, isError: isStarsAPYError } = useAPYQuery('stargaze-1');
-  const { APY: regenAPY, isLoading: isRegenAPYLoading, isError: isRegenAPYError } = useAPYQuery('regen-1');
-  const { APY: sommAPY, isLoading: isSommAPYLoading, isError: isSommAPYError } = useAPYQuery('sommelier-3');
+  const { APY: cosmosAPY, isLoading: isCosmosAPYLoading, isError: isCosmosAPYError } = useAPYQuery(COSMOSHUB_CHAIN_ID);
+  const { APY: osmoAPY, isLoading: isOsmoAPYLoading, isError: isOsmoAPYError } = useAPYQuery(OSMOSIS_CHAIN_ID);
+  const { APY: starsAPY, isLoading: isStarsAPYLoading, isError: isStarsAPYError } = useAPYQuery(STARGAZE_CHAIN_ID);
+  const { APY: regenAPY, isLoading: isRegenAPYLoading, isError: isRegenAPYError } = useAPYQuery(REGEN_CHAIN_ID);
+  const { APY: sommAPY, isLoading: isSommAPYLoading, isError: isSommAPYError } = useAPYQuery(SOMMELIER_CHAIN_ID);
 
   // useMemo hook to cache APY data
   const qAPYRates: APYRates = useMemo(
@@ -255,7 +260,7 @@ function Home() {
           <Spacer />
           {/* Unbonding Table */}
           <Box mt="20px">
-            <UnbondingAssetsTable isWalletConnected={isWalletConnected} address={qAddress ?? ''} chainName="cosmoshub" />
+            <UnbondingAssetsTable isWalletConnected={isWalletConnected} address={address ?? ''} chainName="cosmoshub" />
           </Box>
           <Box h="40px"></Box>
         </Container>

diff --git a/web-ui/pages/staking.tsx b/web-ui/pages/staking.tsx
@@ -24,7 +24,7 @@ import { StakingBox } from '@/components';
 import { InfoBox } from '@/components';
 import { AssetsAccordian } from '@/components';
 import { useAPYQuery } from '@/hooks/useQueries';
-import { networks } from '@/state/chains/prod';
+import { networks as prodNetworks, testNetworks as devNetworks } from '@/state/chains/prod';
 import { useChain } from '@cosmos-kit/react';
 
 const DynamicStakingBox = dynamic(() => Promise.resolve(StakingBox), {
@@ -39,6 +39,8 @@ const DynamicAssetBox = dynamic(() => Promise.resolve(AssetsAccordian), {
   ssr: false,
 });
 
+const networks = process.env.NEXT_PUBLIC_CHAIN_ENV === 'mainnet' ? prodNetworks : devNetworks;
+
 export default function Staking() {
   const [selectedNetwork, setSelectedNetwork] = useState(networks[0]);
   const [isModalOpen, setModalOpen] = useState(false);

diff --git a/web-ui/state/chains/prod.ts b/web-ui/state/chains/prod.ts
@@ -41,6 +41,50 @@ export const networks = [
     },
   ];
 
+  export const testNetworks = [
+    {
+      value: 'ATOM',
+      logo: '/quicksilver/img/networks/atom.svg',
+      qlogo: '/quicksilver/img/networks/qatom.svg',
+      name: 'Cosmos Hub',
+      chainName: 'cosmoshub',
+      chainId: 'provider',
+    },
+    {
+      value: 'OSMO',
+      logo: '/quicksilver/img/networks/osmosis.svg',
+      qlogo: '/quicksilver/img/networks/qosmo.svg',
+      name: 'Osmosis',
+      chainName: 'osmosis',
+      chainId: 'osmo-test-5',
+    },
+    {
+      value: 'STARS',
+      logo: '/quicksilver/img/networks/stargaze.svg',
+      qlogo: '/quicksilver/img/networks/qstars.svg',
+      name: 'Stargaze',
+      chainName: 'stargaze',
+      chainId: 'elgafar-1',
+    },
+    {
+      value: 'REGEN',
+      logo: '/quicksilver/img/networks/regen.svg',
+      qlogo: '/quicksilver/img/networks/regen.svg',
+      name: 'Regen',
+      chainName: 'regen',
+      chainId: 'regen-redwood-1',
+    },
+    {
+      value: 'SOMM',
+      logo: '/quicksilver/img/networks/sommelier.png',
+      qlogo: '/quicksilver/img/networks/sommelier.png',
+      name: 'Sommelier',
+      chainName: 'sommelier',
+      chainId: 'sommelier-3',
+    },
+  ];
+
+
 export const ProdQuickSilverChainInfo = {
     chainId: "quicksilver-2",
     chainName: "Quicksilver Protocol",