refactor: organise code

forbole · Mar 7, 2024 · 2bb43e1 · 2bb43e1
1 parent cd9aba7
commit 2bb43e1
Show file tree

Hide file tree

Showing 18 changed files with 79 additions and 73 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,13 +6,10 @@ import "@burnt-labs/ui/dist/index.css";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
+import { dashboardUrl, rpcEndpoint } 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 {
-  dashboardUrl,
-  rpcEndpoint,
-} from "@/features/staking/lib/core/constants";
 
 import "./globals.css";
 

diff --git a/src/features/staking/lib/core/constants.ts → src/constants.ts b/src/features/staking/lib/core/constants.ts → src/constants.ts
diff --git a/src/features/core/components/base-wrapper.tsx b/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 } from "@/features/staking/lib/core/constants";
+import { basePath } from "@/constants";
 
 import NavAccount from "./nav-account";
 

diff --git a/src/features/core/components/base.tsx b/src/features/core/components/base.tsx
@@ -5,10 +5,9 @@ import type { FC, PropsWithChildren, ReactNode } from "react";
 import { useState } from "react";
 import { toast } from "react-toastify";
 
-import { clipboard, loader, search } from "@/features/staking/lib/core/icons";
-
 import { useCore } from "../context/hooks";
 import { setPopupOpenId } from "../context/reducer";
+import { clipboard, loader, loader2, search } from "../lib/icons";
 
 type TypographyProps = PropsWithChildren & {
   className?: string;
@@ -310,3 +309,17 @@ export const TabButton = ({ active, ...props }: TabButtonProps) => (
     ].join(" ")}
   />
 );
+
+export const LoadingBanner = () => (
+  <div className="flex flex-col items-center justify-center gap-[28px]">
+    <div className="mt-[80px] text-typo-100 opacity-50">
+      Loading the data...{" "}
+    </div>
+    <div className="mb-[80px] flex w-[80px] items-center justify-center">
+      <span
+        className="animate-spin"
+        dangerouslySetInnerHTML={{ __html: loader2 }}
+      />
+    </div>
+  </div>
+);
diff --git a/src/features/core/components/common-modal.tsx b/src/features/core/components/common-modal.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 import { useEffect } from "react";
 import Modal from "react-modal";
 
