@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -7,18 +7,16 @@ import {
   Divider,
   Image,
   Skeleton,
-  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import React from 'react';
 
 import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
-import { useAppStore } from '../../store/AppStore';
-import { useQuoteStore } from '../../store/quote';
-import { getContainer } from '../../utils/common';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { useMetaStore } from '../../store/meta';
 
-import { Blockchains } from './BlockchainsSection.styles';
+import { Container } from './BlockchainsSection.styles';
 
 const NUMBER_OF_LOADING = 12;
 
@@ -29,9 +27,9 @@ export function BlockchainsSection(props: PropTypes) {
     selected: blockchain?.name,
   });
 
-  const { fetchStatus } = useAppStore();
-  const resetToBlockchain = useQuoteStore.use.resetToBlockchain();
-  const resetFromBlockchain = useQuoteStore.use.resetFromBlockchain();
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
+  const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
   const hasMoreItemsInList = blockchainsList.more.length > 0;
   /**
    * When only one item is left on list, we will not show the `More` button and will show the item itself instead.
@@ -40,18 +38,18 @@ export function BlockchainsSection(props: PropTypes) {
   const showMoreButton = !onlyOneItemInList && hasMoreItemsInList;
 
   return (
-    <>
+    <div>
       <Divider size={12} />
       <Typography variant="label" size="large">
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={12} />
-      <Blockchains>
-        {fetchStatus === 'loading' &&
+      <Container>
+        {loadingStatus === 'loading' &&
           Array.from(Array(NUMBER_OF_LOADING), (e) => (
             <Skeleton key={e} variant="rounded" height={50} />
           ))}
-        {fetchStatus === 'success' && (
+        {loadingStatus === 'success' && (
           <>
             <BlockchainsChip
               selected={!blockchain}
@@ -67,19 +65,12 @@ export function BlockchainsSection(props: PropTypes) {
               </Typography>
             </BlockchainsChip>
             {blockchainsList.list.map((item) => (
-              <Tooltip
+              <BlockchainsChip
                 key={item.name}
-                content={item.shortName}
-                side="bottom"
-                sideOffset={2}
-                container={getContainer()}>
-                <BlockchainsChip
-                  key={item.name}
-                  selected={!!blockchain && blockchain.name === item.name}
-                  onClick={() => onChange(item)}>
-                  <Image src={item.logo} size={30} />
-                </BlockchainsChip>
-              </Tooltip>
+                selected={!!blockchain && blockchain.name === item.name}
+                onClick={() => onChange(item)}>
+                <Image src={item.logo} size={30} />
+              </BlockchainsChip>
             ))}
 
             {onlyOneItemInList ? (
@@ -105,7 +96,7 @@ export function BlockchainsSection(props: PropTypes) {
             ) : null}
           </>
         )}
-      </Blockchains>
-    </>
+      </Container>
+    </div>
   );
 }

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

@@ -1,9 +1,71 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
 import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
 
-export function getRequiredWallets(quote: BestRouteResponse | null): string[] {
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getBlockchainShortNameFor } from '../../utils/meta';
+import { numberToString } from '../../utils/numbers';
+
+export function formatBestRoute(
+  bestRoute: BestRouteResponse,
+  blockchains: BlockchainMeta[]
+): Step[] | undefined {
+  return bestRoute.result?.swaps.map((swap) => {
+    return {
+      swapper: { displayName: swap.swapperId, image: swap.swapperLogo },
+      from: {
+        token: { displayName: swap.from.symbol, image: swap.from.logo },
+        chain: {
+          displayName:
+            getBlockchainShortNameFor(swap.from.blockchain, blockchains) ?? '',
+          image: swap.from.blockchainLogo,
+        },
+        price: {
+          value: numberToString(
+            swap.fromAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.from.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
+        },
+      },
+      to: {
+        token: { displayName: swap.to.symbol, image: swap.to.logo },
+        chain: {
+          displayName:
+            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
+          image: swap.to.blockchainLogo,
+        },
+        price: {
+          value: numberToString(
+            swap.toAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.to.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
+        },
+      },
+    };
+  });
+}
+
+export function getRequiredWallets(route: BestRouteResponse | null): string[] {
   const wallets: string[] = [];
 
-  quote?.result?.swaps.forEach((swap) => {
+  route?.result?.swaps.forEach((swap) => {
     const currentStepFromBlockchain = swap.from.blockchain;
     const currentStepToBlockchain = swap.to.blockchain;
     let lastAddedWallet = wallets[wallets.length - 1];

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

@@ -1,7 +1,6 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
-  css,
   darkTheme,
   IconButton,
   keyframes,
@@ -37,13 +36,10 @@ export const Title = styled('div', {
 });
 
 export const ListContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-evenly',
-  alignItems: 'center',
+  display: 'grid',
   gap: '$10',
-  flexWrap: 'wrap',
-  paddingTop: '$5',
-  height: '100%',
+  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
+  alignContent: 'baseline',
 });
 
 export const WalletButton = styled('button', {
@@ -88,12 +84,6 @@ export const WalletButton = styled('button', {
     },
   },
 });
-
-export const ShowMoreWallets = styled(WalletButton, {
-  alignSelf: 'stretch',
-  minHeight: '93px',
-});
-
 export const Trigger = styled(Collapsible.Trigger, {
   padding: '$0',
   border: 'none',
@@ -120,16 +110,12 @@ export const NavigateBack = styled(IconButton, {
 
 export const WalletsContainer = styled('div', {
   paddingTop: '$20',
-});
-
-export const walletsListStyles = css({
-  display: 'flex',
-  justifyContent: 'space-evenly',
-  alignItems: 'center',
-  gap: '$10',
-  flexWrap: 'wrap',
-  paddingTop: '$5',
-  height: '100%',
+  '& .wallets-list': {
+    display: 'grid',
+    gap: '$10',
+    gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
+    alignContent: 'baseline',
+  },
 });
 
 export const CollapsibleRoot = styled(Collapsible.Root, {
@@ -179,15 +165,12 @@ export const CustomDestination = styled('div', {
   padding: '$10 $0',
   '& .button__content': {
     display: 'flex',
+    justifyContent: 'center',
     alignItems: 'center',
   },
   '& .alarms': { paddingTop: '5px' },
 });
 
-export const alarmsStyles = css({
-  paddingTop: '5px',
-});
-
 export const ExpandedIcon = styled('div', {
   transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
   variants: {
@@ -207,12 +190,10 @@ export const ConfirmButton = styled('div', {
 });
 
 export const StyledTextField = styled(TextField, {
-  backgroundColor: '$neutral100',
   padding: '$0 $15 $15 $15',
 });
 
 export const CollapsibleContent = styled(Collapsible.Content, {
-  backgroundColor: '$neutral100',
   overflow: 'hidden',
   variants: {
     open: {

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,17 +18,16 @@ import {
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { getQuoteErrorMessage } from '../../constants/errors';
-import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
-import { useAppStore } from '../../store/AppStore';
-import { useQuoteStore } from '../../store/quote';
+import { getConfirmSwapErrorMessage } from '../../constants/errors';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { getRouteWarningMessage } from '../../constants/warnings';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { useMetaStore } from '../../store/meta';
 import { useWalletsStore } from '../../store/wallets';
-import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
 
 import { getRequiredWallets, isValidAddress } from './ConfirmWallets.helpers';
 import {
-  alarmsStyles,
   CollapsibleContent,
   CollapsibleRoot,
   ConfirmButton,
@@ -44,7 +43,6 @@ import {
   Trigger,
   Wallets,
   WalletsContainer,
-  walletsListStyles,
 } from './ConfirmWallets.styles';
 import { WalletList } from './WalletList';
 
@@ -52,24 +50,23 @@ const NUMBER_OF_WALLETS_TO_DISPLAY = 2;
 
 export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
-  const { open, onClose, onCancel, onCheckBalance, loading } = props;
-  const config = useAppStore().config;
-  const blockchains = useAppStore().blockchains();
+  const { open, onClose, onCancel, onCheckBalance, config, loading } = props;
+  const { blockchains } = useMetaStore.use.meta();
   const {
-    quote,
-    setSelectedWallets: selectQuoteWallets,
-    quoteWalletsConfirmed: quoteWalletsConfirmed,
-    setQuoteWalletConfirmed: setQuoteWalletConfirmed,
+    bestRoute,
+    setSelectedWallets: selectRouteWallets,
+    routeWalletsConfirmed,
+    setRouteWalletConfirmed,
     customDestination,
     setCustomDestination,
-  } = useQuoteStore();
+  } = useBestRouteStore();
   const { connectedWallets, selectWallets } = useWalletsStore();
 
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
   const [error, setError] = useState('');
-  const [quoteWarning, setQuoteWarning] = useState<
-    ConfirmSwapWarnings['quoteUpdate'] | null
+  const [routeWarning, setRouteWarning] = useState<
+    ConfirmSwapWarnings['route'] | null
   >(null);
   const [destination, setDestination] = useState(customDestination);
   const [showCustomDestination, setShowCustomDestination] = useState(
@@ -77,15 +74,22 @@ export function ConfirmWalletsModal(props: PropTypes) {
   );
   const customDestinationRef = useRef<HTMLDivElement | null>(null);
 
-  const requiredWallets = getRequiredWallets(quote);
+  const requiredWallets = getRequiredWallets(bestRoute);
+  const customDestinationEnabled =
+    typeof config?.customDestination === 'undefined'
+      ? true
+      : config.customDestination;
 
   const lastStepToBlockchain = blockchains.find(
     (blockchain) =>
       blockchain.name ===
-      quote?.result?.swaps[quote?.result?.swaps.length - 1].to.blockchain
+      bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to
+        .blockchain
   );
   const isWalletRequiredFor = (blockchain: string) =>
-    !!quote?.result?.swaps.find((swap) => swap.from.blockchain === blockchain);
+    !!bestRoute?.result?.swaps.find(
+      (swap) => swap.from.blockchain === blockchain
+    );
 
   const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
     connectedWallets.filter((connectedWallet) => {
@@ -171,16 +175,16 @@ export function ConfirmWalletsModal(props: PropTypes) {
       (wallet) => wallet.selected
     );
     selectWallets(lastSelectedWallets);
-    selectQuoteWallets(lastSelectedWallets);
+    selectRouteWallets(lastSelectedWallets);
     setCustomDestination(destination);
-    setQuoteWalletConfirmed(true);
+    setRouteWalletConfirmed(true);
     onClose();
   };
 
   const onConfirmWallets = async () => {
     setBalanceWarnings([]);
     setError('');
-    setQuoteWarning(null);
+    setRouteWarning(null);
     const selectedWallets = connectedWallets.filter((connectedWallet) =>
       selectableWallets.find(
         (selectableWallet) =>
@@ -197,11 +201,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
     if (warnings?.balance?.messages) {
       setBalanceWarnings(warnings.balance.messages);
     }
-    if (warnings?.quoteUpdate) {
-      setQuoteWarning(warnings.quoteUpdate);
+    if (warnings?.route) {
+      setRouteWarning(warnings.route);
     }
     if (result.error) {
-      setError(getQuoteErrorMessage(result.error));
+      setError(getConfirmSwapErrorMessage(result.error));
     }
 
     if (!result.error && (!warnings?.balance?.messages.length || 0 > 0)) {
@@ -245,9 +249,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
     <Modal
       open={open}
       onClose={() => {
-        if (!quoteWalletsConfirmed) {
-          const home = '../';
-          navigate(home, { replace: true });
+        if (!routeWalletsConfirmed) {
+          navigate(navigationRoutes.home, { replace: true });
         }
         onClose();
       }}
@@ -262,7 +265,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                 loading,
                 showCustomDestination,
                 destination,
-                quote,
+                bestRoute,
                 selectableWallets,
                 lastStepToBlockchain
               )}
@@ -288,12 +291,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
             <Typography variant="headline" size="small">
               {i18n.t({
                 id: 'Your {blockchainName} wallets',
-                values: {
-                  blockchainName: getBlockchainShortNameFor(
-                    showMoreWalletFor,
-                    blockchains
-                  ),
-                },
+                values: { blockchainName: showMoreWalletFor },
               })}
             </Typography>
           </ShowMoreHeader>
@@ -320,11 +318,14 @@ export function ConfirmWalletsModal(props: PropTypes) {
       </Modal>
       {showMoreWalletFor && (
         <WalletsContainer>
-          <div className={walletsListStyles()}>
+          <div className="wallets-list">
             <WalletList
               chain={showMoreWalletFor}
               isSelected={isSelected}
               selectWallet={onChange}
+              multiWallets={config?.multiWallets ?? true}
+              supportedWallets={config?.wallets ?? []}
+              config={config}
               onShowMore={setShowMoreWalletFor.bind(null, showMoreWalletFor)}
             />
           </div>
@@ -338,12 +339,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
               <Divider size={12} />
             </>
           )}
-          {quoteWarning && (
+          {routeWarning && (
             <>
               <Alert
                 variant="alarm"
                 type="warning"
-                title={getQuoteUpdateWarningMessage(quoteWarning)}
+                title={getRouteWarningMessage(routeWarning)}
               />
               <Divider size={12} />
             </>
@@ -363,7 +364,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     <Typography variant="title" size="xmedium">
                       {i18n.t({
                         id: 'Your {blockchainName} wallets',
-                        values: { blockchainName: blockchain?.shortName },
+                        values: { blockchainName: blockchain?.displayName },
                       })}
                     </Typography>
                     <Typography
@@ -372,7 +373,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       size="medium">
                       {i18n.t({
                         id: 'You need to connect a {blockchainName} wallet.',
-                        values: { blockchainName: blockchain?.shortName },
+                        values: { blockchainName: blockchain?.displayName },
                       })}
                     </Typography>
                   </Title>
@@ -382,6 +383,9 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       chain={requiredWallet}
                       isSelected={isSelected}
                       selectWallet={onChange}
+                      multiWallets={config?.multiWallets ?? true}
+                      supportedWallets={config?.wallets ?? []}
+                      config={config}
                       limit={NUMBER_OF_WALLETS_TO_DISPLAY}
                       onShowMore={() =>
                         setShowMoreWalletFor(blockchain?.name ?? '')
@@ -389,7 +393,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
-                  {isLastWallet && config?.customDestination && (
+                  {isLastWallet && customDestinationEnabled && (
                     <CustomDestination>
                       <CollapsibleRoot
                         ref={customDestinationRef}
@@ -460,7 +464,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                         </CollapsibleContent>
                       </CollapsibleRoot>
                       {isAddressMatched && (
-                        <div className={alarmsStyles()}>
+                        <div className="alarms">
                           <Alert
                             variant="alarm"
                             type="error"

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.types.ts

@@ -1,9 +1,11 @@
-import type { ConfirmSwap } from '../../hooks/useConfirmSwap/useConfirmSwap.types';
+import type { WidgetConfig } from '../..';
+import type { ConfirmSwap } from '../../hooks/useConfirmSwap';
 
 export type PropTypes = {
   open: boolean;
   onClose: () => void;
   onCancel: () => void;
   onCheckBalance: ConfirmSwap['fetch'];
+  config?: WidgetConfig;
   loading: boolean;
 };

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -23,7 +23,7 @@ import {
   TIME_TO_CLOSE_MODAL,
   TIME_TO_IGNORE_MODAL,
 } from '../../pages/WalletsPage';
-import { useAppStore } from '../../store/AppStore';
+import { useMetaStore } from '../../store/meta';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
@@ -33,7 +33,7 @@ import {
 } from '../../utils/wallets';
 import { WalletModal } from '../WalletModal';
 
-import { ShowMoreWallets } from './ConfirmWallets.styles';
+import { WalletButton } from './ConfirmWallets.styles';
 import {
   LogoContainer,
   Spinner,
@@ -41,11 +41,10 @@ import {
 } from './WalletList.styles';
 
 export function WalletList(props: PropTypes) {
-  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
-  const { config } = useAppStore();
+  const { config, chain, isSelected, selectWallet, limit, onShowMore } = props;
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const { blockchains } = useAppStore();
+  const { blockchains } = useMetaStore.use.meta();
   const [openWalletStateModal, setOpenWalletStateModal] =
     useState<WalletType>('');
   const [experimentalChainWallet, setExperimentalChainWallet] =
@@ -138,7 +137,7 @@ export function WalletList(props: PropTypes) {
         });
         const conciseAddress = address ? getConciseAddress(address) : '';
 
-        const experimentalChain = isExperimentalChain(blockchains(), chain);
+        const experimentalChain = isExperimentalChain(blockchains, chain);
 
         const experimentalChainNotAdded = !connectedWallets.find(
           (connectedWallet) =>
@@ -181,7 +180,7 @@ export function WalletList(props: PropTypes) {
           experimentalChainWallet?.chain
             ? getBlockchainDisplayNameFor(
                 experimentalChainWallet.chain,
-                blockchains()
+                blockchains
               )
             : undefined;
         return (
@@ -292,14 +291,14 @@ export function WalletList(props: PropTypes) {
         );
       })}
       {shouldShowMoreWallets && (
-        <ShowMoreWallets selected={false} onClick={onShowMore}>
+        <WalletButton selected={false} onClick={onShowMore.bind(null)}>
           <Typography variant="label" size="medium">
             {i18n.t('Show more wallets')}
             <Typography variant="label" size="medium" color="$primary">
               &nbsp;+{numberOfSupportedWallets - (limit ?? 0)}
             </Typography>
           </Typography>
-        </ShowMoreWallets>
+        </WalletButton>
       )}
     </>
   );

package/src/components/ConfirmWalletsModal/WalletList.type.ts

@@ -1,9 +1,12 @@
-import type { Wallet } from '../../types';
+import type { Wallet, WidgetConfig } from '../../types';
 
 export type PropTypes = {
   chain: string;
+  supportedWallets: WidgetConfig['wallets'];
   isSelected: (walletType: string, chain: string) => boolean;
   selectWallet: (wallet: Wallet) => void;
+  multiWallets: boolean;
+  config?: WidgetConfig;
   limit?: number;
   onShowMore: () => void;
 };

package/src/components/HeaderButtons/HomeButtons.tsx

@@ -11,9 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
-import { isFeatureHidden } from '../../utils/settings';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
@@ -28,12 +26,6 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
     onClickNotifications,
   } = props;
 
-  const {
-    config: { features },
-  } = useAppStore();
-
-  const isNotificationsHidden = isFeatureHidden('notification', features);
-
   return (
     <>
       <Tooltip
@@ -49,27 +41,25 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
         </HeaderButton>
       </Tooltip>
 
-      {!isNotificationsHidden && (
-        <Tooltip
+      <Tooltip
+        container={getContainer()}
+        side="top"
+        content={i18n.t('Notifications')}>
+        <Popover
+          align="center"
+          collisionBoundary={layoutRef}
+          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 />}>
+          <HeaderButton
+            size="small"
+            variant="ghost"
+            onClick={onClickNotifications}>
+            <NotificationsIcon size={18} color="black" />
+            <UnreadNotificationsBadge />
+          </HeaderButton>
+        </Popover>
+      </Tooltip>
       <Tooltip
         container={getContainer()}
         side="top"

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

@@ -8,10 +8,8 @@ export const Container = styled('div', {
   overflow: 'hidden !important',
   boxShadow: '15px 15px 15px 0px rgba(0, 0, 0, 0.05)',
   width: '95vw',
-  minWidth: '300px',
   maxWidth: '390px',
   maxHeight: '700px',
-  textAlign: 'left',
   $$color: '$colors$neutral100',
   [`.${darkTheme} &`]: {
     $$color: '$colors$neutral300',