chore: tooltip in header

leather-io · Apr 1, 2024 · 3807fac · 3807fac
1 parent c44a73f
commit 3807fac
Show file tree

Hide file tree

Showing 22 changed files with 242 additions and 160 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -5,7 +5,6 @@ import { customViewports } from './viewports';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: {
       default: 'leather-light-mode',
       values: [

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/common/theme-provider.tsx b/src/app/common/theme-provider.tsx
@@ -1,13 +1,13 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 
-import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { Theme as RadixTheme } from '@radix-ui/themes';
 
 import { noop } from '@shared/utils';
 
 import { store } from '@app/store';
 import { settingsActions } from '@app/store/settings/settings.actions';
 import { useUserSelectedTheme } from '@app/store/settings/settings.selectors';
+import { TooltipProvider } from '@app/ui/components/tooltip/tooltip';
 
 import { useOnMount } from './hooks/use-on-mount';
 
@@ -93,7 +93,7 @@ export function ThemeSwitcherProvider({ children }: ThemeSwitcherProviderProps)
   return (
     <ThemeContext.Provider value={{ theme, userSelectedTheme, setUserSelectedTheme }}>
       <RadixTheme appearance={theme}>
-        <RadixTooltip.Provider delayDuration={300}>{children}</RadixTooltip.Provider>
+        <TooltipProvider delayDuration={300}>{children}</TooltipProvider>
       </RadixTheme>
     </ThemeContext.Provider>
   );

diff --git a/src/app/components/account/account-list-item.layout.tsx b/src/app/components/account/account-list-item.layout.tsx
@@ -36,7 +36,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
     >
       <ItemLayout
         isSelected={isSelected}
-        flagImg={avatar}
+        img={avatar}
         titleLeft={accountName}
         titleRight={
           isLoading ? (

diff --git a/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -24,7 +24,7 @@ export function Brc20TokenAssetItemLayout({
   return (
     <Pressable onClick={onClick} my="space.02">
       <ItemLayout
-        flagImg={<Brc20AvatarIcon />}
+        img={<Brc20AvatarIcon />}
         titleLeft={token.ticker}
         captionLeft="BRC-20"
         titleRight={

diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -39,7 +39,7 @@ export function CryptoCurrencyAssetItemLayout({
 
   const content = (
     <ItemLayout
-      flagImg={icon}
+      img={icon}
       titleLeft={title}
       captionLeft={balance.symbol}
       titleRight={

diff --git a/...nts/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/...nts/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -23,7 +23,7 @@ export function StacksFungibleTokenAssetItemLayout({
   return (
     <Pressable data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
-        flagImg={
+        img={
           <StacksAssetAvatar
             color="white"
             gradientString={avatar}

diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -28,7 +28,7 @@ export function TransactionItemLayout({
   return (
     <Pressable onClick={openTxLink} my="space.02">
       <ItemLayout
-        flagImg={txIcon && txIcon}
+        img={txIcon && txIcon}
         titleLeft={txTitle}
         captionLeft={
           <HStack alignItems="center">

diff --git a/src/app/features/approver/approver-demo.tsx b/src/app/features/approver/approver-demo.tsx
@@ -3,20 +3,37 @@ import { Box, Circle, styled } from 'leather-styles/jsx';
 import { Button } from '@app/ui/components/button/button';
 import { Callout } from '@app/ui/components/callout/callout';
 import { Flag } from '@app/ui/components/flag/flag';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { TooltipProvider } from '@app/ui/components/tooltip/tooltip';
+import { InfoCircleIcon } from '@app/ui/icons';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 import { Approver } from './approver';
 
 export function ApproverDemo() {
   return (
     <styled.div minH="100vh">
       <Approver>
-        <Approver.Header title="Some prompt that breaks two lines" requester="gamma.io" />
+        <Approver.Header
+          title="Some prompt that bre"
+          requester="gamma.io"
+          iconTooltip={
+            <TooltipProvider delayDuration={300}>
+              <BasicTooltip label="Some tooltip">
+                <InfoCircleIcon color="ink.action-primary-default" variant="small" />
+              </BasicTooltip>
+            </TooltipProvider>
+          }
+        />
         <Callout title="Some callout">Hey watch out for this sketchy app</Callout>
         <Approver.Section>
           <Approver.Subheader>Demo section 1</Approver.Subheader>
-          <Flag img={<Circle size="40px" backgroundColor="ink.border-default" />} align="top">
+          <Flag
+            img={<Circle size="40px" backgroundColor="ink.border-default" />}
+            align="top"
+            mb="space.03"
+          >
             <Box width="90%" height="16px" backgroundColor="ink.border-default" />
             <Box width="75%" height="12px" backgroundColor="ink.border-default" mt="space.02" />
           </Flag>
@@ -28,21 +45,23 @@ export function ApproverDemo() {
             titleRight="Example"
             captionLeft="Example"
             captionRight="Example"
-            flagImg={<Circle size="40px" backgroundColor="ink.border-default" />}
+            img={<Circle size="40px" backgroundColor="ink.border-default" />}
+            mb="space.03"
           />
         </Approver.Section>
         <Approver.Advanced>
           <Approver.Section>
             Section 3
-            <ItemInteractive onClick={() => {}} mt="space.03">
+            <Pressable onClick={() => {}} mt="space.03">
               <ItemLayout
                 captionLeft="Example"
                 captionRight="Example"
-                flagImg={<Circle size="40px" backgroundColor="ink.border-default" />}
+                img={<Circle size="40px" backgroundColor="ink.border-default" />}
                 titleLeft="Example"
                 titleRight="Example"
+                mb="space.03"
               />
-            </ItemInteractive>
+            </Pressable>
           </Approver.Section>
           <Approver.Section>
             <Approver.Subheader>Demo section 1</Approver.Subheader>

diff --git a/src/app/features/approver/approver.stories.tsx b/src/app/features/approver/approver.stories.tsx
@@ -4,9 +4,9 @@ import { Box, Circle, Flex } from 'leather-styles/jsx';
 import { Button } from '@app/ui/components/button/button';
 import { Callout } from '@app/ui/components/callout/callout';
 import { Flag } from '@app/ui/components/flag/flag';
-import { ItemInteractive } from '@app/ui/components/item/item-interactive';
-import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { ZapIcon } from '@app/ui/icons';
+import { Pressable } from '@app/ui/pressable/pressable';
 
 import { Approver } from './approver';
 
@@ -36,15 +36,15 @@ export const ExampleOne: Story = {
           <Approver.Subheader>
             Subheader with icon <ZapIcon variant="small" />
           </Approver.Subheader>
-          <ItemInteractive>
+          <Pressable>
             <ItemLayout
-              flagImg={<Circle size="40px" backgroundColor="ink.border-default" />}
+              img={<Circle size="40px" backgroundColor="ink.border-default" />}
               titleLeft={<Box width="180px" height="14px" backgroundColor="ink.border-default" />}
               titleRight={<Box width="50px" height="14px" backgroundColor="ink.border-default" />}
               captionLeft={<Box width="70px" height="12px" backgroundColor="ink.border-default" />}
               captionRight={<Box width="40px" height="12px" backgroundColor="ink.border-default" />}
             />
-          </ItemInteractive>
+          </Pressable>
           <Approver.Subheader mt="space.05">Subheader 2</Approver.Subheader>
           <Flag
             img={<Circle size="40px" backgroundColor="ink.border-default" />}
@@ -62,21 +62,21 @@ export const ExampleOne: Story = {
             titleRight="100 MICA"
             captionLeft="SIP-10"
             captionRight="$894,891"
-            flagImg={<Circle size="40px" backgroundColor="ink.border-default" />}
+            img={<Circle size="40px" backgroundColor="ink.border-default" />}
           />
         </Approver.Section>
         <Approver.Advanced>
           <Approver.Section>
             <Approver.Subheader>In the advanced section</Approver.Subheader>
-            <ItemInteractive onClick={() => {}} mt="space.03" mb="space.03">
+            <Pressable onClick={() => {}} mt="space.03" mb="space.03">
               <ItemLayout
                 titleLeft="Pressable"
                 titleRight="Mr. Clicky"
                 captionLeft="Interactive item"
                 captionRight="Click me"
-                flagImg={<Circle size="40px" backgroundColor="ink.border-default" />}
+                img={<Circle size="40px" backgroundColor="ink.border-default" />}
               />
-            </ItemInteractive>
+            </Pressable>
           </Approver.Section>
           <Approver.Section>
             <Approver.Subheader>Inputs & Outputs</Approver.Subheader>

diff --git a/src/app/features/approver/components/approver-advanced.tsx b/src/app/features/approver/components/approver-advanced.tsx
@@ -3,8 +3,10 @@ import { useRef } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Flex } from 'leather-styles/jsx';
 
+import { createDelay } from '@shared/utils';
+
 import type { HasChildren } from '@app/common/has-children';
-import { createDelay, getScrollParent } from '@app/common/utils';
+import { getScrollParent } from '@app/common/utils';
 import { Button } from '@app/ui/components/button/button';
 import { Flag } from '@app/ui/components/flag/flag';
 import { ChevronDownIcon } from '@app/ui/icons';

diff --git a/src/app/features/approver/components/approver-header.tsx b/src/app/features/approver/components/approver-header.tsx
@@ -1,26 +1,43 @@
 import type { ReactNode } from 'react';
 
-import { styled } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
+
+import { isString } from '@shared/utils';
+
+import { Favicon } from '@app/components/favicon';
+import { Flag } from '@app/ui/components/flag/flag';
 
 import { ApproverHeaderAnimation } from '../approver-animation';
 import { useRegisterApproverChild } from '../approver.context';
 
 interface ApproverHeaderProps {
   title: ReactNode;
   requester: ReactNode;
+  iconTooltip?: ReactNode;
 }
-export function ApproverHeader({ title, requester }: ApproverHeaderProps) {
+export function ApproverHeader({ title, requester, iconTooltip }: ApproverHeaderProps) {
   useRegisterApproverChild('header');
   return (
-    <styled.header px="space.05" py="space.03" className="skip-animation">
+    <styled.header p="space.05" className="skip-animation" pos="relative">
       <ApproverHeaderAnimation>
-        <styled.h1 textStyle="heading.03">{title}</styled.h1>
+        <styled.h1 textStyle="heading.03" mr={iconTooltip ? 'space.06' : ''}>
+          {title}
+        </styled.h1>
       </ApproverHeaderAnimation>
       <ApproverHeaderAnimation delay={0.04}>
-        <styled.p textStyle="label.03" mt="space.03">
+        <Flag
+          mt="space.03"
+          textStyle="label.03"
+          img={isString(requester) ? <Favicon origin={requester} /> : requester}
+        >
           Requested by {requester}
-        </styled.p>
+        </Flag>
       </ApproverHeaderAnimation>
+      {iconTooltip && (
+        <Box pos="absolute" top="space.05" right="space.05" mt="space.01">
+          {iconTooltip}
+        </Box>
+      )}
     </styled.header>
   );
 }
diff --git a/src/app/features/approver/components/approver-section.tsx b/src/app/features/approver/components/approver-section.tsx
@@ -10,7 +10,6 @@ export function ApproverSection(props: HasChildren) {
     <styled.section
       className="approver-section"
       mt="space.03"
-      mx="space.03"
       px="space.05"
       py="space.03"
       rounded="sm"

diff --git a/src/app/features/approver/components/approver-status.tsx b/src/app/features/approver/components/approver-status.tsx
@@ -0,0 +1,18 @@
+import dayjs from 'dayjs';
+import { styled } from 'leather-styles/jsx';
+
+import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
+
+interface ApproverStatusProps {
+  status: 'completed' | 'error' | 'pending';
+}
+export function ApproverStatus({ status }: ApproverStatusProps) {
+  return (
+    <styled.div>
+      <BulletSeparator>
+        {status}
+        <styled.span>{dayjs(new Date()).format()}</styled.span>
+      </BulletSeparator>
+    </styled.div>
+  );
+}
diff --git a/src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx b/src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx
@@ -1,7 +1,8 @@
-import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { Meta, StoryObj } from '@storybook/react';
 import BigNumber from 'bignumber.js';
 
+import { TooltipProvider } from '@app/ui/components/tooltip/tooltip';
+
 import { StacksBalanceListItemLayout } from './stacks-balance-list-item.layout';
 
 const meta: Meta<typeof StacksBalanceListItemLayout> = {

diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx
@@ -25,7 +25,7 @@ export function ReceiveItem({
   return (
     <Pressable my="space.02">
       <ItemLayoutWithButtons
-        flagImg={icon}
+        img={icon}
         title={title}
         caption={truncateMiddle(address, 6)}
         buttons={

diff --git a/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/components/swap-choose-asset/components/swap-asset-item.tsx
@@ -25,7 +25,7 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
   return (
     <Pressable data-testid={SwapSelectors.ChooseAssetListItem} onClick={onClick} my="space.02">
       <ItemLayout
-        flagImg={
+        img={
           <Avatar.Root>
             <Avatar.Image alt={fallback} src={asset.icon} />
             <Avatar.Fallback delayMs={defaultFallbackDelay}>{fallback}</Avatar.Fallback>

diff --git a/src/app/ui/components/item-layout/item-layout-with-buttons.tsx b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx
@@ -9,17 +9,17 @@ import { Flag } from '../flag/flag';
 interface ItemWithButtonsLayoutProps {
   buttons: ReactNode;
   caption: string;
-  flagImg: ReactNode;
+  img: ReactNode;
   title: string;
 }
 export function ItemLayoutWithButtons({
   buttons,
   caption,
-  flagImg,
+  img,
   title,
 }: ItemWithButtonsLayoutProps) {
   return (
-    <Flag img={flagImg}>
+    <Flag img={img}>
       <Flex alignItems="center" justifyContent="space-between" width="100%">
         <Stack
           alignItems="start"

diff --git a/src/app/ui/components/item-layout/item-layout.stories.tsx b/src/app/ui/components/item-layout/item-layout.stories.tsx
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof Component>;
 export const Item: Story = {
   render: () => (
     <Component
-      flagImg={<Circle size="40px" backgroundColor="red.background-secondary" />}
+      img={<Circle size="40px" backgroundColor="red.background-secondary" />}
       titleLeft={<Box width="500px" height="20px" backgroundColor="red.background-secondary" />}
       captionLeft={<Box width="300px" height="20px" backgroundColor="red.background-secondary" />}
       titleRight={<Box width="100px" height="20px" backgroundColor="red.background-secondary" />}

diff --git a/src/app/ui/components/item-layout/item-layout.tsx b/src/app/ui/components/item-layout/item-layout.tsx
@@ -5,12 +5,12 @@ import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 import { pressableCaptionStyles, pressableChevronStyles } from '@app/ui/pressable/pressable';
 
 import { ChevronUpIcon } from '../../icons/chevron-up-icon';
-import { Flag } from '../flag/flag';
+import { Flag, type FlagProps } from '../flag/flag';
 
-interface ItemLayoutProps {
+interface ItemLayoutProps extends Omit<FlagProps, 'children'> {
   captionLeft: ReactNode;
   captionRight?: ReactNode;
-  flagImg: ReactNode;
+  img: ReactNode;
   isDisabled?: boolean;
   isSelected?: boolean;
   showChevron?: boolean;
@@ -20,13 +20,15 @@ interface ItemLayoutProps {
 export function ItemLayout({
   captionLeft,
   captionRight,
-  flagImg,
+  img,
+  isSelected,
   showChevron,
   titleLeft,
   titleRight,
+  ...props
 }: ItemLayoutProps) {
   return (
-    <Flag img={flagImg} spacing="space.03">
+    <Flag spacing="space.03" {...props}>
       <Flex alignItems="center" justifyContent="space-between" width="100%">
         <Stack
           alignItems="start"

diff --git a/src/app/ui/components/tooltip/tooltip.tsx b/src/app/ui/components/tooltip/tooltip.tsx
@@ -3,6 +3,8 @@ import { forwardRef } from 'react';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { css } from 'leather-styles/css';
 
+export const TooltipProvider = RadixTooltip.TooltipProvider;
+
 function Root(props: RadixTooltip.TooltipProps) {
   return <RadixTooltip.Root {...props} />;
 }