feat(web): sBTC enroll functionality, closes LEA-2456

Author: kyranjamie

.dependency-cruiser.cjs

@@ -289,6 +289,8 @@ module.exports = {
         '.storybook',
         '.*.js$',
         '.*.config.ts',
+        '.wrangler',
+        '.react-router',
       ],
     },
 

apps/web/app/app.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Flex, styled } from 'leather-styles/jsx';
 
 import type { LeatherProvider } from '@leather.io/rpc';
+import { Tooltip } from '@leather.io/ui';
 
 import { Footer } from './layouts/footer/footer';
 import { GlobalLoader } from './layouts/nav/global-loader';
@@ -40,16 +41,16 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export const queryClient = new QueryClient({
   defaultOptions: {
-    queries: {
-      gcTime: 1,
-    },
+    queries: { gcTime: 1 },
   },
 });
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <Outlet />
+      <Tooltip.Provider delayDuration={320}>
+        <Outlet />
+      </Tooltip.Provider>
     </QueryClientProvider>
   );
 }

apps/web/app/features/sbtc-enroll/sbtc-enroll-button.tsx

@@ -0,0 +1,27 @@
+import { BasicTooltip, Button, ButtonProps } from '@leather.io/ui';
+
+import { useEnrolledStatus, useSbtcEnroll } from './use-enroll-transaction';
+
+export function EnrollButtonLayout(props: ButtonProps) {
+  return <Button fullWidth size="xs" {...props} />;
+}
+
+export function SbtcEnrollButton(props: ButtonProps) {
+  const { data } = useEnrolledStatus();
+  const { createSbtcYieldEnrollContractCall } = useSbtcEnroll();
+
+  if (data && data.isEnrolled)
+    return (
+      <BasicTooltip asChild label="You're already enrolled for sBTC rewards">
+        <EnrollButtonLayout disabled {...props}>
+          Enrolled
+        </EnrollButtonLayout>
+      </BasicTooltip>
+    );
+
+  return (
+    <EnrollButtonLayout onClick={createSbtcYieldEnrollContractCall} {...props}>
+      Enroll
+    </EnrollButtonLayout>
+  );
+}

apps/web/app/features/sbtc-enroll/use-enroll-transaction.ts

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+
+import { StacksNetworkName } from '@stacks/network';
+import { Cl, fetchCallReadOnlyFunction, serializeCV } from '@stacks/transactions';
+import { useQuery } from '@tanstack/react-query';
+import { leather } from '~/helpers/leather-sdk';
+import { useLeatherConnect } from '~/store/addresses';
+
+interface EnrollContractIdentifier {
+  contractAddress: string;
+  contractName: string;
+  contract: string;
+}
+const sbtcEnrollContractMap = {
+  testnet: {
+    contractAddress: 'ST1SY0NMZMBSA28MH31T09KCQWPZ4H5HRMYRX4XW7',
+    contractName: 'yield-rewards-testnet',
+    contract: 'ST1SY0NMZMBSA28MH31T09KCQWPZ4H5HRMYRX4XW7.yield-rewards-testnet',
+  },
+  devnet: {
+    contractAddress: 'STB44HYPYAT2BB2QE513NSP81HTMYWBJP02HPGK6',
+    contractName: 'yield',
+    contract: 'STB44HYPYAT2BB2QE513NSP81HTMYWBJP02HPGK6.yield',
+  },
+  mainnet: {
+    contractAddress: 'SP804CDG3KBN9M6E00AD744K8DC697G7HBCG520Q',
+    contractName: 'sbtc-yield-rewards-v3',
+    contract: 'SP804CDG3KBN9M6E00AD744K8DC697G7HBCG520Q.sbtc-yield-rewards-v3',
+  },
+  mocknet: {} as EnrollContractIdentifier,
+} as const satisfies Record<StacksNetworkName, EnrollContractIdentifier>;
+
+function getEnrollContractCallByNetwork(network: StacksNetworkName) {
+  return sbtcEnrollContractMap[network];
+}
+
+async function fetchIsAddressEnrolled(
+  address: string,
+  contract: EnrollContractIdentifier,
+  network: StacksNetworkName
+) {
+  const resp = await fetchCallReadOnlyFunction({
+    ...contract,
+    functionName: 'is-enrolled-in-next-cycle',
+    functionArgs: [Cl.principal(address)],
+    senderAddress: contract.contractAddress,
+    network,
+  });
+  return { isEnrolled: resp.type === 'true', ...resp };
+}
+
+// To do add network support
+const network = { networkName: 'mainnet' } as const;
+
+export function useEnrolledStatus() {
+  const { stacksAccount } = useLeatherConnect();
+
+  const query = useQuery({
+    queryFn: () =>
+      fetchIsAddressEnrolled(
+        stacksAccount?.address ?? '',
+        getEnrollContractCallByNetwork(network.networkName),
+        network.networkName
+      ),
+    queryKey: ['is-enrolled', stacksAccount?.address, network.networkName],
+  });
+
+  return query;
+}
+
+export function useSbtcEnroll() {
+  const { stacksAccount } = useLeatherConnect();
+
+  return useMemo(
+    () => ({
+      async createSbtcYieldEnrollContractCall() {
+        // if (network.networkName === 'mocknet') throw new Error('Mocknet not supported');
+
+        if (!stacksAccount) throw new Error('No address');
+
+        const contractDetails = getEnrollContractCallByNetwork(network.networkName);
+
+        try {
+          const result = await leather.stxCallContract({
+            contract: contractDetails.contract,
+            functionName: 'enroll',
+            functionArgs: [serializeCV(Cl.some(Cl.principal(stacksAccount.address)))],
+            network: network.networkName,
+          });
+          // eslint-disable-next-line no-console
+          console.log(result);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.log('Error creating sbtc yield enroll contract call', e);
+        }
+      },
+    }),
+    [stacksAccount]
+  );
+}

