Update readme

.github/workflows/check.yml

@@ -3,10 +3,17 @@ on:
   push:
     branches:
       - "main"
+  pull_request:
+    branches:
+      - main
 
 jobs:
   Lint:
     runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_IS_DEPLOYMENT: true
+      NEXT_PUBLIC_NETWORK_TYPE: "testnet"
+
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

README.md

@@ -12,6 +12,7 @@ with Node.js v20. Once you have it installed, you can run:
 npm install
 
 npm run dev
+
 ```
 
 It integrates the `@burnt-labs/abstraxion` library from

src/app/layout.tsx

@@ -7,17 +7,18 @@ import { Analytics } from "@vercel/analytics/react";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
-import { dashboardUrl, faucetContractAddress, rpcEndpoint } from "@/constants";
+import { FAUCET_CONTRACT_ADDRESS } from "@/config";
+import { REST_URL, RPC_URL } from "@/constants";
 import BaseWrapper from "@/features/core/components/base-wrapper";
 import { CoreProvider } from "@/features/core/context/provider";
 import { StakingProvider } from "@/features/staking/context/provider";
 
 import "./globals.css";
 
 const abstraxionConfig = {
-  contracts: [faucetContractAddress],
-  dashboardUrl,
-  rpcUrl: rpcEndpoint,
+  contracts: [FAUCET_CONTRACT_ADDRESS],
+  restUrl: REST_URL,
+  rpcUrl: RPC_URL,
   stake: true,
 };
 

src/config.ts

@@ -0,0 +1,35 @@
+function getEnvStringOrThrow(key: string, value?: string): string {
+  if (!value) {
+    throw new Error(`Environment variable ${key} must be defined`);
+  }
+
+  return value;
+}
+
+// Write helper function to get boolean environment variable
+function getEnvBooleanOrThrow(key: string, value?: string): boolean {
+  if (!value) {
+    throw new Error(`Environment variable ${key} must be defined`);
+  }
+
+  return value === "true";
+}
+
+// The base path for the deployment
+export const BASE_PATH = getEnvBooleanOrThrow(
+  "NEXT_PUBLIC_IS_DEPLOYMENT",
+  process.env.NEXT_PUBLIC_IS_DEPLOYMENT,
+)
+  ? "/xion-staking"
+  : "";
+
+// The contract address for the faucet
+export const FAUCET_CONTRACT_ADDRESS =
+  "xion1mczdpmlc2lcng2ktly3fapdc24zqhxsyn5eek8uu3egmrd97c73qqtss3u";
+
+const NETWORK_TYPE = getEnvStringOrThrow(
+  "NEXT_PUBLIC_NETWORK_TYPE",
+  process.env.NEXT_PUBLIC_NETWORK_TYPE,
+);
+
+export const IS_TESTNET = NETWORK_TYPE === "testnet";

src/constants.ts

@@ -1,30 +1,21 @@
-export const isTestnet = true;
+import { IS_TESTNET } from "./config";
 
-// // For local testing
-// export const dashboardUrl =
-//   process.env.NODE_ENV === "production" ? undefined : "http://localhost:3000";
+const MAINNET_RPC_URL = "https://rpc.xion-mainnet-1.burnt.com:443";
+const MAINNET_REST_URL = "https://api.xion-mainnet-1.burnt.com:443";
+const TESTNET_RPC_URL = "https://testnet-rpc.xion-api.com:443";
+const TESTNET_REST_URL = "https://testnet-api.xion-api.com:443";
 
-export const dashboardUrl = undefined;
+export const RPC_URL = IS_TESTNET ? TESTNET_RPC_URL : MAINNET_RPC_URL;
+export const REST_URL = IS_TESTNET ? TESTNET_REST_URL : MAINNET_REST_URL;
 
-export const rpcEndpoint = "https://rpc.xion-testnet-1.burnt.com:443";
-// export const rpcEndpoint = "https://rpc.xion-testnet.forbole.com";
-
-// This only exists on testnet.
-export const faucetContractAddress =
-  "xion132dxh4k3dpyalq6tfq7006h8kpk3m30f4mwc5dgqefy6akudm50s96mn6q";
-
-export const basePath =
-  process.env.NEXT_PUBLIC_IS_DEPLOYMENT === "true" ? "/xion-staking" : "";
-
-export const xionToUSD = 10;
+export const XION_TO_USD = 10;
 
 // // Even if this can be retrieved from the params, hardcode it to avoid an
 // // extra request. It can be retrieved with this:
 // const params = await queryClient.staking.params();
-export const unbondingDays = isTestnet ? 3 : 21;
+export const UNBONDING_DAYS = IS_TESTNET ? 3 : 21;
 
 // Arbitrary value to avoid using a bigger fee than the actual reward
-export const minClaimableXion = 0.00001;
-
-export const minDisplayedXionDecs = 6;
-export const minDisplayedXion = 10 ** -minDisplayedXionDecs;
+export const MIN_CLAIMABLE_XION = 0.00001;
+export const MIN_DISPLAYED_XION_DECIMALS = 6;
+export const MIN_DISPLAYED_XION = 10 ** -MIN_DISPLAYED_XION_DECIMALS;

src/features/core/components/base-wrapper.tsx

@@ -3,7 +3,7 @@
 import { Abstraxion, useModal } from "@burnt-labs/abstraxion";
 import Link from "next/link";
 
-import { basePath, isTestnet } from "@/constants";
+import { BASE_PATH, IS_TESTNET } from "@/config";
 
 import NavAccount from "./nav-account";
 
@@ -23,17 +23,17 @@ export default function RootLayout({
         <div className="page-container m-auto flex h-[80px] flex-row items-center justify-between px-[16px]">
           <div className="flex flex-row items-center">
             <Link className="cursor-pointer" href="/">
-              <img alt="Xion Logo" src={`${basePath}/xion-logo.svg`} />
+              <img alt="Xion Logo" src={`${BASE_PATH}/xion-logo.svg`} />
             </Link>
             <span
               className={[
                 "ml-[8px] translate-y-[4px] rounded-[4px] p-[4px] text-[12px] uppercase",
-                isTestnet
+                IS_TESTNET
                   ? "bg-chain-testnetBg text-chain-testnetFg"
                   : "bg-chain-mainnetBg text-chain-mainnetFg",
               ].join(" ")}
             >
-              {isTestnet ? "Testnet" : "Mainnet"}
+              {IS_TESTNET ? "Testnet" : "Mainnet"}
             </span>
           </div>
           <NavAccount />

src/features/core/components/base.tsx

@@ -296,7 +296,6 @@ export const FloatingDropdown = ({
             offset={offset}
             open={isOpen}
             placement={placement}
-            withTransition
           >
             {children}
           </BasePopup>

src/features/core/components/nav-account.tsx

@@ -28,6 +28,7 @@ const NavAccount = () => {
         <FloatingDropdown
           Trigger={Account}
           id="nav-account"
+          offset={10}
           placement="bottom-end"
         >
           <div className="flex flex-col gap-[32px] rounded-[16px] bg-bg-600 p-[24px]">

src/features/staking/components/faucet.tsx

@@ -1,7 +1,7 @@
 import { useAbstraxionAccount } from "@burnt-labs/abstraxion";
 import { memo, useCallback, useEffect, useState } from "react";
 
-import { isTestnet } from "@/constants";
+import { IS_TESTNET } from "@/config";
 import { Button } from "@/features/core/components/base";
 import { fetchUserDataAction } from "@/features/staking/context/actions";
 import { normaliseCoin } from "@/features/staking/lib/core/coins";
@@ -30,7 +30,7 @@ const Faucet = () => {
       const result = await getAddressLastFaucetTimestamp(address, client);
 
       // We need to hide this when not on testnet.
-      if (staking.state.tokens?.denom !== result.denom || !isTestnet) {
+      if (staking.state.tokens?.denom !== result.denom || !IS_TESTNET) {
         return;
       }
 

src/features/staking/components/main-page.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useState } from "react";
 
+import { IS_TESTNET } from "@/config";
 import { Title } from "@/features/core/components/base";
 
 import { useStaking } from "../context/hooks";
@@ -35,7 +36,7 @@ function StakingPage() {
             />
           )}
         </div>
-        <Faucet />
+        {IS_TESTNET && <Faucet />}
         <StakingOverview />
         {isShowingDetails && canShowDetail && <DelegationDetails />}
         <ValidatorsTable />

src/features/staking/components/modals/redelegate.tsx

@@ -6,7 +6,7 @@ import type { FormEventHandler } from "react";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 
-import { unbondingDays, xionToUSD } from "@/constants";
+import { UNBONDING_DAYS, XION_TO_USD } from "@/constants";
 import {
   Button,
   FormError,
@@ -150,7 +150,7 @@ const RedelegateModal = () => {
   const amountUSD = (() => {
     if (amountXIONParsed.isNaN()) return "";
 
-    return amountXIONParsed.times(xionToUSD);
+    return amountXIONParsed.times(XION_TO_USD);
   })();
 
   const delegatedTokens = getTotalDelegation(
@@ -251,7 +251,7 @@ const RedelegateModal = () => {
                     You are about to redelegate your token from{" "}
                     {validator.description.moniker} to
                     {dstValidator?.description.moniker}. Remember, you will not
-                    able to redelegate these token within {unbondingDays} days.
+                    able to redelegate these token within {UNBONDING_DAYS} days.
                   </ModalDescription>
                 </div>
                 {getUnstakingSummary()}

src/features/staking/components/modals/rewards.tsx

@@ -2,7 +2,7 @@ import BigNumber from "bignumber.js";
 import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-toastify";
 
-import { minClaimableXion } from "@/constants";
+import { MIN_CLAIMABLE_XION } from "@/constants";
 import { Button, HeroText } from "@/features/core/components/base";
 import CommonModal, {
   ModalDescription,
@@ -39,7 +39,7 @@ const claimRewardsLoop = async (
 
       const normalised = normaliseCoin(delegation.rewards);
 
-      if (new BigNumber(normalised.amount).lt(minClaimableXion)) {
+      if (new BigNumber(normalised.amount).lt(MIN_CLAIMABLE_XION)) {
         return;
       }