feat: add dynamic gas fee

package.json

@@ -16,34 +16,34 @@
     "@burnt-labs/abstraxion": "^1.0.0-alpha.35",
     "@burnt-labs/constants": "^0.1.0-alpha.6",
     "@burnt-labs/ui": "^0.1.0-alpha.6",
-    "@cosmjs/cosmwasm-stargate": "^0.31.0",
+    "@cosmjs/cosmwasm-stargate": "^0.31.3",
     "@cosmjs/proto-signing": "^0.32.2",
     "@cosmjs/stargate": "^0.32.2",
     "bignumber.js": "^9.1.2",
     "cosmjs-types": "^0.9.0",
     "next": "14.1.0",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin": "^1.6.1",
+    "@stylistic/eslint-plugin": "^1.6.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/node": "^20.11.21",
+    "@types/react": "^18.2.60",
+    "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "autoprefixer": "^10.0.1",
-    "eslint": "^8.56.0",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-perfectionist": "^2.5.0",
     "eslint-plugin-playwright": "^0.22.2",
     "eslint-plugin-tailwindcss": "^3.14.3",
-    "postcss": "^8",
+    "postcss": "^8.4.35",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
   }
 }

src/app/page.tsx

@@ -1,5 +1,12 @@
 import StakingPage from "@/features/staking/components/page";
 
 export default function Page() {
-  return <StakingPage />;
+  return (
+    <main className="m-auto flex min-h-screen max-w-xs flex-col items-center justify-center gap-4 p-4">
+      <h1 className="text-2xl font-bold tracking-tighter text-black dark:text-white">
+        XION Staking
+      </h1>
+      <StakingPage />
+    </main>
+  );
 }

src/features/staking/components/logged-in.tsx

@@ -6,14 +6,14 @@ import type { Validator } from "cosmjs-types/cosmos/staking/v1beta1/staking";
 import Link from "next/link";
 import { memo, useMemo, useState } from "react";
 
-import type { StakingState } from "../context";
 import {
   claimRewardsAction,
   setRedelegateAction,
   stakeValidatorAction,
   unstakeValidatorAction,
 } from "../context/actions";
 import { useStaking } from "../context/hooks";
+import type { StakingState } from "../context/state";
 import type { StakeAddresses } from "../lib/core/base";
 import { formatCoin } from "../lib/core/coins";
 import { chainId } from "../lib/core/constants";
@@ -196,11 +196,17 @@ function StakingPage() {
                   key={`${unbondingItem.completionTime}-${unbondingItem.completionTimeNanos}`}
                   style={{ border: "1px solid #fff" }}
                 >
-                  Unbonding tokens: {formatCoin(unbondingItem.balance)}{" "}
-                  (completed by:{" "}
-                  {new Date(unbondingItem.completionTime).toString()})
-                  Validator:{" "}
-                  {validator?.description.moniker || unbondingItem.validator}
+                  <div>
+                    Unbonding tokens: {formatCoin(unbondingItem.balance)}
+                  </div>
+                  <div>
+                    Completed by:{" "}
+                    {new Date(unbondingItem.completionTime).toString()}
+                  </div>
+                  <div>
+                    Validator:{" "}
+                    {validator?.description.moniker || unbondingItem.validator}
+                  </div>
                 </div>
               );
             })}

src/features/staking/components/page.tsx

@@ -7,22 +7,19 @@ import LoggedIn from "./logged-in";
 import LoggedOut from "./logged-out";
 
 export default function StakingPage() {
-  const { isLoggedIn } = useStaking();
+  const { isConnected } = useStaking();
   const [showAbstraction, setShowAbstraxion] = useModal();
 
   return (
-    <main className="m-auto flex min-h-screen max-w-xs flex-col items-center justify-center gap-4 p-4">
-      <h1 className="text-2xl font-bold tracking-tighter text-black dark:text-white">
-        XION Staking
-      </h1>
-      {isLoggedIn ? <LoggedIn /> : <LoggedOut />}
+    <>
+      {isConnected ? <LoggedIn /> : <LoggedOut />}
       {showAbstraction && (
         <Abstraxion
           onClose={() => {
             setShowAbstraxion(false);
           }}
         />
       )}
-    </main>
+    </>
   );
 }

