@rango-dev/widget-embedded 0.25.1-next.2 → 0.25.1-next.4

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBAuU9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAiD5E,wBAAgB,eAAe,sBA2T9B"}

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBAyMnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBA0MnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.25.1-next.2",
+  "version": "0.25.1-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,13 +25,13 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.2.0",
-    "@rango-dev/provider-all": "^0.30.1-next.1",
+    "@rango-dev/provider-all": "^0.30.1-next.3",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.30.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.30.1-next.1",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.31.0",
-    "@rango-dev/wallets-react": "^0.16.0",
-    "@rango-dev/wallets-shared": "^0.30.0",
+    "@rango-dev/ui": "^0.31.1-next.0",
+    "@rango-dev/wallets-react": "^0.16.1-next.0",
+    "@rango-dev/wallets-shared": "^0.30.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

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

@@ -104,7 +104,7 @@ export const CustomDestination = styled('div', {
     backgroundColor: '$neutral100',
   },
   '& .collapsible_root': {
-    backgroundColor: '$neutral200',
+    backgroundColor: '$neutral100',
   },
 });
 
@@ -135,7 +135,8 @@ export const CustomDestinationButton = styled('div', {
     $$color: '$colors$neutral300',
   },
   backgroundColor: '$$color',
-
+  borderBottomRightRadius: '0',
+  borderBottomLeftRadius: '0',
   '&:hover': {
     $$color: '$colors$info100',
     [`.${darkTheme} &`]: {

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

@@ -23,6 +23,7 @@ const slideUp = keyframes({
 
 export const CollapsibleRoot = styled(Collapsible.Root, {
   borderRadius: '$sm',
+  overflow: 'hidden',
   variants: {
     selected: {
       true: {

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -17,6 +17,7 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
   const {
     warning,
     error,
+    couldChangeSettings,
     showWarningModal,
     confirmationDisabled,
     refetchQuote,
@@ -44,6 +45,9 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
       ? error
       : null
   );
+  if (alertInfo && !couldChangeSettings) {
+    alertInfo.action = null;
+  }
 
   const showAlerts = !!alertInfo;
 

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -5,6 +5,7 @@ export interface PropTypes {
   warning: QuoteWarning | null;
   showWarningModal: boolean;
   confirmationDisabled: boolean;
+  couldChangeSettings: boolean;
   refetchQuote: () => void;
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;

package/src/components/RefreshModal/RefreshModal.tsx

@@ -19,9 +19,9 @@ export function RefreshModal(props: PropTypes) {
       onClose={onClose}
       container={getContainer()}>
       <MessageBox
-        title={i18n.t('Something wrong')}
+        title={i18n.t('Something went wrong')}
         type="error"
-        description={i18n.t('Something Wrong. Please refresh the app')}>
+        description={i18n.t('Something went wrong. Please refresh the app.')}>
         <Divider size={30} />
         <RefreshButton
           variant="outlined"

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -92,5 +92,5 @@ export const ErrorMessages = styled('div', {
   gap: '$5',
 });
 export const MessageText = styled(Typography, {
-  wordBreak: 'break-all',
+  wordBreak: 'break-word',
 });

package/src/components/SwapDetails/SwapDetails.tsx

@@ -253,13 +253,15 @@ export function SwapDetails(props: SwapDetailsProps) {
               })}`
             : ''}
         </Typography>
-        <MessageText
-          align="center"
-          variant="body"
-          size="medium"
-          color="neutral700">
-          {stepDetailMessage}
-        </MessageText>
+        {stepDetailMessage && (
+          <MessageText
+            align="center"
+            variant="body"
+            size="medium"
+            color="neutral700">
+            <b>Reason:</b> {stepDetailMessage}
+          </MessageText>
+        )}
       </ErrorMessages>
     );
 

package/src/components/TokenList/TokenList.styles.ts

@@ -30,6 +30,7 @@ export const tokenTitleStyles = css({
 export const tokenAddressStyles = css({
   transform: 'translateY(12px)',
   visibility: 'hidden',
+  display: 'flex',
   '& a': {
     display: 'flex',
     justifyContent: 'center',
@@ -157,3 +158,9 @@ export const TokenBalance = styled(Typography, {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
 });
+
+export const StyledLink = styled('a', {
+  '& svg:hover': {
+    color: '$colors$info',
+  },
+});

package/src/components/TokenList/TokenList.tsx

@@ -31,6 +31,7 @@ import {
   ImageSection,
   List,
   Pin,
+  StyledLink,
   Tag,
   TagTitle,
   Title,
@@ -72,17 +73,17 @@ const renderDesc = (props: RenderDescProps) => {
           className={`${tokenAddressStyles()} ${
             !name && tokenWithoutNameStyles()
           }`}>
-          <a
+          {length > 10
+            ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
+            : address}{' '}
+          <Divider size={4} direction="horizontal" />
+          <StyledLink
             href={url}
             target="_blank"
             rel="nofollow noreferrer"
             onClick={(e) => e.stopPropagation()}>
-            {length > 10
-              ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
-              : address}{' '}
-            <Divider size={4} direction="horizontal" />
-            <ExternalLinkIcon color="gray" size={12} />
-          </a>
+            <ExternalLinkIcon size={12} />
+          </StyledLink>
         </div>
       )}
     </div>
@@ -164,6 +165,7 @@ export function TokenList(props: PropTypes) {
                 style={{
                   width: '100%',
                   overflow: 'hidden',
+                  height: '60px',
                 }}
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}

package/src/pages/ConfirmSwapPage.tsx

@@ -12,9 +12,7 @@ import {
   css,
   Divider,
   IconButton,
-  SettingsIcon,
   styled,
-  Tooltip,
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
@@ -24,7 +22,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
-import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
 import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
@@ -37,7 +34,6 @@ import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { QuoteWarningType } from '../types';
-import { getContainer } from '../utils/common';
 import { joinList } from '../utils/ui';
 
 const Buttons = styled('div', {
@@ -285,6 +281,7 @@ export function ConfirmSwapPage() {
       <QuoteWarningsAndErrors
         warning={quoteWarning}
         error={quoteError}
+        couldChangeSettings={false}
         refetchQuote={onRefresh}
         showWarningModal={showQuoteWarningModal}
         confirmationDisabled={!isActiveTab}
@@ -307,19 +304,6 @@ export function ConfirmSwapPage() {
           const wallets_url = `../${navigationRoutes.wallets}`;
           navigate(wallets_url);
         },
-        suffix: (
-          <Tooltip
-            container={getContainer()}
-            side="bottom"
-            content={i18n.t('Settings')}>
-            <HeaderButton
-              size="small"
-              variant="ghost"
-              onClick={() => navigate('../' + navigationRoutes.settings)}>
-              <SettingsIcon size={18} color="black" />
-            </HeaderButton>
-          </Tooltip>
-        ),
       }}
       footer={
         <Buttons>

package/src/pages/Home.tsx

@@ -205,6 +205,7 @@ export function Home() {
               <QuoteWarningsAndErrors
                 warning={quoteWarning}
                 error={quoteError}
+                couldChangeSettings={true}
                 refetchQuote={fetchQuote}
                 showWarningModal={showQuoteWarningModal}
                 confirmationDisabled={!isActiveTab}