@rango-dev/widget-embedded 0.23.1-next.12 → 0.23.1-next.13

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -9,6 +9,7 @@ import { LayoutContainer } from '../../components/Layout/Layout.styles';
 import { Quotes } from '../../components/Quotes';
 import { SelectStrategy } from '../../components/Quotes/SelectStrategy';
 import { WIDGET_UI_ID } from '../../constants';
+import { useAppStore } from '../../store/AppStore';
 import { getExpanded } from '../../utils/common';
 
 import { Container, Content } from './ExpandedQuotes.styles';
@@ -19,6 +20,8 @@ export function ExpandedQuotes(props: PropTypes) {
   const { fetch, loading, onClickOnQuote, onClickRefresh, isVisible } = props;
   const [isDelayedVisible, setIsDelayedVisible] = useState(false);
   const containerClass = isDelayedVisible ? '' : 'is-hidden';
+  const { config } = useAppStore();
+  const fullExpandedMode = config?.variant === 'full-expanded';
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | null = null;
@@ -43,6 +46,7 @@ export function ExpandedQuotes(props: PropTypes) {
 
   return (
     <Container
+      expandMode={config?.variant === 'full-expanded' ? 'full' : 'default'}
       className={`${containerClass} ${LayoutContainer()}`}
       id={WIDGET_UI_ID.EXPANDED_BOX_ID}>
       <Header
@@ -64,6 +68,7 @@ export function ExpandedQuotes(props: PropTypes) {
           hasSort={false}
           loading={loading}
           onClickOnQuote={onClickOnQuote}
+          fullExpandedMode={fullExpandedMode}
         />
       </Content>
     </Container>

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -25,6 +25,7 @@ export function QuoteInfo(props: PropTypes) {
     showModalFee,
     selected,
     onClickAllRoutes,
+    fullExpandedMode = false,
   } = props;
   const { inputAmount, inputUsdValue, toToken } = useQuoteStore();
 
@@ -65,6 +66,7 @@ export function QuoteInfo(props: PropTypes) {
         type={type}
         expanded={expanded}
         onClickAllRoutes={onClickAllRoutes}
+        fullExpandedMode={fullExpandedMode}
         input={{
           value: inputAmount,
           usdValue: inputUsdValue?.toString() ?? '',

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -14,4 +14,5 @@ export type PropTypes = {
   onClickAllRoutes?: () => void;
   selected?: boolean;
   showModalFee?: boolean;
+  fullExpandedMode?: boolean;
 };

package/src/pages/Home.tsx

@@ -16,6 +16,7 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
+import { isVarianExpandable } from '../utils/configs';
 import { getSwapButtonState } from '../utils/swap';
 
 const MainContainer = styled('div', {
@@ -67,7 +68,7 @@ export function Home() {
     warning: quoteWarning,
     needsToWarnEthOnPath,
   });
-  const isExpandable = config?.variant === 'expandable' && !isMobile;
+  const isExpandable = isVarianExpandable(config?.variant) && !isMobile;
   const hasInputs =
     !!inputAmount && !!fromToken && !!toToken && inputAmount !== '0';
   const fetchingQuote = hasInputs && fetchMetaStatus === 'success' && loading;

package/src/types/config.ts

@@ -3,7 +3,7 @@ import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
 
-export type WidgetVariant = 'default' | 'expandable';
+export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
 
 /**
  * The above type defines a set of optional color properties for a widget.
@@ -182,7 +182,8 @@ export type Features = Partial<
  *   - 'language': Visibility state for the language.
  *   - 'experimentalRoute': Enablement state for the experimental route.
  * @property {WidgetVariant} variant
- *   If it is expandable, multiple routes will show up on the home page;
+ *   If it is expanded, multiple routes will show up on the home page;
+ *   If it is full-expanded, multiple routes will show up on the home page with full routes;
  *   if not, you will need to go to a different page to see the suggested routes.
  */
 

package/src/utils/configs.ts

@@ -1,4 +1,4 @@
-import type { Tokens } from '../types';
+import type { Tokens, WidgetVariant } from '../types';
 import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
 import { RANGO_PUBLIC_API_KEY } from '../constants';
@@ -79,3 +79,7 @@ export const isBlockchainExcludedInConfig = (
     !blockchainsConfig.includes(blockchain.name)
   );
 };
+
+export const isVarianExpandable = (variant?: WidgetVariant) => {
+  return variant === 'expanded' || variant === 'full-expanded';
+};