@rango-dev/widget-embedded 0.35.1-next.3 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.35.1-next.3",
+  "version": "0.36.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.39.1-next.1",
+    "@rango-dev/provider-all": "^0.40.0",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.39.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.40.0",
     "@rango-dev/queue-manager-react": "^0.27.0",
-    "@rango-dev/signer-solana": "^0.34.1-next.0",
-    "@rango-dev/ui": "^0.41.0",
+    "@rango-dev/signer-solana": "^0.35.0",
+    "@rango-dev/ui": "^0.42.0",
     "@rango-dev/wallets-core": "^0.40.0",
-    "@rango-dev/wallets-react": "^0.25.0",
-    "@rango-dev/wallets-shared": "^0.39.0",
+    "@rango-dev/wallets-react": "^0.26.0",
+    "@rango-dev/wallets-shared": "^0.40.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/components/NoResult/NoResult.helpers.ts

@@ -1,13 +1,10 @@
 import type { Info } from './NoResult.types';
+import type { NoResultError, QuoteRequestFailed } from '../../types';
 
 import { i18n } from '@lingui/core';
 
 import { errorMessages } from '../../constants/errors';
-import {
-  type NoResultError,
-  QuoteErrorType,
-  type QuoteRequestFailed,
-} from '../../types';
+import { QuoteErrorType } from '../../types';
 
 const SMALL_NO_ROUTE__ICON_SIZE = 24;
 const LARGE_NO_ROUTE_ICON_SIZE = 60;

package/src/components/SameTokensWarning/SameTokensWarning.styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});

package/src/components/SameTokensWarning/SameTokensWarning.tsx

@@ -0,0 +1,31 @@
+import { i18n } from '@lingui/core';
+import { Alert, Divider, NoRouteIcon, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useQuoteStore } from '../../store/quote';
+import { areTokensEqual } from '../../utils/wallets';
+
+import { Container } from './SameTokensWarning.styles';
+
+export function SameTokensWarning() {
+  const { fromToken, toToken } = useQuoteStore();
+  const showWarningMessage =
+    !!fromToken && !!toToken && areTokensEqual(fromToken, toToken);
+
+  return showWarningMessage ? (
+    <Container>
+      <Divider size={10} />
+      <NoRouteIcon size={24} color="gray" />
+      <Divider size={4} />
+      <Typography variant="title" size={'small'}>
+        {i18n.t('No Routes Found')}
+      </Typography>
+      <Divider size={4} />
+      <Alert
+        title={i18n.t('You cannot use the same token for From and To.')}
+        type={'warning'}
+        variant="alarm"
+      />
+    </Container>
+  ) : null;
+}

package/src/components/SameTokensWarning/index.ts

@@ -0,0 +1 @@
+export { SameTokensWarning } from './SameTokensWarning';

package/src/containers/Wallets/Wallets.tsx

@@ -44,6 +44,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: config?.walletConnectProjectId,
     trezorManifest: config?.trezorManifest,
+    tonConnect: config.tonConnect,
     walletConnectListedDesktopWalletLink:
       props.config.__UNSTABLE_OR_INTERNAL__
         ?.walletConnectListedDesktopWalletLink,

package/src/hooks/useWalletList.ts

@@ -56,6 +56,7 @@ export function useWalletList(params?: Params): API {
       walletConnectProjectId: config?.walletConnectProjectId,
       walletConnectListedDesktopWalletLink:
         config.__UNSTABLE_OR_INTERNAL__?.walletConnectListedDesktopWalletLink,
+      tonConnect: config.tonConnect,
     }) || ALL_SUPPORTED_WALLETS;
 
   let wallets = mapWalletTypesToWalletInfo(

package/src/pages/Home.tsx

@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import { HeaderButtons } from '../components/HeaderButtons';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
+import { SameTokensWarning } from '../components/SameTokensWarning';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { ExpandedQuotes } from '../containers/ExpandedQuotes';
 import { Inputs } from '../containers/Inputs';
@@ -123,6 +124,7 @@ export function Home() {
       setSelectedQuote(quote);
     }
   };
+
   return (
     <MainContainer>
       <Layout
@@ -226,6 +228,7 @@ export function Home() {
               />
             </>
           ) : null}
+          <SameTokensWarning />
         </PageContainer>
       </Layout>
       {isExpandable ? (

package/src/store/slices/config.ts

@@ -17,6 +17,10 @@ export const DEFAULT_CONFIG: WidgetConfig = {
     appUrl: 'https://widget.rango.exchange/',
     email: 'hi+trezorwidget@rango.exchange',
   },
+  tonConnect: {
+    manifestUrl:
+      'https://raw.githubusercontent.com/rango-exchange/rango-types/main/assets/manifests/tonconnect-manifest.json',
+  },
 };
 
 interface IframeConfigs {

package/src/types/config.ts

@@ -170,6 +170,15 @@ export type TrezorManifest = {
   email: string;
 };
 
+/**
+ *
+ * @property {string} manifestUrl - The URL of the TON Connect [manifest]{@link https://github.com/ton-connect/docs/blob/main/requests-responses.md#app-manifest}, containing the Dapp metadata to be displayed in the user’s wallet.
+ *
+ */
+export type TonConnectConfig = {
+  manifestUrl?: string;
+};
+
 /**
  * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
  * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
@@ -185,6 +194,7 @@ export type TrezorManifest = {
  * exchange.It can also used to limit source swap blockchains/tokens to some limited ones.
  * @property {TrezorManifest} trezorManifest - Trezor Connect Manifest requires that you,
  * as a Trezor Connect integrator,share your e-mail and application url.
+ * @property {TonConnectConfig} tonConnect - Configuration for TON Connect compatible providers like MyTonWallet.
  * @property {BlockchainAndTokenConfig} to - The "to" property is an optional property of type
  * "BlockchainAndTokenConfig" that specifies the default blockchain and token to which the user wants to
  * exchange.It can also used to limit destination swap blockchains/tokens to some limited ones.
@@ -237,6 +247,7 @@ export type WidgetConfig = {
   title?: string;
   walletConnectProjectId?: string;
   trezorManifest?: TrezorManifest;
+  tonConnect?: TonConnectConfig;
   affiliate?: WidgetAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;

package/src/utils/providers.ts

@@ -9,6 +9,7 @@ export interface ProvidersOptions {
     WidgetConfig['__UNSTABLE_OR_INTERNAL__']
   >['walletConnectListedDesktopWalletLink'];
   trezorManifest: WidgetConfig['trezorManifest'];
+  tonConnect: WidgetConfig['tonConnect'];
 }
 
 /**
@@ -31,6 +32,9 @@ export function matchAndGenerateProviders(
     trezor: options?.trezorManifest
       ? { manifest: options.trezorManifest }
       : undefined,
+    tonConnect: options?.tonConnect?.manifestUrl
+      ? { manifestUrl: options?.tonConnect.manifestUrl }
+      : undefined,
   });
 
   if (providers) {