@rango-dev/widget-embedded 0.36.1-next.2 → 0.36.1-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.2",
+  "version": "0.36.1-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.1",
     "@rango-dev/queue-manager-react": "^0.27.0",
     "@rango-dev/signer-solana": "^0.35.0",
-    "@rango-dev/ui": "^0.42.1-next.1",
+    "@rango-dev/ui": "^0.42.1-next.2",
     "@rango-dev/wallets-core": "^0.40.1-next.1",
     "@rango-dev/wallets-react": "^0.26.1-next.1",
     "@rango-dev/wallets-shared": "^0.40.1-next.1",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Quote/Quote.tsx

@@ -329,7 +329,17 @@ export function Quote(props: QuoteProps) {
       tooltipContainer={getExpanded()}
       steps={steps}
       tags={sortedQuoteTags}
-      feeWarning={feeWarning}
+      quoteCost={
+        <QuoteCostDetails
+          quote={quote}
+          fullExpandedMode
+          time={totalTime}
+          fee={fee}
+          feeWarning={feeWarning}
+          showModalFee={showModalFee}
+          steps={numberOfSteps}
+        />
+      }
       percentageChange={percentageChange}
       warningLevel={priceImpactWarningLevel}
       outputPrice={{

package/src/components/Quote/Quote.types.ts

@@ -49,4 +49,5 @@ export type QuoteCostDetailsProps = {
   time: string;
   feeWarning?: boolean;
   showModalFee: boolean;
+  fullExpandedMode?: boolean;
 };

package/src/components/Quote/QuoteCostDetails.styles.ts

@@ -28,7 +28,6 @@ export const ModalContainer = styled('div', {
 
 export const ModalHeader = styled('div', {
   padding: '$20 $20 $10',
-  textAlign: 'center',
   position: 'relative',
   '._icon-button': {
     position: 'absolute',

package/src/components/Quote/QuoteCostDetails.tsx

@@ -21,7 +21,7 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { getContainer } from '../../utils/common';
+import { getContainer, getExpanded } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
 import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
@@ -57,9 +57,17 @@ const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
 export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const [open, setOpen] = useState<boolean>(false);
   const [openCollapse, setOpenCollapse] = useState<boolean>(false);
-  const { steps, quote, fee, time, feeWarning, showModalFee } = props;
+  const {
+    steps,
+    quote,
+    fee,
+    time,
+    feeWarning,
+    showModalFee,
+    fullExpandedMode = false,
+  } = props;
   const swaps = quote?.swaps ?? [];
-  const container = getContainer();
+  const container = fullExpandedMode ? getExpanded() : getContainer();
 
   const feesGroup = getFeesGroup(swaps);
 
@@ -85,8 +93,17 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
       <WatermarkedModal
         container={container}
         open={open}
+        anchor={fullExpandedMode ? 'center' : 'bottom'}
+        styles={{
+          container: {
+            maxWidth: fullExpandedMode ? '484px' : 'unset',
+          },
+        }}
         header={
-          <ModalHeader>
+          <ModalHeader
+            style={{
+              textAlign: fullExpandedMode ? 'left' : 'center',
+            }}>
             <Typography variant="title" size="medium">
               {i18n.t('Gas & Fee Explanation')}
             </Typography>

package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -4,6 +4,7 @@ export const Container = styled('div', {
   transition: 'width 0.2s, opacity 0.2s, margin-left 0.2s',
   height: '700px',
   width: '390px',
+  position: 'relative',
   opacity: 1,
   marginLeft: '$16',
   backgroundColor: '$neutral100',

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -64,7 +64,7 @@ export function ExpandedQuotes(props: PropTypes) {
       />
       <Content>
         <Quotes
-          showModalFee={false}
+          showModalFee={true}
           fetch={fetch}
           hasSort={false}
           loading={loading}