feat: link to appropriate install and earn links

feat: link to external rewards service until we build the features ourselves

feat: just show leather wallet

feat: disable enroll until user is connected

package.json

@@ -72,7 +72,7 @@
     "@emotion/core": "11.0.0",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@leather.io/panda-preset": "0.5.3",
-    "@leather.io/rpc": "^2.1.22",
+    "@leather.io/rpc": "^2.4.0",
     "@pandacss/dev": "^0.48.0",
     "@stacks/prettier-config": "0.0.10",
     "@stacks/stacks-blockchain-api-types": "7.3.2",

src/components/alert.tsx

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
-import { FiInfo } from 'react-icons/fi';
 
 import { Box, Flex, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
+import { IconInfoCircle } from '@tabler/icons-react';
 
 interface Props {
   title?: ReactNode;
@@ -18,15 +17,10 @@ export function Alert({ title, children: body, icon }: Props) {
     bodyEl = body;
   }
   return (
-    <Box
-      style={{ backgroundColor: token('colors.ink.background-secondary') }}
-      py="space.04"
-      px="space.04"
-      borderRadius="4px"
-    >
+    <Box backgroundColor="ink.background-primary" py="space.04" px="space.04" borderRadius="4px">
       <Flex>
         <Box mr="space.02" mt="2px">
-          {icon ?? <FiInfo style={{ color: token('colors.ink.background-primary') }} />}
+          {icon ?? <IconInfoCircle />}
         </Box>
         <Box>
           {title && <styled.p textStyle="heading.01">{title}</styled.p>}
@@ -39,12 +33,7 @@ export function Alert({ title, children: body, icon }: Props) {
 
 export function AlertText({ children }: { children?: ReactNode }) {
   return (
-    <styled.a
-      textStyle="body.01"
-      style={{ color: token('colors.ink.background-primary') }}
-      lineHeight="22px"
-      mt="extra-tight"
-    >
+    <styled.a textStyle="body.01" lineHeight="22px" mt="extra-tight">
       {children}
     </styled.a>
   );

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

@@ -1,7 +1,14 @@
 import { ReactNode, createContext, useContext, useState } from 'react';
 
 import { UserData } from '@stacks/auth';
-import { AppConfig, UserSession, disconnect, showConnect } from '@stacks/connect';
+import {
+  AppConfig,
+  AuthOptions,
+  DEFAULT_PROVIDERS,
+  UserSession,
+  disconnect,
+  showConnect,
+} from '@stacks/connect';
 import { validateStacksAddress as isValidStacksAddress } from '@stacks/transactions';
 import { APP_DETAILS } from 'src/constants';
 
@@ -60,14 +67,15 @@ export function AuthProvider({ children }: Props) {
     showConnect({
       userSession,
       appDetails: APP_DETAILS,
+      defaultProviders: DEFAULT_PROVIDERS.filter(provider => provider.id === 'LeatherProvider'),
       onFinish() {
         setIsSigningIn(false);
         setIsSignedIn(true);
       },
       onCancel() {
         setIsSigningIn(false);
       },
-    });
+    } as AuthOptions);
   }
 
   function signOut() {

src/constants.ts

@@ -9,11 +9,11 @@ export const DEFAULT_V2_INFO_ENDPOINT = '/v2/info';
 export const APP_DETAILS =
   typeof window !== 'undefined'
     ? {
-        name: 'Stacking',
+        name: 'Leather Earn',
         icon: `${window.location.origin}/logo.svg`,
       }
     : {
-        name: 'Stacking - Testing',
+        name: 'Leather Earn - Testing',
         icon: `/logo.svg`,
       };
 

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

@@ -31,8 +31,7 @@ export function ChooseStackingMethodLayout(props: ChooseStackingMethodLayoutProp
               <Messages {...props} />
             </Box>
           )}
-
-          <EarnWithSBTCSection {...props} />
+          <EarnWithSbtcSecion {...props} />
           <StackingSection {...props} />
         </Stack>
       </StartStackingLayout>
@@ -100,7 +99,7 @@ In return, you are eligible to receive rewards in the form of BTC"
   );
 };
 
-export const EarnWithSBTCSection = (props: ChooseStackingMethodLayoutProps) => {
+export const EarnWithSbtcSecion = (props: ChooseStackingMethodLayoutProps) => {
   return (
     <Box mb="space.09" border="1px solid" borderColor="ink.border-default">
       <SectionHero

src/pages/choose-stacking-method/components/bridge-to-sbtc-card.tsx

@@ -3,18 +3,19 @@ import { BridgingStepCard } from 'src/pages/choose-stacking-method/components/br
 import BridgeIllustration from '@assets/images/bridge.svg';
 
 import { ChooseStackingMethodLayoutProps } from '../types';
+import { useLeatherSbtcBridgeButton } from 'src/pages/choose-stacking-method/hooks';
 
 export function BridgeToSBTCCard(props: ChooseStackingMethodLayoutProps) {
+  const { onClick } = useLeatherSbtcBridgeButton();
+
   return (
     <BridgingStepCard
       {...props}
       step={1}
       title="Bridge BTC to sBTC"
       description="Convert your bitcoin to sBTC to access the rewards program. Stay liquid while earning yield on the Stacks network."
       icon={<BridgeIllustration />}
-      onButtonPress={() => {
-        // TODO: Implement bridge to sBTC
-      }}
+      onButtonPress={onClick}
       buttonText="Bridge sBTC"
     />
   );

src/pages/choose-stacking-method/components/bridging-step-card.tsx

@@ -11,6 +11,7 @@ type Props = ChooseStackingMethodLayoutProps & {
   onButtonPress: () => void;
   buttonText: string;
   step: number;
+  disabled?: boolean;
 };
 
 export function BridgingStepCard(props: Props) {
@@ -41,6 +42,7 @@ export function BridgingStepCard(props: Props) {
               variant="outline"
               alignSelf="flex-start"
               fullWidth
+              disabled={props.disabled}
               onClick={props.onButtonPress}
             >
               {props.buttonText}

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

@@ -8,20 +8,24 @@ import EnrollIllustration from '@assets/images/enroll.svg';
 import { BaseDrawer } from '@components/drawer/base-drawer';
 
 import { ChooseStackingMethodLayoutProps } from '../types';
+import { openExternalLink } from '@utils/external-links';
+import { useAuth } from '@components/auth-provider/auth-provider';
 
 export function EnrollForSBTCRewardsCard(props: ChooseStackingMethodLayoutProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const { isSignedIn } = useAuth();
 
   return (
     <>
       <BridgingStepCard
         {...props}
         step={2}
+        disabled={!isSignedIn}
         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="Enroll"
+        buttonText={`${isSignedIn ? 'Enroll' : 'Sign in to enroll'}`}
       />
 
       <BaseDrawer
@@ -42,6 +46,7 @@ export function EnrollForSBTCRewardsCard(props: ChooseStackingMethodLayoutProps)
                   onClick={() => {
                     // TODO: Implement enrollment logic with contract call
                     setIsModalOpen(false);
+                    openExternalLink('https://bitcoinismore.org');
                   }}
                 >
                   Confirm and enroll

src/pages/choose-stacking-method/components/messages.tsx

@@ -12,6 +12,7 @@ import { createSearch } from '@utils/networks';
 
 import { SignedInProps } from '../types';
 import { hasExistingCommitment } from '../utils';
+import { token } from 'leather-styles/tokens';
 
 export function Messages({
   hasEnoughBalanceToDirectStack,
@@ -28,10 +29,12 @@ export function Messages({
     },
   });
 
+  const icon = <IconInfoCircle color={token('colors.red.action-primary-default')} />;
+
   return (
     <Stack className={css({ mb: 'space.04', mx: { base: 'space.00', xlDown: 'space.04' } })}>
       {(hasExistingDelegation || hasExistingDelegatedStacking) && (
-        <Alert icon={<IconInfoCircle />}>
+        <Alert icon={icon}>
           <Stack>
             <styled.p textStyle="body.01">
               It appears that you&apos;re currently pooling. If you recently revoked your delegation
@@ -47,7 +50,7 @@ export function Messages({
         </Alert>
       )}
       {hasExistingDirectStacking && (
-        <Alert icon={<IconInfoCircle />}>
+        <Alert icon={icon}>
           <Stack>
             <styled.p textStyle="body.01">
               It appears that you&apos;re currently stacking. If your locking period recently ended,
@@ -62,7 +65,7 @@ export function Messages({
         </Alert>
       )}
       {!hasExistingCommitment && !hasEnoughBalanceToPool && !hasEnoughBalanceToDirectStack && (
-        <Alert icon={<IconInfoCircle />}>
+        <Alert icon={icon}>
           <Stack>
             <styled.p textStyle="body.01">
               It appears that you don&apos;t have enough funds yet. If you recently transferred

src/pages/choose-stacking-method/hooks/index.ts

@@ -60,3 +60,19 @@ export const useLiquidStackingButton = (props: ChooseStackingMethodLayoutProps)
 
   return { isDisabled, onClick };
 };
+
+export function useLeatherSbtcBridgeButton() {
+  const leatherDetected = window.LeatherProvider !== undefined;
+  const { isSignedIn, signIn } = useAuth();
+  const leatherNotDetectedOrNotSignedIn = !leatherDetected || !isSignedIn;
+
+  return {
+    onClick: () => {
+      if (leatherNotDetectedOrNotSignedIn) {
+        signIn();
+        return;
+      }
+      window.LeatherProvider?.request('openSwap', { base: 'BTC', quote: 'sBTC' });
+    },
+  };
+}