feat: add stack in a pool page

Author: alter-eggo

apps/web/app/features/stacking/hooks/stacking.query.ts

@@ -0,0 +1,54 @@
+import { useQuery } from '@tanstack/react-query';
+import { useStackingClient } from '~/features/stacking/providers/stacking-client-provider';
+
+import {
+  createGetAllowanceContractCallersQueryOptions,
+  createGetCoreInfoQueryOptions,
+  createGetCycleDurationQueryOptions,
+  createGetPoxInfoQueryOptions,
+  createGetPoxOperationInfoQueryOptions,
+  createGetSecondsUntilNextCycleQueryOptions,
+  createGetStatusQueryOptions,
+} from '@leather.io/query';
+
+export function useGetAllowanceContractCallersQuery(
+  ...params: Parameters<typeof createGetAllowanceContractCallersQueryOptions>
+) {
+  return useQuery(createGetAllowanceContractCallersQueryOptions(...params));
+}
+
+export function useGetCycleDurationQuery() {
+  const { client } = useStackingClient();
+  if (!client) throw new Error('Expected client to be defined.');
+  return useQuery(createGetCycleDurationQueryOptions({ client }));
+}
+
+export function useGetStatusQuery() {
+  const { client } = useStackingClient();
+  if (!client) throw new Error('Expected client to be defined.');
+  return useQuery(createGetStatusQueryOptions({ client }));
+}
+
+export function useGetPoxOperationInfoQuery() {
+  const { client } = useStackingClient();
+  if (!client) throw new Error('Expected client to be defined.');
+  return useQuery(createGetPoxOperationInfoQueryOptions({ client }));
+}
+
+export function useGetCoreInfo() {
+  const { client } = useStackingClient();
+  if (!client) throw new Error('Expected client to be defined.');
+  return useQuery(createGetCoreInfoQueryOptions({ client }));
+}
+
+export function useGetSecondsUntilNextCycleQuery() {
+  const { client } = useStackingClient();
+  if (!client) throw new Error('Expected client to be defined.');
+  return useQuery(createGetSecondsUntilNextCycleQueryOptions({ client }));
+}
+
+export function useGetPoxInfoQuery() {
+  const { client } = useStackingClient();
+  if (!client) throw new Error('Expected client to be defined.');
+  return useQuery(createGetPoxInfoQueryOptions({ client }));
+}

apps/web/app/features/stacking/providers/stacking-client-provider.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, createContext, useContext, useMemo } from 'react';
+
+import { StackingClient } from '@stacks/stacking';
+import { validateStacksAddress as isValidStacksAddress } from '@stacks/transactions';
+import { useLeatherConnect } from '~/store/addresses';
+import { useStacksNetwork } from '~/store/stacks-network';
+
+interface StackingClientContext {
+  client: null | StackingClient;
+}
+const StackingClientContext = createContext<StackingClientContext>({
+  client: null,
+});
+
+interface Props {
+  children: ReactNode;
+}
+
+export function StackingClientProvider({ children }: Props) {
+  const { stxAddress } = useLeatherConnect();
+  const { network } = useStacksNetwork();
+
+  const client = useMemo<StackingClient | null>(() => {
+    if (stxAddress && isValidStacksAddress(stxAddress.address)) {
+      return new StackingClient({ address: stxAddress.address, network });
+    }
+
+    return null;
+  }, [stxAddress, network]);
+
+  return (
+    <StackingClientContext.Provider value={{ client }}>{children}</StackingClientContext.Provider>
+  );
+}
+
+export function useStackingClient() {
+  return useContext(StackingClientContext);
+}

apps/web/app/features/stacking/utils/types-preset-pools.ts

@@ -1,12 +1,16 @@
 export type NetworkInstance = 'mainnet' | 'testnet' | 'devnet';
 
