feat(web): auth button styling

Author: kyranjamie

apps/mobile/src/utils/types.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+/** @deprecated Import from ui library */
 export interface HasChildren {
   children?: ReactNode;
 }

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

@@ -1,20 +1,37 @@
-import type { AuthState } from '~/helpers/utils';
+import type { ExtensionState } from '~/helpers/utils';
 
-import { Button, type ButtonProps } from '@leather.io/ui';
+import { Button, type ButtonProps, type HasChildren } from '@leather.io/ui';
+import { assertUnreachable } from '@leather.io/utils';
 
-const authStateCopyMap: Record<AuthState, string> = {
-  'no-extension': 'Install',
-  'extension-pre-onboarding': 'Sign up',
-  'extension-user': 'Account',
-};
+interface AuthButtonLayoutProps extends ButtonProps, HasChildren {}
+export function AuthButtonLayout(props: AuthButtonLayoutProps) {
+  return <Button variant="outline" fullWidth {...props}></Button>;
+}
+
+export function AuthButtonExtensionMissing(props: ButtonProps) {
+  return <AuthButtonLayout {...props}>Install</AuthButtonLayout>;
+}
+
+export function AuthButtonExtensionInstalled(props: ButtonProps) {
+  return <AuthButtonLayout {...props}>Connect</AuthButtonLayout>;
+}
+
+export function AuthButtonExtensionConnected(props: ButtonProps) {
+  return <AuthButtonLayout {...props}>SP....sldkfjsd</AuthButtonLayout>;
+}
 
 interface AuthButtonProps extends ButtonProps {
-  state: AuthState;
+  state: ExtensionState;
 }
-export function AuthButton(props: AuthButtonProps) {
-  return (
-    <Button variant="outline" {...props}>
-      {authStateCopyMap[props.state]}
-    </Button>
-  );
+export function AuthButton({ state, ...rest }: AuthButtonProps) {
+  switch (state) {
+    case 'missing':
+      return <AuthButtonExtensionMissing {...rest} />;
+    case 'detected':
+      return <AuthButtonExtensionInstalled {...rest} />;
+    case 'connected':
+      return <AuthButtonExtensionConnected {...rest} />;
+    default:
+      return assertUnreachable(state);
+  }
 }

apps/web/app/helpers/utils.ts

@@ -11,4 +11,4 @@ export function isLeatherInstalled() {
   return isDefined(window.LeatherProvider);
 }
 
-export type AuthState = 'no-extension' | 'extension-pre-onboarding' | 'extension-user';
+export type ExtensionState = 'missing' | 'detected' | 'connected';

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

@@ -82,8 +82,8 @@ export function Nav() {
           </NavItem>
         </styled.div>
       )}
-      <styled.div mt="auto" mb="space.04">
-        <AuthButton state="extension-pre-onboarding" mx="space.04" />
+      <styled.div mt="auto" mb="space.04" mx="space.04">
+        <AuthButton state="detected" />
       </styled.div>
     </styled.nav>
   );

packages/ui/native.ts

@@ -60,3 +60,4 @@ export { usePressedState } from './src/hooks/use-pressed-state.native';
 export { useHaptics, HapticsProvider } from './src/hooks/use-haptics.native';
 export { Approver } from './src/components/approver/approver.native';
 export { Badge, type BadgeProps } from './src/components/badge/badge.native';
+export * from './src/utils/has-children.shared';

packages/ui/src/exports.web.ts

@@ -41,3 +41,4 @@ export { Prism, type PrismType } from './components/highlighting/clarity-prism.s
 export { Slider } from './components/slider/slider.web';
 export { useClipboard } from './utils/use-clipboard.web';
 export { useOnMount } from './utils/use-on-mount.shared';
+export * from './utils/has-children.shared';