@rango-dev/widget-embedded 0.20.1-next.9 → 0.21.0

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -1,34 +1,12 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
   css,
   darkTheme,
   IconButton,
-  keyframes,
   styled,
   TextField,
 } 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 Title = styled('div', {
   display: 'flex',
   flexDirection: 'column',
@@ -93,16 +71,6 @@ export const ShowMoreWallets = styled(WalletButton, {
   alignSelf: 'stretch',
   minHeight: '93px',
 });
-
-export const Trigger = styled(Collapsible.Trigger, {
-  padding: '$0',
-  border: 'none',
-  outline: 'none',
-  width: '100%',
-  backgroundColor: 'transparent',
-  fontFamily: 'inherit',
-});
-
 export const ShowMoreHeader = styled('div', {
   padding: '$20',
   display: 'flex',
@@ -132,20 +100,36 @@ export const walletsListStyles = css({
   height: '100%',
 });
 
-export const CollapsibleRoot = styled(Collapsible.Root, {
-  backgroundColor: '$neutral200',
-  borderRadius: '$sm',
-  variants: {
-    selected: {
-      true: {
-        outlineWidth: 1,
-        outlineColor: '$secondary500',
-        outlineStyle: 'solid',
-      },
-    },
+export const CustomDestination = styled('div', {
+  padding: '$10 $0',
+  '& .button__content': {
+    display: 'flex',
+    alignItems: 'center',
   },
+  '& .alarms': { paddingTop: '$5' },
+  '& .collapsible_content': {
+    backgroundColor: '$neutral100',
+  },
+  '& .collapsible_root': {
+    backgroundColor: '$neutral200',
+  },
+});
+
+export const alarmsStyles = css({
+  paddingTop: '$5',
+});
+
+export const ConfirmButton = styled('div', {
+  display: 'flex',
+});
+
+export const StyledTextField = styled(TextField, {
+  backgroundColor: '$neutral100',
+  padding: '$0 $15 $15 $15',
 });
 
+export const Wallets = styled('div', { overflow: 'visible', width: '100%' });
+
 export const CustomDestinationButton = styled(Button, {
   width: '100%',
   borderRadius: '$sm !important',
@@ -174,56 +158,3 @@ export const CustomDestinationButton = styled(Button, {
     outline: 0,
   },
 });
-
-export const CustomDestination = styled('div', {
-  padding: '$10 $0',
-  '& .button__content': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .alarms': { paddingTop: '5px' },
-});
-
-export const alarmsStyles = css({
-  paddingTop: '5px',
-});
-
-export const ExpandedIcon = styled('div', {
-  transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
-  variants: {
-    orientation: {
-      down: {
-        transform: 'rotate(0)',
-      },
-      up: {
-        transform: 'rotate(180deg)',
-      },
-    },
-  },
-});
-
-export const ConfirmButton = styled('div', {
-  display: 'flex',
-});
-
-export const StyledTextField = styled(TextField, {
-  backgroundColor: '$neutral100',
-  padding: '$0 $15 $15 $15',
-});
-
-export const CollapsibleContent = styled(Collapsible.Content, {
-  backgroundColor: '$neutral100',
-  overflow: 'hidden',
-  variants: {
-    open: {
-      true: {
-        animation: `${slideDown} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
-      },
-      false: {
-        animation: `${slideUp} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
-      },
-    },
-  },
-});
-
-export const Wallets = styled('div', { overflow: 'visible', width: '100%' });

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;
@@ -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/ConfirmWalletsModal/WalletList.tsx

@@ -25,6 +25,7 @@ import {
   TIME_TO_IGNORE_MODAL,
 } from '../../pages/WalletsPage';
 import { useAppStore } from '../../store/AppStore';
+import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
@@ -44,6 +45,7 @@ import {
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const { config } = useAppStore();
+  const isActiveTab = useUiStore.use.isActiveTab();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const { blockchains } = useAppStore();
@@ -289,6 +291,7 @@ export function WalletList(props: PropTypes) {
               description={connectedWalletDescription}
               onClick={onClick}
               selected={isSelected(wallet.type, chain)}
+              disabled={!isActiveTab}
               {...wallet}
             />
           </>

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.types.ts

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

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -20,7 +20,7 @@ import { RefreshButton } from './RefreshButton';
 import { UnreadNotificationsBadge } from './UnreadNotificationsBadge';
 
 export function HomeButtons(props: HomeButtonsPropTypes) {
-  const { layoutRef, onClickRefresh, onClickHistory, onClickSettings } = props;
+  const { onClickRefresh, onClickHistory, onClickSettings } = props;
 
   const {
     config: { features },
@@ -40,7 +40,6 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
       {!isNotificationsHidden && (
         <Popover
           align="center"
-          collisionBoundary={layoutRef}
           collisionPadding={{ right: 20, left: 20 }}
           container={getContainer()}
           content={<NotificationContent />}>

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': {