-export type PoolName =
-  | 'FAST Pool'
-  | 'Xverse'
-  | 'PlanBetter'
-  | 'Restake'
-  | 'Stacking DAO'
-  | 'Custom Pool';
+export const PoolNameSlugMap = {
+  fastPool: 'FAST Pool',
+  xverse: 'Xverse',
+  planBetter: 'PlanBetter',
+  restake: 'Restake',
+  stackingDao: 'Stacking DAO',
+  custom: 'Custom Pool',
+} as const;
+
+export type PoolSlug = keyof typeof PoolNameSlugMap;
+export type PoolName = (typeof PoolNameSlugMap)[PoolSlug];
 
 export type PoxContractName =
   | 'WrapperOneCycle'

apps/web/app/helpers/utils.ts

@@ -1,7 +1,8 @@
+import { isBrowser } from '@leather.io/sdk';
 import { isDefined } from '@leather.io/utils';
 
 export function isLeatherInstalled() {
-  return isDefined(window.LeatherProvider);
+  return isBrowser() && isDefined(window.LeatherProvider);
 }
 
 export type ExtensionState = 'missing' | 'detected' | 'connected';

apps/web/app/pages/stacking/components/earn-provider-table.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, useMemo, useState } from 'react';
+import { Link } from 'react-router';
 
 import {
   type ColumnDef,
@@ -15,6 +16,7 @@ import { BitcoinIcon } from '~/components/icons/bitcoin-icon';
 import { StacksIcon } from '~/components/icons/stacks-icon';
 import { ImgFillLoader } from '~/components/img-loader';
 import { SortableHeader, Table, rowPadding, theadBorderBottom } from '~/components/table';
+import { PoolSlug } from '~/features/stacking/utils/types-preset-pools';
 
 import { Button, Flag } from '@leather.io/ui';
 
@@ -50,6 +52,7 @@ interface EarnProvider {
   estApr: string;
   payout: string;
   icon: ReactElement;
+  slug: PoolSlug;
 }
 const earnProviders: EarnProvider[] = [
   {
@@ -58,34 +61,39 @@ const earnProviders: EarnProvider[] = [
     minAmount: null,
     estApr: '5%',
     payout: 'STX',
+    slug: 'fastPool',
   },
   {
     provider: 'PlanBetter',
     icon: <ImgFillLoader src="icons/planbetter.webp" width="24" fill="black" />,
     minAmount: '200 STX',
     estApr: '10%',
     payout: 'STX',
+    slug: 'planBetter',
   },
   {
     provider: 'Restake',
     icon: <ImgFillLoader src="icons/restake.webp" width="24" fill="#124044" />,
     minAmount: '100 STX',
     estApr: '11%',
     payout: 'STX',
+    slug: 'restake',
   },
   {
     provider: 'Xverse Pool',
     icon: <ImgFillLoader src="icons/xverse.webp" width="24" fill="black" />,
     minAmount: '100 STX',
     estApr: '10%',
     payout: 'BTC',
+    slug: 'xverse',
   },
   {
     provider: 'Stacking DAO',
     icon: <ImgFillLoader src="icons/stacking-dao.webp" width="24" fill="#1C3830" />,
     minAmount: '100 STX',
     estApr: '16%',
     payout: 'STX',
+    slug: 'stackingDao',
   },
 ];
 
@@ -145,9 +153,14 @@ export function EarnProviderTable(props: HTMLStyledProps<'div'>) {
               {info.getValue() as string}
             </Flag>
 
-            <Button size="xs" ml="space.04" minW="fit-content">
-              Start earning
-            </Button>
+            <Link
+              to={`/stacking/stack-in-pool/${info.row.original.slug}`}
+              style={{ minWidth: 'fit-content' }}
+            >
+              <Button size="xs" ml="space.04" minW="fit-content">
+                Start earning
+              </Button>
+            </Link>
           </Flex>
         ),
         meta: { align: 'left' },

apps/web/app/root.tsx

@@ -1,4 +1,6 @@
 import { Buffer } from 'safe-buffer';
+// @ts-expect-error // import process using alias
+import process from 'safe-process';
 
 import leatherUiStyles from '@leather.io/ui/styles?url';
 
@@ -12,6 +14,12 @@ import stylesheet from './app.css?url';
 // @ts-expect-error // safe-buffer typings are too old
 globalThis.Buffer = Buffer;
 
+/**
+ * Polyfill global process
+ * (should be called before another code)
+ */
+globalThis.process = process;
+
 export function links() {
   return [
     { rel: 'stylesheet', href: stylesheet },

apps/web/app/routes.ts

@@ -1,8 +1,10 @@
-import { type RouteConfig, index, route } from '@react-router/dev/routes';
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
 
 export default [
   index('routes/home.tsx'),
-  route('stacking', 'routes/stacking.tsx'),
-  route('sbtc-rewards', 'routes/sbtc-rewards.tsx'),
+  ...prefix('stacking', [
+    index('routes/stacking/index.tsx'),
+    route('stack-in-pool/:slug', 'routes/stacking/stacking.tsx'),
+  ]),
   route('docs', 'routes/docs.tsx'),
 ] satisfies RouteConfig;

apps/web/app/routes/stacking.tsx renamed to apps/web/app/routes/stacking/index.tsx

@@ -2,7 +2,7 @@ import { Stacking } from '~/pages/stacking/stacking';
 
 import { delay } from '@leather.io/utils';
 
-import type { Route } from './+types/stacking';
+import type { Route } from '../+types/home';
 
 export async function loader() {
   await delay(400);
@@ -17,6 +17,6 @@ export function meta({}: Route.MetaArgs) {
   ];
 }
 
-export default function StackingRoute() {
+export default function HomeRoute() {
   return <Stacking />;
 }

apps/web/app/routes/stacking/stacking.tsx

@@ -0,0 +1,29 @@
+import { StackingClientProvider } from '~/features/stacking/providers/stacking-client-provider';
+import { PoolNameSlugMap, PoolSlug } from '~/features/stacking/utils/types-preset-pools';
+
+import { delay } from '@leather.io/utils';
+
+import type { Route } from './+types/stacking';
+
+export async function loader() {
+  await delay(400);
+  return true;
+}
+
+// eslint-disable-next-line no-empty-pattern
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Leather Earn - Stacking' }];
+}
+
+export default function EarnStackingRoute({ params }: Route.ComponentProps) {
+  const poolSlug = params.slug as PoolSlug;
+  const poolName = PoolNameSlugMap[poolSlug];
+
+  if (!poolName) throw new Error(`Uknown pool - ${poolSlug}`);
+
+  return (
+    <StackingClientProvider>
+      <div>Stacking</div>
+    </StackingClientProvider>
+  );
+}

apps/web/app/store/addresses.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { atom, useAtom, useAtomValue } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 import { leather } from '~/helpers/leather-sdk';
@@ -17,10 +19,29 @@ export const extensionStateAtom = atom<ExtensionState>(get => {
 export function useLeatherConnect() {
   const [addresses, setAddresses] = useAtom(addressesAtom);
   const status = useAtomValue(extensionStateAtom);
+
+  const stxAddress = useMemo(
+    () => addresses.find(address => address.symbol === 'STX'),
+    [addresses]
+  );
+
+  const btcAddressP2tr = useMemo(
+    () => addresses.find(address => address.type === 'p2tr'),
+    [addresses]
+  );
+
+  const btcAddressP2wpkh = useMemo(
+    () => addresses.find(address => address.type === 'p2wpkh'),
+    [addresses]
+  );
+
   return {
     addresses,
     setAddresses,
     status,
+    stxAddress,
+    btcAddressP2tr,
+    btcAddressP2wpkh,
     async connect() {
       const result = await leather.getAddresses();
       setAddresses(result.addresses);