src/features/staking/context/actions.ts

@@ -1,5 +1,4 @@
-import type { StakingContextType, Unbonding } from ".";
-import type { SigningClient, StakeAddresses } from "../lib/core/base";
+import type { StakeAddresses } from "../lib/core/base";
 import {
   claimRewards,
   getBalance,
@@ -11,13 +10,15 @@ import {
   stakeAmount,
   unstakeAmount,
 } from "../lib/core/base";
+import type { AbstraxionSigningClient } from "../lib/core/client";
 import { sumAllCoins } from "../lib/core/coins";
 import {
   addDelegations,
   addUnbondings,
   setTokens,
   setValidators,
 } from "./reducer";
+import type { StakingContextType, Unbonding } from "./state";
 
 export const fetchStakingDataAction = async (
   address: string,
@@ -108,7 +109,7 @@ export const fetchStakingDataAction = async (
 
 export const stakeValidatorAction = async (
   addresses: StakeAddresses,
-  client: SigningClient,
+  client: AbstraxionSigningClient,
   staking: StakingContextType,
 ) => {
   await stakeAmount(addresses, client, {
@@ -121,7 +122,7 @@ export const stakeValidatorAction = async (
 
 export const unstakeValidatorAction = async (
   addresses: StakeAddresses,
-  client: SigningClient,
+  client: AbstraxionSigningClient,
   staking: StakingContextType,
 ) => {
   const result = await unstakeAmount(addresses, client, {
@@ -137,7 +138,7 @@ export const unstakeValidatorAction = async (
 
 export const claimRewardsAction = async (
   addresses: StakeAddresses,
-  client: SigningClient,
+  client: AbstraxionSigningClient,
   staking: StakingContextType,
 ) => {
   const result = await claimRewards(addresses, client);
@@ -150,7 +151,7 @@ export const claimRewardsAction = async (
 
 export const setRedelegateAction = async (
   delegatorAddress: string,
-  client: SigningClient,
+  client: AbstraxionSigningClient,
   staking: StakingContextType,
 ) => {
   const result = await setRedelegate(delegatorAddress, client);

src/features/staking/context/hooks.ts

@@ -1,9 +1,9 @@
 import { useAbstraxionAccount } from "@burnt-labs/abstraxion";
 import { useContext, useEffect, useRef } from "react";
 
-import type { StakingContextType } from ".";
-import { StakingContext } from ".";
 import { fetchStakingDataAction } from "./actions";
+import { StakingContext } from "./state";
+import type { StakingContextType } from "./state";
 
 export const useStaking = () => {
   const stakingRef = useRef<StakingContextType>({} as StakingContextType);
@@ -14,24 +14,24 @@ export const useStaking = () => {
   stakingRef.current.state = staking.state;
   stakingRef.current.dispatch = staking.dispatch;
 
-  const { data: account } = useAbstraxionAccount();
+  const { data: account, isConnected } = useAbstraxionAccount();
 
   const address = account?.bech32Address;
 
   return {
     account,
     address,
-    isLoggedIn: !!account?.bech32Address,
+    isConnected,
     staking: stakingRef.current,
   };
 };
 
 export const useStakingSync = () => {
-  const { address, isLoggedIn, staking } = useStaking();
+  const { address, isConnected, staking } = useStaking();
 
   useEffect(() => {
-    if (isLoggedIn && address) {
+    if (isConnected && address) {
       fetchStakingDataAction(address, staking);
     }
-  }, [isLoggedIn, address, staking]);
+  }, [isConnected, address, staking]);
 };

src/features/staking/context/provider.tsx

@@ -3,9 +3,9 @@
 import type { PropsWithChildren } from "react";
 import { useEffect, useReducer } from "react";
 
-import { StakingContext, defaultState } from ".";
 import { useStakingSync } from "./hooks";
 import { reducer } from "./reducer";
+import { StakingContext, defaultState } from "./state";
 
 export const Wrapper = ({ children }: PropsWithChildren) => {
   useStakingSync();

src/features/staking/context/reducer.ts

@@ -1,4 +1,4 @@
-import type { StakingState } from ".";
+import type { StakingState } from "./state";
 
 export type StakingAction =
   | {