@rango-dev/widget-embedded 0.20.1-next.2 → 0.20.1-next.21

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -15,7 +15,7 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { RANGO_SWAP_BOX_ID } from '../../constants';
@@ -26,23 +26,20 @@ import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
+import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
+import { ExpandedIcon } from '../CustomCollapsible/CustomCollapsible.styles';
 
 import { getRequiredWallets, isValidAddress } from './ConfirmWallets.helpers';
 import {
   alarmsStyles,
-  CollapsibleContent,
-  CollapsibleRoot,
   ConfirmButton,
   CustomDestination,
   CustomDestinationButton,
-  EXPANDABLE_TRANSITION_DURATION,
-  ExpandedIcon,
   ListContainer,
   NavigateBack,
   ShowMoreHeader,
   StyledTextField,
   Title,
-  Trigger,
   Wallets,
   WalletsContainer,
   walletsListStyles,
@@ -76,7 +73,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const [showCustomDestination, setShowCustomDestination] = useState(
     !!customDestination
   );
-  const customDestinationRef = useRef<HTMLDivElement | null>(null);
 
   const requiredWallets = getRequiredWallets(quote);
 
@@ -231,14 +227,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
     );
   }, [connectedWallets.length]);
 
-  useLayoutEffect(() => {
-    if (showCustomDestination && customDestinationRef.current) {
-      setTimeout(() => {
-        customDestinationRef?.current?.scrollIntoView({ behavior: 'smooth' });
-      }, EXPANDABLE_TRANSITION_DURATION);
-    }
-  }, [showCustomDestination]);
-
   const modalContainer = document.getElementById(
     RANGO_SWAP_BOX_ID
   ) as HTMLDivElement;
@@ -274,7 +262,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
               type="primary"
               fullWidth
               size="large">
-              Confirm
+              {i18n.t('Confirm')}
             </Button>
           </ConfirmButton>
         ),
@@ -394,10 +382,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                   {!isLastWallet && <Divider size={32} />}
                   {isLastWallet && config?.customDestination && (
                     <CustomDestination>
-                      <CollapsibleRoot
-                        ref={customDestinationRef}
-                        selected={showCustomDestination}
-                        open={showCustomDestination}
+                      <CustomCollapsible
                         onOpenChange={(checked) => {
                           if (!checked) {
                             resetCustomDestination();
@@ -423,11 +408,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               );
                             }
                           }
-                        }}>
-                        <Trigger
-                          onClick={() =>
-                            setShowCustomDestination((prevState) => !prevState)
-                          }>
+                        }}
+                        hasSelected
+                        open={showCustomDestination}
+                        triggerAnchor="top"
+                        trigger={
                           <CustomDestinationButton
                             fullWidth
                             variant="default"
@@ -447,21 +432,21 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               </Typography>
                             </div>
                           </CustomDestinationButton>
-                        </Trigger>
-                        <CollapsibleContent open={showCustomDestination}>
-                          <>
-                            <Divider size={4} />
-                            <StyledTextField
-                              autoFocus
-                              placeholder={i18n.t('Your destination address')}
-                              value={destination}
-                              onChange={(e) => {
-                                setDestination(e.target.value);
-                              }}
-                            />
-                          </>
-                        </CollapsibleContent>
-                      </CollapsibleRoot>
+                        }
+                        onClickTrigger={() =>
+                          setShowCustomDestination((prev) => !prev)
+                        }>
+                        <Divider size={4} />
+                        <StyledTextField
+                          autoFocus
+                          placeholder={i18n.t('Your destination address')}
+                          value={destination}
+                          onChange={(e) => {
+                            setDestination(e.target.value);
+                          }}
+                        />
+                      </CustomCollapsible>
+
                       {isAddressMatched && (
                         <div className={alarmsStyles()}>
                           <Alert

package/src/components/CustomCollapsible/CustomCollapsible.styles.ts

@@ -0,0 +1,75 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const EXPANDABLE_TRANSITION_DURATION = 300;
+
+const slideDown = keyframes({
+  from: {
+    height: 0,
+  },
+  to: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  from: {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  to: {
+    height: 0,
+  },
+});
+
+export const CollapsibleRoot = styled(Collapsible.Root, {
+  borderRadius: '$sm',
+  variants: {
+    selected: {
+      true: {
+        outlineWidth: 1,
+        outlineColor: '$secondary500',
+        outlineStyle: 'solid',
+      },
+    },
+  },
+});
+
+export const Trigger = styled(Collapsible.Trigger, {
+  padding: '$0',
+  border: 'none',
+  outline: 'none',
+  width: '100%',
+  backgroundColor: 'transparent',
+  fontFamily: 'inherit',
+  cursor: 'pointer',
+});
+
+export const CollapsibleContent = styled(Collapsible.Content, {
+  overflow: 'hidden',
+  variants: {
+    open: {
+      true: {
+        animation: `${slideDown} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
+      },
+      false: {
+        animation: `${slideUp} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
+      },
+    },
+  },
+});
+
+export const ExpandedIcon = styled('div', {
+  transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
+  display: 'flex',
+  alignItems: 'center',
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});

package/src/components/CustomCollapsible/CustomCollapsible.tsx

@@ -0,0 +1,55 @@
+import type { PropTypes } from './CustomCollapsible.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { useLayoutEffect, useRef } from 'react';
+
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  EXPANDABLE_TRANSITION_DURATION,
+  Trigger,
+} from './CustomCollapsible.styles';
+
+export function CustomCollapsible(props: PropsWithChildren<PropTypes>) {
+  const {
+    open,
+    hasSelected,
+    onOpenChange,
+    children,
+    onClickTrigger,
+    trigger,
+    triggerAnchor,
+  } = props;
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (open && ref.current) {
+      setTimeout(() => {
+        ref?.current?.scrollIntoView({ behavior: 'smooth' });
+      }, EXPANDABLE_TRANSITION_DURATION);
+    }
+  }, [open]);
+
+  return (
+    <CollapsibleRoot
+      ref={ref}
+      className="collapsible_root"
+      selected={hasSelected && open}
+      open={open}
+      onOpenChange={onOpenChange}>
+      {triggerAnchor === 'top' && (
+        <Trigger className="collapsible_trigger" onClick={onClickTrigger}>
+          {trigger}
+        </Trigger>
+      )}
+      <CollapsibleContent className="collapsible_content" open={open}>
+        {children}
+      </CollapsibleContent>
+      {triggerAnchor === 'bottom' && (
+        <Trigger className="collapsible_trigger" onClick={onClickTrigger}>
+          {trigger}
+        </Trigger>
+      )}
+    </CollapsibleRoot>
+  );
+}