apps/web/app/features/sign-in-button/sign-in-button.tsx

@@ -1,12 +1,13 @@
 import { useLeatherConnect } from '~/store/addresses';
+import { openExternalLink } from '~/utils/external-links';
 
 import { LEATHER_EXTENSION_CHROME_STORE_URL } from '@leather.io/constants';
 
 import { ActiveAccountButtonLayout, SignInButtonLayout } from './sign-in-button.layout';
 
 function InstallLeatherButton() {
   return (
-    <SignInButtonLayout onClick={() => window.open(LEATHER_EXTENSION_CHROME_STORE_URL, '_blank')}>
+    <SignInButtonLayout onClick={() => openExternalLink(LEATHER_EXTENSION_CHROME_STORE_URL)}>
       Install
     </SignInButtonLayout>
   );

apps/web/app/features/stacking/components/choose-pooling-amount.tsx

@@ -16,7 +16,7 @@ import { microStxToStx } from '@leather.io/utils';
 export function ChoosePoolingAmount() {
   const { setValue, control } = useFormContext<StackingPoolFormSchema>();
 
-  const { stxAddress } = useLeatherConnect();
+  const { stacksAccount: stxAddress } = useLeatherConnect();
 
   if (!stxAddress) throw new Error('No stx address available');
 

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

@@ -17,7 +17,7 @@ interface Props {
 }
 
 export function StackingClientProvider({ children }: Props) {
-  const { stxAddress } = useLeatherConnect();
+  const { stacksAccount: stxAddress } = useLeatherConnect();
   const { network } = useStacksNetwork();
 
   const client = useMemo<StackingClient | null>(() => {

apps/web/app/features/stacking/start-pooled-stacking.tsx

@@ -48,10 +48,9 @@ import { PoolName, WrapperPrincipal } from './utils/types-preset-pools';
 interface StartPooledStackingProps {
   poolName: PoolName;
 }
-
 export function StartPooledStacking({ poolName }: StartPooledStackingProps) {
   const { client } = useStackingClient();
-  const { stxAddress } = useLeatherConnect();
+  const { stacksAccount: stxAddress } = useLeatherConnect();
 
   if (!stxAddress || !client) {
     return 'You should connect STX wallet';
@@ -75,7 +74,7 @@ interface StartPooledStackingLayoutProps {
 }
 
 function StartPooledStackingLayout({ poolName, client }: StartPooledStackingLayoutProps) {
-  const { stxAddress, btcAddressP2wpkh } = useLeatherConnect();
+  const { stacksAccount, btcAddressP2wpkh } = useLeatherConnect();
   const { network, networkInstance, networkPreference } = useStacksNetwork();
   const poxContracts = useMemo(() => getPoxContracts(network), [network]);
 
@@ -87,23 +86,23 @@ function StartPooledStackingLayout({ poolName, client }: StartPooledStackingLayo
     contractAddress,
     contractName,
     callingContract: poxContracts['WrapperFastPool'],
-    senderAddress: stxAddress ? stxAddress.address : null,
+    senderAddress: stacksAccount ? stacksAccount.address : null,
     network,
   });
 
   const getAllowanceContractCallersRestakeQuery = useGetAllowanceContractCallersQuery({
     contractAddress,
     contractName,
     callingContract: poxContracts['WrapperRestake'],
-    senderAddress: stxAddress ? stxAddress.address : null,
+    senderAddress: stacksAccount ? stacksAccount.address : null,
     network,
   });
 
   const getAllowanceContractCallersOneCycleQuery = useGetAllowanceContractCallersQuery({
     contractAddress,
     contractName,
     callingContract: poxContracts['WrapperOneCycle'],
-    senderAddress: stxAddress ? stxAddress.address : null,
+    senderAddress: stacksAccount ? stacksAccount.address : null,
     network,
   });
 

apps/web/app/helpers/utils.ts

@@ -6,3 +6,7 @@ export function isLeatherInstalled() {
 }
 
 export type ExtensionState = 'missing' | 'detected' | 'connected';
+
+export function whenExtensionState(state: ExtensionState) {
+  return <T>(cases: { missing: T; detected: T; connected: T }): T => cases[state];
+}

apps/web/app/pages/sbtc-rewards/components/acquire-sbtc-grid.tsx

@@ -1,10 +1,13 @@
 import { Box, Flex, GridProps, styled } from 'leather-styles/jsx';
+import { WhenClient } from '~/components/client-only';
 import { DummyIcon } from '~/components/dummy';
 import { BitcoinIcon } from '~/components/icons/bitcoin-icon';
 import { StacksIcon } from '~/components/icons/stacks-icon';
 import { AcquireSbtcGridLayout } from '~/pages/sbtc-rewards/components/acquire-sbtc-grid.layout';
 
-import { Button } from '@leather.io/ui';
+import { Badge, Button } from '@leather.io/ui';
+
+import { BridgingStatus, useSbtcRewardContext } from '../sbtc-rewards-context';
 
 function AcquireSbtcInstructions() {
   return (
@@ -14,6 +17,7 @@ function AcquireSbtcInstructions() {
         <styled.h3 textStyle="heading.05" mt="space.05">
           Choose to bridge or swap
         </styled.h3>
+
         <styled.p textStyle="caption.01" mt="space.01">
           sBTC can be acquired either by bridging BTC to the Stacks blockchain or swapping another
           asset on Stacks on the L2 itself.
@@ -23,46 +27,85 @@ function AcquireSbtcInstructions() {
   );
 }
 
+function MaxCapacity({ bridgingStatus }: { bridgingStatus: BridgingStatus }) {
+  if (bridgingStatus !== 'disabled') return null;
+  return <Badge mt="space.04" variant="info" label="Max bridging capacity reached" />;
+}
+
 function BridgeToSbtcCell() {
+  const { onBridgeSbtc, bridgingStatus, whenExtensionState } = useSbtcRewardContext();
   return (
     <Flex flexDir={['column', 'row', 'column', 'row']} justifyContent="space-between" p="space.05">
-      <Box>
+      <Flex flexDir="column" flex={1} justifyContent="space-between">
         <BitcoinIcon size={32} />
 
-        <styled.h4 textStyle="heading.05" mt="space.05">
-          Bridge BTC to sBTC
-        </styled.h4>
-        <styled.p textStyle="caption.01" mt="space.01" mr="space.05">
-          Bitcoin to Stacks via a trust-minimizing protocol
-        </styled.p>
-      </Box>
+        <Box mt="space.04">
+          <styled.h4 textStyle="heading.05">Bridge BTC to sBTC</styled.h4>
+          <styled.p textStyle="caption.01" mt="space.01" mr="space.05">
+            Bitcoin to Stacks via a trust-minimizing protocol
+          </styled.p>
+          <MaxCapacity bridgingStatus={bridgingStatus} />
+        </Box>
+      </Flex>
       <Flex alignItems="flex-end">
-        <Button mt="space.04" size="xs">
-          Bridge
-        </Button>
+        <WhenClient>
+          <Button
+            onClick={onBridgeSbtc}
+            disabled={bridgingStatus !== 'enabled'}
+            mt="space.04"
+            size="xs"
+          >
+            {whenExtensionState({
+              connected: 'Bridge',
+              detected: 'Sign in to bridge',
+              missing: 'Install Leather to bridge',
+            })}
+          </Button>
+        </WhenClient>
       </Flex>
     </Flex>
   );
 }
 
 function SwapStxToSbtcCell() {
+  const { onSwapStxSbtc, whenExtensionState } = useSbtcRewardContext();
   return (
-    <Flex flexDir={['column', 'row', 'column', 'row']} justifyContent="space-between" p="space.05">
-      <Box>
+    <Flex
+      flexDir={['column', 'row', 'column', 'row']}
+      flex={1}
+      justifyContent="space-between"
+      p="space.05"
+    >
+      <Flex flexDir="column" flex={1} justifyContent="space-between">
         <StacksIcon size={32} />
 
-        <styled.h4 textStyle="heading.05" mt="space.05">
-          Swap Stacks tokens for sBTC
-        </styled.h4>
+        <Box mt="space.04">
+          <styled.h4 textStyle="heading.05">Swap Stacks tokens for sBTC</styled.h4>
 
-        <styled.p textStyle="caption.01" mt="space.01" mr="space.05">
-          On Stacks via decentralized liquidity pools
-        </styled.p>
-      </Box>
+          <styled.p textStyle="caption.01" mt="space.01" mr="space.05">
+            On Stacks via decentralized liquidity pools
+          </styled.p>
+        </Box>
+      </Flex>
       <Flex alignItems="flex-end">
-        <Button mt="space.04" size="xs">
-          Swap
-        </Button>
+        <WhenClient fallback={<Button width="52px" size="xs" aria-busy />}>
+          <Button
+            disabled={whenExtensionState({
+              connected: false,
+              detected: true,
+              missing: true,
+            })}
+            onClick={onSwapStxSbtc}
+            mt="space.04"
+            size="xs"
+          >
+            {whenExtensionState({
+              connected: 'Swap',
+              detected: 'Sign in to swap',
+              missing: 'Install Leather to swap',
+            })}
+          </Button>
+        </WhenClient>
       </Flex>
     </Flex>
   );