chore: formatter

src/components/auth-provider/auth-provider.tsx

@@ -31,7 +31,6 @@ function getAccountAddresses(userData: any, network: string) {
   if (!isValidStacksAddress(address)) {
     return { address: null, btcAddressP2tr: null, btcAddressP2wpkh: null };
   }
-
   return { address, btcAddressP2tr, btcAddressP2wpkh };
 }
 

src/components/navbar.tsx

@@ -114,6 +114,7 @@ export function Navbar() {
                       background={'ink.background-primary'}
                       fontSize="13px"
                       width="18ch"
+                      whiteSpace="nowrap"
                       {...bind}
                     >
                       {isHovered ? 'Sign out' : truncateMiddle(address)}

src/hooks/use-enroll-transaction.ts

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+
+import { openContractCall } from '@stacks/connect';
+import { StacksNetworkName } from '@stacks/network';
+import {
+  AnchorMode,
+  Cl,
+  PostConditionMode,
+  UnsignedContractCallOptions,
+  fetchCallReadOnlyFunction,
+} from '@stacks/transactions';
+import { useQuery } from '@tanstack/react-query';
+
+import { useAuth } from '@components/auth-provider/auth-provider';
+
+import { useStacksNetwork } from './use-stacks-network';
+
+type EnrollContractIdenfier = Pick<UnsignedContractCallOptions, 'contractName' | 'contractAddress'>;
+
+const sbtcEnrollContractMap: Record<StacksNetworkName, EnrollContractIdenfier> = {
+  testnet: {
+    contractAddress: 'ST1SY0NMZMBSA28MH31T09KCQWPZ4H5HRMYRX4XW7',
+    contractName: 'yield-rewards-testnet',
+  },
+  devnet: {
+    contractAddress: 'STB44HYPYAT2BB2QE513NSP81HTMYWBJP02HPGK6',
+    contractName: 'yield',
+  },
+  mainnet: {
+    contractAddress: 'SP804CDG3KBN9M6E00AD744K8DC697G7HBCG520Q',
+    contractName: 'sbtc-yield-rewards',
+  },
+  mocknet: {} as EnrollContractIdenfier,
+};
+
+function getEnrollContractCallByNetwork(network: StacksNetworkName) {
+  return sbtcEnrollContractMap[network];
+}
+
+async function fetchIsAddressEnrolled(
+  address: string,
+  contract: EnrollContractIdenfier,
+  network: StacksNetworkName
+) {
+  const resp = await fetchCallReadOnlyFunction({
+    ...contract,
+    functionName: 'is-enrolled-in-next-cycle',
+    functionArgs: [Cl.principal(address)],
+    senderAddress: contract.contractAddress,
+    network,
+  });
+  console.log('resp', resp);
+  // TODO: To test when enrolled
+  return { isEnrolled: resp.type === 'true', ...resp };
+}
+
+export function useEnrolledStatus() {
+  const { address } = useAuth();
+  const network = useStacksNetwork();
+  const query = useQuery({
+    queryFn: () =>
+      fetchIsAddressEnrolled(
+        address ?? '',
+        getEnrollContractCallByNetwork(network.networkName),
+        network.networkName
+      ),
+    queryKey: ['is-enrolled', address, network.networkName],
+  });
+  return query;
+}
+
+export function useSbtcEnroll({
+  onFinish,
+  onCancel,
+}: {
+  onFinish?: () => void;
+  onCancel?: () => void;
+}) {
+  const network = useStacksNetwork();
+  const { address } = useAuth();
+
+  return useMemo(
+    () => ({
+      async createSbtcYieldEnrollContractCall() {
+        if (network.networkName === 'mocknet') throw new Error('Mocknet not supported');
+
+        if (!address) throw new Error('No address');
+
+        const contractDetails = getEnrollContractCallByNetwork(network.networkName);
+
+        try {
+          openContractCall({
+            ...contractDetails,
+            functionName: 'enroll',
+            functionArgs: [Cl.some(Cl.principal(address))],
+            network: network.networkName,
+            fee: 14000,
+
+            anchorMode: AnchorMode.Any,
+            postConditionMode: PostConditionMode.Allow,
+
+            onFinish: response => {
+              console.log('on finish', response);
+              onFinish?.();
+            },
+            onCancel: () => {
+              console.log('on cancel');
+              onCancel?.();
+            },
+          });
+        } catch (e) {
+          console.log(e);
+        }
+      },
+    }),
+    [address, network, onFinish, onCancel]
+  );
+}

src/pages/choose-stacking-method/choose-stacking-method.layout.tsx

@@ -1,7 +1,7 @@
 import { css } from 'leather-styles/css';
 import { Box, Stack, styled } from 'leather-styles/jsx';
 import { BridgeToSBTCCard } from 'src/pages/choose-stacking-method/components/bridge-to-sbtc-card';
-import { EnrollForSBTCRewardsCard } from 'src/pages/choose-stacking-method/components/enroll-for-sbtc-rewards';
+import { EnrollForSbtcRewardsCard } from 'src/pages/choose-stacking-method/components/enroll-for-sbtc-rewards';
 import { SectionHero } from 'src/pages/choose-stacking-method/components/section-hero';
 
 import { StackingDisclaimer } from '@components/stacking-disclaimer';
@@ -114,7 +114,7 @@ export const EarnWithSbtcSecion = (props: ChooseStackingMethodLayoutProps) => {
       />
       <EarnBTCSectionContainer>
         <BridgeToSBTCCard {...props} />
-        <EnrollForSBTCRewardsCard {...props} />
+        <EnrollForSbtcRewardsCard {...props} />
       </EarnBTCSectionContainer>
     </Box>
   );

src/pages/choose-stacking-method/components/enroll-for-sbtc-rewards.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { Button } from '@leather.io/ui';
 import { Box, Flex, styled } from 'leather-styles/jsx';
@@ -7,26 +7,49 @@ import { BridgingStepCard } from 'src/pages/choose-stacking-method/components/br
 import EnrollIllustration from '@assets/images/enroll.svg';
 import { useAuth } from '@components/auth-provider/auth-provider';
 import { BaseDrawer } from '@components/drawer/base-drawer';
+import { useEnrolledStatus, useSbtcEnroll } from '@hooks/use-enroll-transaction';
 import { analytics } from '@utils/analytics';
-import { openExternalLink } from '@utils/external-links';
 
 import { ChooseStackingMethodLayoutProps } from '../types';
 
-export function EnrollForSBTCRewardsCard(props: ChooseStackingMethodLayoutProps) {
+export function EnrollForSbtcRewardsCard(props: ChooseStackingMethodLayoutProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [hasEnrolled, setHasEnrolled] = useState(false);
   const { isSignedIn } = useAuth();
 
+  const { data: enrolledQuery, refetch } = useEnrolledStatus();
+
+  const onEnrollFinish = useCallback(() => {
+    refetch();
+    setHasEnrolled(true);
+  }, [refetch]);
+
+  const { createSbtcYieldEnrollContractCall } = useSbtcEnroll({ onFinish: onEnrollFinish });
+
+  const userEnrolled = useMemo(() => {
+    return enrolledQuery?.isEnrolled || hasEnrolled;
+  }, [enrolledQuery?.isEnrolled, hasEnrolled]);
+
+  const enrolledButtonText = useMemo(() => {
+    if (userEnrolled) return `You're already enrolled in the next cycle`;
+    if (isSignedIn) return 'Enroll';
+    return 'Sign in to enroll';
+  }, [userEnrolled, isSignedIn]);
+
   return (
     <>
       <BridgingStepCard
-        {...props}
         step={2}
-        disabled={!isSignedIn}
+        disabled={userEnrolled}
         title="Enroll and keep sBTC in your wallet"
         description="The more sBTC you hold in your wallet, the greater your rewards. Rewards are automatically distributed from the protocol, giving you more sBTC to grow your holdings."
         icon={<EnrollIllustration />}
-        onButtonPress={() => setIsModalOpen(true)}
-        buttonText={`${isSignedIn ? 'Enroll' : 'Sign in to enroll'}`}
+        onButtonPress={() => {
+          if (!isSignedIn) return window.scrollTo({ top: 0, behavior: 'smooth' });
+          setIsModalOpen(true);
+        }}
+        buttonText={enrolledButtonText}
+        {...props}
       />
 
       <BaseDrawer
@@ -44,11 +67,10 @@ export function EnrollForSBTCRewardsCard(props: ChooseStackingMethodLayoutProps)
 
               <Flex flexDirection="column" gap="space.04" mt="space.06">
                 <Button
-                  onClick={() => {
-                    // TODO: Implement enrollment logic with contract call
-                    setIsModalOpen(false);
+                  onClick={async () => {
                     analytics.untypedTrack('sbtc_earn_enrollment_started');
-                    openExternalLink('https://bitcoinismore.org');
+                    await createSbtcYieldEnrollContractCall();
+                    setIsModalOpen(false);
                   }}
                 >
                   Confirm and enroll