package/src/components/CustomCollapsible/CustomCollapsible.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type PropTypes = {
+  open: boolean;
+  hasSelected?: boolean;
+  onOpenChange?: (checked: boolean) => void;
+  onClickTrigger: () => void;
+  trigger: ReactNode;
+  triggerAnchor: 'top' | 'bottom';
+};

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -23,7 +23,10 @@ export const ConnectedIcon = styled('div', {
 export const SuffixContainer = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
-  width: '$40',
+  minWidth: '$40',
+  button: {
+    padding: 0,
+  },
 });
 
 export const NotificationsBadgeContainer = styled('div', {
@@ -38,3 +41,15 @@ export const NotificationsBadgeContainer = styled('div', {
   top: '$0',
   right: '$0',
 });
+
+export const ProgressIcon = styled('div', {
+  padding: '$2',
+  variants: {
+    isRefetched: {
+      true: {
+        transform: `rotate(360deg)`,
+        transition: 'transform 1s ease-in-out',
+      },
+    },
+  },
+});

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -4,9 +4,7 @@ export interface PropTypes {
   container?: HTMLElement;
 }
 export interface HomeButtonsPropTypes {
-  layoutRef: HTMLDivElement | null;
   onClickRefresh?: () => void;
   onClickHistory?: () => void;
   onClickSettings?: () => void;
-  onClickNotifications?: () => void;
 }

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -4,7 +4,6 @@ import { i18n } from '@lingui/core';
 import {
   NotificationsIcon,
   Popover,
-  RefreshIcon,
   SettingsIcon,
   Tooltip,
   TransactionIcon,
@@ -17,16 +16,11 @@ import { isFeatureHidden } from '../../utils/settings';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
+import { RefreshButton } from './RefreshButton';
 import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
 export function HomeButtons(props: HomeButtonsPropTypes) {
-  const {
-    layoutRef,
-    onClickRefresh,
-    onClickHistory,
-    onClickSettings,
-    onClickNotifications,
-  } = props;
+  const { onClickRefresh, onClickHistory, onClickSettings } = props;
 
   const {
     config: { features },
@@ -40,35 +34,27 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
         container={getContainer()}
         side="top"
         content={i18n.t('Refresh')}>
-        <HeaderButton
-          variant="ghost"
-          size="small"
-          onClick={onClickRefresh}
-          disabled={!onClickRefresh}>
-          <RefreshIcon size={16} color={!onClickRefresh ? 'gray' : 'black'} />
-        </HeaderButton>
+        <RefreshButton onClick={onClickRefresh} />
       </Tooltip>
 
       {!isNotificationsHidden && (
-        <Tooltip
+        <Popover
+          align="center"
+          collisionPadding={{ right: 20, left: 20 }}
           container={getContainer()}
-          side="top"
-          content={i18n.t('Notifications')}>
-          <Popover
-            align="center"
-            collisionBoundary={layoutRef}
-            collisionPadding={{ right: 20, left: 20 }}
-            container={getContainer()}
-            content={<NotificationContent />}>
-            <HeaderButton
-              size="small"
-              variant="ghost"
-              onClick={onClickNotifications}>
-              <NotificationsIcon size={18} color="black" />
-              <UnreadNotificationsBadge />
-            </HeaderButton>
-          </Popover>
-        </Tooltip>
+          content={<NotificationContent />}>
+          <div>
+            <Tooltip
+              container={getContainer()}
+              side="top"
+              content={i18n.t('Notifications')}>
+              <HeaderButton size="small" variant="ghost">
+                <NotificationsIcon size={18} color="black" />
+                <UnreadNotificationsBadge />
+              </HeaderButton>
+            </Tooltip>
+          </div>
+        </Popover>
       )}
       <Tooltip
         container={getContainer()}

package/src/components/HeaderButtons/RefreshButton.tsx

@@ -0,0 +1,81 @@
+import { RefreshProgressButton } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { HeaderButton, ProgressIcon } from './HeaderButtons.styles';
+
+const REFRESH_INTERVAL = 1000;
+const MAX_ELAPSED_TIME = 60;
+const MAX_PERCENTAGE = 100;
+
+function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [isRefetched, setIsRefetched] = useState(false);
+
+  const handleVisibilityChange = (interval?: number) => {
+    if (document.hidden && interval) {
+      // Tab is inactive, clear the interval
+      clearTimeout(interval);
+    }
+  };
+
+  useEffect(() => {
+    let interval: number | undefined;
+    if (onClick) {
+      interval = window.setInterval(() => {
+        setElapsedTime((prevTime) => prevTime + 1);
+
+        if (elapsedTime === MAX_ELAPSED_TIME) {
+          handleRefreshClick();
+        }
+      }, REFRESH_INTERVAL);
+    } else {
+      clearTimeout(interval);
+    }
+
+    document.addEventListener('visibilitychange', () =>
+      handleVisibilityChange(interval)
+    );
+
+    return () => {
+      document.removeEventListener('visibilitychange', () =>
+        handleVisibilityChange(interval)
+      );
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [elapsedTime, onClick]);
+
+  const clearTimeout = (interval?: number) => {
+    if (interval) {
+      clearInterval(interval);
+    }
+    setElapsedTime(0);
+  };
+
+  const handleRefreshClick = () => {
+    onClick?.();
+    setElapsedTime(0);
+    setIsRefetched(true);
+  };
+
+  return (
+    <HeaderButton
+      variant="ghost"
+      size="small"
+      onClick={handleRefreshClick}
+      disabled={!onClick}>
+      <ProgressIcon
+        onTransitionEnd={() => setIsRefetched(false)}
+        isRefetched={isRefetched}>
+        <RefreshProgressButton
+          size={24}
+          color={!onClick ? 'gray' : 'black'}
+          progress={(elapsedTime / MAX_ELAPSED_TIME) * MAX_PERCENTAGE}
+        />
+      </ProgressIcon>
+    </HeaderButton>
+  );
+}
+
+export { RefreshButton };

package/src/components/Layout/Layout.helpers.ts

@@ -0,0 +1,16 @@
+import { getContainer } from '../../utils/common';
+
+export function onScrollContentAttachStatusToContainer(e: Event) {
+  const contentElement = e.target as HTMLElement | null;
+
+  if (contentElement) {
+    const fromTop = contentElement.scrollTop;
+    const container = getContainer();
+
+    if (fromTop > 1) {
+      container.classList.add('rng-scrolled');
+    } else {
+      container.classList.remove('rng-scrolled');
+    }
+  }
+}

package/src/components/Layout/Layout.styles.ts

@@ -1,54 +1,40 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { styled } from '@rango-dev/ui';
 
+const WIDGET_HEIGHT = '700px';
 export const Container = styled('div', {
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '$primary',
-  overflow: 'hidden !important',
-  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
-  width: '100vw',
+  width: '100vh',
   minWidth: '300px',
   maxWidth: '390px',
-  maxHeight: '700px',
-  textAlign: 'left',
-  $$color: '$colors$neutral100',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral300',
-  },
-  backgroundColor: '$$color',
+  boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
+  overflow: 'hidden',
+  backgroundColor: '$background',
+
   variants: {
-    fixedHeight: {
-      true: {
-        height: '100vh',
+    height: {
+      auto: {
+        height: 'auto',
+        maxHeight: WIDGET_HEIGHT,
       },
-      false: {
-        height: 'auto !important',
+      fixed: {
+        height: WIDGET_HEIGHT,
       },
     },
   },
 });
 
 export const Content = styled('div', {
-  borderTopLeftRadius: '20px',
-  borderTopRightRadius: '20px',
+  position: 'relative',
+  overflow: 'hidden',
+  flexGrow: 1,
   display: 'flex',
   flexDirection: 'column',
-  flex: 1,
-  padding: '$20 $20 $10 $20',
-  backgroundColor: '$background',
-  position: 'relative',
+  padding: 0,
   overflowY: 'auto',
-  overflowX: 'hidden',
-  variants: {
-    noPadding: {
-      true: {
-        padding: '0',
-      },
-    },
-  },
 });
-
 export const Footer = styled('div', {
   backgroundColor: '$background',
   '& .footer__content': {

package/src/components/Layout/Layout.tsx

@@ -1,8 +1,8 @@
-import type { PropTypes, Ref } from './Layout.types';
+import type { PropTypes } from './Layout.types';
 import type { PropsWithChildren } from 'react';
 
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
@@ -14,17 +14,11 @@ import { getContainer } from '../../utils/common';
 import { isFeatureHidden } from '../../utils/settings';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
+import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import { Container, Content, Footer } from './Layout.styles';
 
-function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
-  const {
-    children,
-    header,
-    footer,
-    noPadding,
-    hasLogo = true,
-    fixedHeight = true,
-  } = props;
+function Layout(props: PropsWithChildren<PropTypes>) {
+  const { children, header, footer, hasLogo = true, height = 'fixed' } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
@@ -49,12 +43,24 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
   const showBackButton =
     typeof header.hasBackButton === 'undefined' || header.hasBackButton;
 
+  const scrollViewRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    scrollViewRef.current?.addEventListener(
+      'scroll',
+      onScrollContentAttachStatusToContainer
+    );
+
+    return () => {
+      scrollViewRef.current?.removeEventListener(
+        'scroll',
+        onScrollContentAttachStatusToContainer
+      );
+    };
+  }, []);
+
   return (
-    <Container
-      ref={ref}
-      fixedHeight={fixedHeight}
-      id={RANGO_SWAP_BOX_ID}
-      className={activeTheme()}>
+    <Container height={height} id={RANGO_SWAP_BOX_ID} className={activeTheme()}>
       <Header
         prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}
@@ -72,7 +78,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
           </>
         }
       />
-      <Content noPadding={noPadding}>{children}</Content>
+      <Content ref={scrollViewRef}>{children}</Content>
       {(hasLogo || footer) && (
         <Footer>
           <div className="footer__content">{footer}</div>
@@ -87,8 +93,4 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     </Container>
   );
 }
-
-const Layout = React.forwardRef(LayoutComponent);
-Layout.displayName = 'Layout';
-
 export { Layout };

package/src/components/Layout/Layout.types.ts

@@ -1,3 +1,11 @@
+import type { Container } from './Layout.styles';
+import type * as Stitches from '@stitches/react';
+
+type ContainerProps = Stitches.VariantProps<typeof Container>;
+type ContainerHeightProp = NonNullable<
+  Exclude<ContainerProps['height'], object>
+>;
+
 export interface PropTypes {
   header: {
     title: string;
@@ -9,12 +17,5 @@ export interface PropTypes {
   };
   hasLogo?: boolean;
   footer?: React.ReactNode;
-  noPadding?: boolean;
-  fixedHeight?: boolean;
+  height?: ContainerHeightProp;
 }
-
-export type Ref =
-  | ((instance: HTMLDivElement | null) => void)
-  | React.RefObject<HTMLDivElement>
-  | null
-  | undefined;