-import { cross } from "@/features/staking/lib/core/icons";
+import { cross } from "../lib/icons";
 
 type Props = {
   children: React.ReactNode;

diff --git a/src/features/core/components/nav-account.tsx b/src/features/core/components/nav-account.tsx
@@ -7,9 +7,9 @@ import {
 } from "@burnt-labs/abstraxion";
 import { Button } from "@burnt-labs/ui";
 
-import { isTestnet } from "@/features/staking/lib/core/constants";
-import { wallet } from "@/features/staking/lib/core/icons";
+import { isTestnet } from "@/constants";
 
+import { wallet } from "../lib/icons";
 import { ButtonPill, FloatingDropdown } from "./base";
 
 const Account = () => (

diff --git a/src/features/core/components/table.tsx b/src/features/core/components/table.tsx
@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from "react";
 
-import { chevron } from "@/features/staking/lib/core/icons";
+import { chevron } from "../lib/icons";
 
 type Props<SortMethod> = PropsWithChildren & {
   onSort?: (method: SortMethod) => void;

diff --git a/src/features/staking/lib/core/icons.ts → src/features/core/lib/icons.ts b/src/features/staking/lib/core/icons.ts → src/features/core/lib/icons.ts
@@ -1,9 +1,45 @@
-export const chevron =
-  '<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.24264 4.24264L8.48528 0H0L4.24264 4.24264Z" fill="#F2F2F2"/></svg>';
+export const loader2 = [
+  '<svg width="70" height="68" viewBox="0 0 70 68" fill="none" xmlns="http://www.w3.org/2000/svg">',
+  '<path d="M26.1291 65.3291C12.9402 61.3769 3.3291 49.1465 3.3291 34.6713C3.3291 16.9982 17.656 2.67132 35.3291 2.67132C53.0022 2.67132 67.3291 16.9982 67.3291 34.6713C67.3291 48.4042 58.6784 60.1166 46.5291 64.6566" stroke="url(#paint0_angular_59_446)" stroke-width="5"/>',
+  "<defs>",
+  '<radialGradient id="paint0_angular_59_446" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(35.3291 33.8713) rotate(75.8157) scale(37.5446 36.7572)">',
+  '<stop stop-color="white"/>',
+  '<stop offset="1" stop-color="white" stop-opacity="0"/>',
+  "</radialGradient>",
+  "</defs>",
+  "</svg>",
+].join("");
+
+export const search = [
+  '<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">',
+  '<path d="M13.4351 10.0629H12.7124L12.4563 9.81589C13.3528 8.77301 13.8925 7.4191 13.8925 5.94625C13.8925 2.66209 11.2304 0 7.94625 0C4.66209 0 2 2.66209 2 5.94625C2 9.23042 4.66209 11.8925 7.94625 11.8925C9.4191 11.8925 10.773 11.3528 11.8159 10.4563L12.0629 10.7124V11.4351L16.6369 16L18 14.6369L13.4351 10.0629ZM7.94625 10.0629C5.66838 10.0629 3.82962 8.22413 3.82962 5.94625C3.82962 3.66838 5.66838 1.82962 7.94625 1.82962C10.2241 1.82962 12.0629 3.66838 12.0629 5.94625C12.0629 8.22413 10.2241 10.0629 7.94625 10.0629Z" fill="white"/>',
+  "</svg>",
+].join("");
+
+export const loader = [
+  '<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">',
+  '<path d="M2.5171 14.3401C2.6686 9.17917 6.16589 4.51075 11.4091 3.10583C17.8107 1.39053 24.3908 5.18952 26.1061 11.5911C27.8214 17.9927 24.0224 24.5727 17.6208 26.2881C12.6464 27.6209 7.56432 25.6242 4.74067 21.6641" stroke="url(#paint0_angular_196_4454)" stroke-width="3"/>',
+  "<defs>",
+  '<radialGradient id="paint0_angular_196_4454" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.8047 14.6193) rotate(150.816) scale(14.0792 13.784)">',
+  "<stop/>",
+  '<stop offset="1" stop-opacity="0"/>',
+  "</radialGradient>",
+  "</defs>",
+  "</svg>",
+].join("");
 
 export const clipboard =
   '<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4.71289" y="4.71094" width="9.16672" height="11.5371" stroke="white" stroke-width="1.5"/><path d="M1 12.2593V2C1 1.44772 1.44772 1 2 1H11.0741" stroke="white" stroke-width="1.5"/></svg>';
 
+export const chevron =
+  '<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.24264 4.24264L8.48528 0H0L4.24264 4.24264Z" fill="#F2F2F2"/></svg>';
+
+export const cross = [
+  '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">',
+  '<path fill-rule="evenodd" clip-rule="evenodd" d="M16.941 6L12 10.941L7.059 6L6 7.05975L10.941 12L6 16.941L7.059 18L12 13.059L16.941 18L18 16.941L13.059 12L18 7.05975L16.941 6Z" fill="#6C6A6A"/>',
+  "</svg>",
+].join("");
+
 export const wallet = [
   '<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">',
   '<rect x="0.5" y="0.5" width="17.2353" height="11.9412" rx="1.5" stroke="white"/>',
@@ -12,12 +48,6 @@ export const wallet = [
   "</svg>",
 ].join("");
 
-export const cross = [
-  '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">',
-  '<path fill-rule="evenodd" clip-rule="evenodd" d="M16.941 6L12 10.941L7.059 6L6 7.05975L10.941 12L6 16.941L7.059 18L12 13.059L16.941 18L18 16.941L13.059 12L18 7.05975L16.941 6Z" fill="#6C6A6A"/>',
-  "</svg>",
-].join("");
-
 export const pointer = [
   '<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">',
   '<path d="M1.00003 6.24271L5.24268 2.00007L9.48532 6.24271" stroke="#F2F2F2" stroke-width="1.5"/>',
@@ -32,33 +62,3 @@ export const menu = [
   '<circle cx="16" cy="22" r="2" fill="#6C6A6A"/>',
   "</svg>",
 ].join("");
-
-export const loader = [
-  '<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">',
-  '<path d="M2.5171 14.3401C2.6686 9.17917 6.16589 4.51075 11.4091 3.10583C17.8107 1.39053 24.3908 5.18952 26.1061 11.5911C27.8214 17.9927 24.0224 24.5727 17.6208 26.2881C12.6464 27.6209 7.56432 25.6242 4.74067 21.6641" stroke="url(#paint0_angular_196_4454)" stroke-width="3"/>',
-  "<defs>",
-  '<radialGradient id="paint0_angular_196_4454" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.8047 14.6193) rotate(150.816) scale(14.0792 13.784)">',
-  "<stop/>",
-  '<stop offset="1" stop-opacity="0"/>',
-  "</radialGradient>",
-  "</defs>",
-  "</svg>",
-].join("");
-
-export const loader2 = [
-  '<svg width="70" height="68" viewBox="0 0 70 68" fill="none" xmlns="http://www.w3.org/2000/svg">',
-  '<path d="M26.1291 65.3291C12.9402 61.3769 3.3291 49.1465 3.3291 34.6713C3.3291 16.9982 17.656 2.67132 35.3291 2.67132C53.0022 2.67132 67.3291 16.9982 67.3291 34.6713C67.3291 48.4042 58.6784 60.1166 46.5291 64.6566" stroke="url(#paint0_angular_59_446)" stroke-width="5"/>',
-  "<defs>",
-  '<radialGradient id="paint0_angular_59_446" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(35.3291 33.8713) rotate(75.8157) scale(37.5446 36.7572)">',
-  '<stop stop-color="white"/>',
-  '<stop offset="1" stop-color="white" stop-opacity="0"/>',
-  "</radialGradient>",
-  "</defs>",
-  "</svg>",
-].join("");
-
-export const search = [
-  '<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">',
-  '<path d="M13.4351 10.0629H12.7124L12.4563 9.81589C13.3528 8.77301 13.8925 7.4191 13.8925 5.94625C13.8925 2.66209 11.2304 0 7.94625 0C4.66209 0 2 2.66209 2 5.94625C2 9.23042 4.66209 11.8925 7.94625 11.8925C9.4191 11.8925 10.773 11.3528 11.8159 10.4563L12.0629 10.7124V11.4351L16.6369 16L18 14.6369L13.4351 10.0629ZM7.94625 10.0629C5.66838 10.0629 3.82962 8.22413 3.82962 5.94625C3.82962 3.66838 5.66838 1.82962 7.94625 1.82962C10.2241 1.82962 12.0629 3.66838 12.0629 5.94625C12.0629 8.22413 10.2241 10.0629 7.94625 10.0629Z" fill="white"/>',
-  "</svg>",
-].join("");
diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx
@@ -7,6 +7,7 @@ import {
   FloatingDropdown,
 } from "@/features/core/components/base";
 import { HeaderTitleBase } from "@/features/core/components/table";
+import { menu, pointer } from "@/features/core/lib/icons";
 import { sortUtil } from "@/features/core/utils";
 
 import { getAndSetValidatorAction } from "../context/actions";
@@ -20,7 +21,6 @@ import {
 import type { StakingContextType, StakingState } from "../context/state";
 import { useValidatorLogo } from "../hooks";
 import { coinIsPositive } from "../lib/core/coins";
-import { menu, pointer } from "../lib/core/icons";
 import {
   formatCoin,
   formatCommission,

diff --git a/src/features/staking/components/modals/staking.tsx b/src/features/staking/components/modals/staking.tsx
@@ -3,6 +3,7 @@ import type { FormEventHandler } from "react";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 
+import { xionToUSD } from "@/constants";
 import {
   Button,
   FormError,
@@ -21,7 +22,6 @@ import { useStaking } from "../../context/hooks";
 import { setModalOpened } from "../../context/reducer";
 import { getTokensAvailableBG } from "../../context/selectors";
 import { getXionCoin } from "../../lib/core/coins";
-import { xionToUSD } from "../../lib/core/constants";
 import type { StakeAddresses } from "../../lib/core/tx";
 import { formatToSmallDisplay } from "../../lib/formatters";
 

diff --git a/src/features/staking/components/modals/unstaking.tsx b/src/features/staking/components/modals/unstaking.tsx
@@ -3,6 +3,7 @@ import type { FormEventHandler } from "react";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 
+import { unbondingDays, xionToUSD } from "@/constants";
 import {
   Button,
   FormError,
@@ -21,7 +22,6 @@ import { useStaking } from "../../context/hooks";
 import { setModalOpened } from "../../context/reducer";
 import { getTotalDelegation } from "../../context/selectors";
 import { getXionCoin } from "../../lib/core/coins";
-import { unbondingDays, xionToUSD } from "../../lib/core/constants";
 import type { StakeAddresses } from "../../lib/core/tx";
 import { formatToSmallDisplay, formatXionToUSD } from "../../lib/formatters";
 

diff --git a/src/features/staking/components/staking-overview.tsx b/src/features/staking/components/staking-overview.tsx
@@ -1,6 +1,7 @@
 import { useAbstraxionAccount, useModal } from "@burnt-labs/abstraxion";
 import { memo } from "react";
 
+import { basePath } from "@/constants";
 import {
   BodyMedium,
   Button,
@@ -18,7 +19,6 @@ import {
   getTotalRewards,
 } from "../context/selectors";
 import { getEmptyXionCoin } from "../lib/core/coins";
-import { basePath } from "../lib/core/constants";
 import { getIsMinimumClaimable } from "../lib/core/tx";
 import { formatAPR, formatCoin, formatXionToUSD } from "../lib/formatters";
 import { DivisorVertical } from "./divisor";

diff --git a/src/features/staking/components/validator-page.tsx b/src/features/staking/components/validator-page.tsx
@@ -7,10 +7,12 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { basePath, defaultAvatar } from "@/constants";
 import {
   ClipboardCopy,
   Heading2,
   Heading8,
+  LoadingBanner,
   NavLink,
 } from "@/features/core/components/base";
 
@@ -24,7 +26,6 @@ import {
 } from "../context/selectors";
 import { useValidatorLogo } from "../hooks";
 import { getXionCoin, normaliseCoin } from "../lib/core/coins";
-import { basePath, defaultAvatar } from "../lib/core/constants";
 import {
   formatCommission,
   formatToSmallDisplay,
@@ -60,7 +61,11 @@ export default function ValidatorPage() {
   }, [address, stakingRef]);
 
   if (!validatorDetails) {
-    return <div>Loading the data...</div>;
+    return (
+      <div className="mb-[36px] w-full">
+        <LoadingBanner />
+      </div>
+    );
   }
 
   const votingPowerPerc = getVotingPowerPerc(

diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx
@@ -6,6 +6,7 @@ import { memo, useState } from "react";
 
 import {
   ButtonPill,
+  LoadingBanner,
   NavLink,
   SearchInput,
   TabButton,
@@ -23,7 +24,6 @@ import {
 import type { StakingContextType, StakingState } from "../context/state";
 import { useValidatorLogo } from "../hooks";
 import { getXionCoinFromUXion } from "../lib/core/coins";
-import { loader2 } from "../lib/core/icons";
 import {
   formatCoin,
   formatCommission,
@@ -293,19 +293,7 @@ const ValidatorsTable = () => {
             <div className="text-right">Voting Power</div>
           </HeaderTitle>
         </div>
-        {isInitialLoading && (
-          <div className="flex flex-col items-center justify-center gap-[28px]">
-            <div className="mt-[80px] text-typo-100 opacity-50">
-              Loading the data...{" "}
-            </div>
-            <div className="mb-[80px] flex w-[80px] items-center justify-center">
-              <span
-                className="animate-spin"
-                dangerouslySetInnerHTML={{ __html: loader2 }}
-              />
-            </div>
-          </div>
-        )}
+        {isInitialLoading && <LoadingBanner />}
         {sortedItems.map((validator) => (
           <ValidatorRow
             disabled={!isConnected}

diff --git a/src/features/staking/hooks.ts b/src/features/staking/hooks.ts
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
-import { defaultAvatar } from "./lib/core/constants";
+import { defaultAvatar } from "@/constants";
+
 import { keybaseClient } from "./lib/utils/keybase-client";
 
 export const useValidatorLogo = (identity?: string) => {

diff --git a/src/features/staking/lib/core/client.ts b/src/features/staking/lib/core/client.ts
@@ -18,7 +18,7 @@ import {
 } from "@cosmjs/stargate";
 import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
 
-import { rpcEndpoint } from "./constants";
+import { rpcEndpoint } from "@/constants";
 
 export type AbstraxionSigningClient = NonNullable<
   ReturnType<typeof useAbstraxionSigningClient>["client"]

diff --git a/src/features/staking/lib/core/tx.ts b/src/features/staking/lib/core/tx.ts
@@ -13,10 +13,11 @@ import {
   MsgUndelegate,
 } from "cosmjs-types/cosmos/staking/v1beta1/tx";
 
+import { minClaimableXion } from "@/constants";
+
 import type { Unbonding } from "../../context/state";
 import { type AbstraxionSigningClient } from "./client";
 import { getUXionCoinFromXion, normaliseCoin } from "./coins";
-import { minClaimableXion } from "./constants";
 import { getCosmosFee } from "./fee";
 
 const getTxCoin = (coin: Coin) => ({

diff --git a/src/features/staking/lib/formatters.ts b/src/features/staking/lib/formatters.ts
@@ -1,8 +1,9 @@
 import type { Coin } from "@cosmjs/stargate";
 import BigNumber from "bignumber.js";
 
+import { xionToUSD } from "@/constants";
+
 import { getEmptyXionCoin, normaliseCoin } from "./core/coins";
-import { xionToUSD } from "./core/constants";
 
 export const formatCoin = (coin: Coin, compact?: boolean) => {
   const resolved = normaliseCoin(coin);