feat: home card ui component

Author: kyranjamie

apps/web/app/components/auth-button.tsx

@@ -0,0 +1,20 @@
+import type { AuthState } from '~/helpers/utils';
+
+import { Button, type ButtonProps } from '@leather.io/ui';
+
+const authStateCopyMap: Record<AuthState, string> = {
+  'no-extension': 'Install',
+  'extension-pre-onboarding': 'Sign up',
+  'extension-user': 'Account',
+};
+
+interface AuthButtonProps extends ButtonProps {
+  state: AuthState;
+}
+export function AuthButton(props: AuthButtonProps) {
+  return (
+    <Button variant="outline" {...props}>
+      {authStateCopyMap[props.state]}
+    </Button>
+  );
+}

apps/web/app/features/home/components/home-card.tsx

@@ -0,0 +1,11 @@
+import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
+
+export function HomeCard(props: HTMLStyledProps<'div'>) {
+  return <styled.div borderRadius="md" p="space.04" {...props} />;
+}
+
+export function HomeHeroCard(props: HTMLStyledProps<'div'>) {
+  return (
+    <HomeCard background="linear-gradient(261deg, #FFCAC7 28.46%, #FFC484 99.71%)" {...props} />
+  );
+}

apps/web/app/features/home/home.tsx

@@ -3,18 +3,25 @@ import { leather } from '~/helpers/leather-sdk';
 
 import { Button } from '@leather.io/ui';
 
+import { HomeHeroCard } from './components/home-card';
+
 interface HomeProps {
   latestArticles: { name: string; url: string }[];
 }
 export function Home({ latestArticles }: HomeProps) {
   return (
     <>
       <styled.div p="space.04">
-        <styled.h1 textStyle="display.02">Bitcoin for the rest of us</styled.h1>
-        <styled.h2 textStyle="heading.05">
-          Unlock yield opportunities without giving up control of your assets.
-        </styled.h2>
-        <styled.h2 textStyle="heading.03">Featured articles</styled.h2>
+        <HomeHeroCard>
+          <styled.h1 textStyle="heading.03">Earn rewards with BTC</styled.h1>
+          <styled.p textStyle="label.02" mt="space.03">
+            Bridge BTC to sBTC to access DeFi, NFTs, and ~5% Bitcoin yield* while keeping full
+            liquidity and self-custody. Transfers adjust rewards dynamically.
+          </styled.p>
+          <styled.button textStyle="label.02" mt="space.03">
+            Get started →
+          </styled.button>
+        </HomeHeroCard>
         <ul>
           {latestArticles.map(article => (
             <li key={article.name}>

apps/web/app/helpers/utils.ts

@@ -1,6 +1,14 @@
+import { isDefined } from '@leather.io/utils';
+
 export function getUiPackageAssetUrl(path: string) {
   if (import.meta.env.MODE === 'development') {
     return 'node_modules/@leather.io/ui/dist-web/assets/' + path;
   }
   return 'assets/' + path;
 }
+
+export function isLeatherInstalled() {
+  return isDefined(window.LeatherProvider);
+}
+
+export type AuthState = 'no-extension' | 'extension-pre-onboarding' | 'extension-user';

apps/web/app/layouts/nav/nav.tsx

@@ -1,8 +1,11 @@
 import { styled } from 'leather-styles/jsx';
+import { AuthButton } from '~/components/auth-button';
 
 import { NavItem } from './nav-item.layout';
 
 export function Nav() {
+  const allNavItems = false;
+
   return (
     <styled.nav
       display="flex"
@@ -60,22 +63,27 @@ export function Nav() {
         </NavItem>
       </styled.div>
 
-      <styled.div mt="auto" mb="space.09">
-        <NavItem href="/blog" icon="newspaper">
-          Blog
-        </NavItem>
+      {allNavItems && (
+        <styled.div mt="auto" mb="space.09">
+          <NavItem href="/blog" icon="newspaper">
+            Blog
+          </NavItem>
 
-        <NavItem href="/guides" icon="glasses">
-          Guides
-        </NavItem>
+          <NavItem href="/guides" icon="glasses">
+            Guides
+          </NavItem>
 
-        <NavItem href="/dev-docs" icon="terminal">
-          Dev Docs
-        </NavItem>
+          <NavItem href="/dev-docs" icon="terminal">
+            Dev Docs
+          </NavItem>
 
-        <NavItem href="/support" icon="support">
-          Support
-        </NavItem>
+          <NavItem href="/support" icon="support">
+            Support
+          </NavItem>
+        </styled.div>
+      )}
+      <styled.div mt="auto" mb="space.04">
+        <AuthButton state="extension-pre-onboarding" mx="space.04" />
       </styled.div>
     </styled.nav>
   );

apps/web/tests/homepage.spec.ts

@@ -3,16 +3,6 @@ import { expect, test } from '@playwright/test';
 test.describe('Homepage', () => {
   test('has title', async ({ page }) => {
     await page.goto('/');
-    await expect(page.getByRole('heading', { name: 'Bitcoin for the rest of us' })).toBeVisible();
-  });
-
-  test('get started link', async ({ page }) => {
-    await page.goto('/');
-
-    // Click the get started link.
-    await page.getByRole('link', { name: 'Docs' }).click();
-
-    // Expects page to have a heading with the name of Installation.
-    await expect(page.getByRole('heading', { name: 'Leather web app' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Earn rewards with BTC' })).toBeVisible();
   });
 });