npm - @rango-dev/widget-embedded - Versions diffs - 0.0.0-experimental-936229e8-20251208 - Mend

@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1173) hide show

package/src/components/Slippage/Slippage.tsx ADDED Viewed

@@ -0,0 +1,134 @@
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Divider,
+  InfoIcon,
+  SlippageIcon,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+import { MAX_SLIPPAGE, SLIPPAGES } from '../../constants/swapSettings';
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { getSlippageValidation } from '../../utils/settings';
+import { isValidCurrencyFormat } from '../../utils/validation';
+import {
+  BaseContainer,
+  Head,
+  SlippageChip,
+  SlippageChipsContainer,
+} from './Slippage.styles';
+import { SlippageTooltipContent } from './SlippageTooltipContent';
+export function Slippage() {
+  const { slippage, setSlippage, customSlippage, setCustomSlippage } =
+    useAppStore();
+  const slippageValidation =
+    customSlippage !== null ? getSlippageValidation(customSlippage) : null;
+  const onSlippageValueChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = event.target.value;
+    const parsedValue = parseFloat(value);
+    if (isNaN(parsedValue)) {
+      return setCustomSlippage(null);
+    }
+    let slippage = parsedValue;
+    if (parsedValue > MAX_SLIPPAGE) {
+      slippage = MAX_SLIPPAGE;
+    }
+    setCustomSlippage(slippage);
+  };
+  const onClickSlippageChip = (slippageItem: number) => {
+    if (customSlippage !== null) {
+      setCustomSlippage(null);
+    }
+    setSlippage(slippageItem);
+  };
+  const onInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const input = event.target as HTMLInputElement;
+    const value = input.value;
+    if (!isValidCurrencyFormat(value)) {
+      input.value = value.slice(0, -1);
+    }
+  };
+  return (
+    <BaseContainer>
+      <Head>
+        <SlippageIcon size={16} color="gray" />
+        <Divider direction="horizontal" size={4} />
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Slippage tolerance per swap')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          sideOffset={4}
+          content={<SlippageTooltipContent />}>
+          <InfoIcon color="gray" />
+        </Tooltip>
+      </Head>
+      <SlippageChipsContainer>
+        {SLIPPAGES.map((slippageItem, index) => {
+          const key = `slippage-${index}`;
+          return (
+            <SlippageChip
+              id={`widget-slippage-chip-${slippageItem.toString()}%-btn`}
+              key={key}
+              onClick={() => onClickSlippageChip(slippageItem)}
+              selected={customSlippage === null && slippageItem === slippage}
+              label={`${slippageItem.toString()}%`}
+            />
+          );
+        })}
+        <TextField
+          type="number"
+          min="0.01"
+          max="30"
+          step="0.01"
+          status={
+            slippageValidation?.type || (customSlippage ? 'success' : 'default')
+          }
+          id="widget-slippage-chip-text-input"
+          onInput={onInput}
+          fullWidth
+          variant="contained"
+          value={customSlippage === null ? '' : customSlippage}
+          color="dark"
+          onChange={onSlippageValueChange}
+          suffix={
+            customSlippage && (
+              <Typography variant="body" size="small">
+                %
+              </Typography>
+            )
+          }
+          placeholder={i18n.t('Custom')}
+        />
+      </SlippageChipsContainer>
+      {slippageValidation && (
+        <>
+          <Divider size={10} />
+          <Alert
+            id="widget-slippage-alert"
+            variant="alarm"
+            type={slippageValidation.type}
+            title={slippageValidation.message}
+          />
+        </>
+      )}
+    </BaseContainer>
+  );
+}

package/src/components/Slippage/SlippageTooltipContent.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import { i18n } from '@lingui/core';
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+import { SlippageTooltipContainer } from './Slippage.styles';
+export function SlippageTooltipContent() {
+  return (
+    <SlippageTooltipContainer>
+      <Typography variant="label" size="medium" color="neutral700">
+        {i18n.t(
+          'Your transaction will be reverted if the price changes unfavorably by more than this percentage.'
+        )}
+        <br />
+        <br />
+        <b>{i18n.t('Warning')}</b>:&nbsp;
+        {i18n.t(
+          'This setting is applied to each step (e.g. 1Inch, Thorchain, etc.), meaning only that specific step will be reverted, not the entire route.'
+        )}
+      </Typography>
+    </SlippageTooltipContainer>
+  );
+}

package/src/components/Slippage/index.ts ADDED Viewed

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

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.helpers.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import type { AlertInfo } from '../QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers';
+import { i18n } from '@lingui/core';
+import { HIGH_SLIPPAGE, MIN_SLIPPAGE } from '../../constants/swapSettings';
+export type ActionType = AlertInfo['action'] | 'reset-slippage';
+type Alert = Omit<AlertInfo, 'action'> & {
+  action: ActionType;
+};
+export function makeAlerts(slippage: number): Alert | null {
+  let alertInfo: Alert | null = null;
+  if (slippage === MIN_SLIPPAGE) {
+    alertInfo = {
+      alertType: 'error',
+      action: 'reset-slippage',
+      actionButtonTitle: i18n.t('Reset'),
+      title: i18n.t('Slippage cannot be set lower than 0.01%.'),
+    };
+    return alertInfo;
+  } else if (slippage > HIGH_SLIPPAGE) {
+    alertInfo = {
+      alertType: 'warning',
+      action: 'change-settings',
+      actionButtonTitle: i18n.t('Change'),
+      title: i18n.t('Caution, your slippage is high!'),
+    };
+    return alertInfo;
+  }
+  return null;
+}

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import type { ActionType } from './SlippageWarningsAndErrors.helpers';
+import type { PropTypes } from './SlippageWarningsAndErrors.types';
+import { Alert, Button } from '@rango-dev/ui';
+import React from 'react';
+import { DEFAULT_SLIPPAGE } from '../../constants/swapSettings';
+import { useAppStore } from '../../store/AppStore';
+import { makeAlerts } from './SlippageWarningsAndErrors.helpers';
+export function SlippageWarningsAndErrors(props: PropTypes) {
+  const { slippage, customSlippage, setSlippage, setCustomSlippage } =
+    useAppStore();
+  const { onChangeSettings } = props;
+  const currentSlippage = customSlippage !== null ? customSlippage : slippage;
+  const alertInfo = makeAlerts(currentSlippage);
+  const onClickActionButton = (action: ActionType) => {
+    if (action === 'reset-slippage') {
+      setSlippage(DEFAULT_SLIPPAGE);
+      setCustomSlippage(null);
+    } else if (action === 'change-settings') {
+      onChangeSettings();
+    }
+  };
+  if (!alertInfo) {
+    return null;
+  }
+  return (
+    <Alert
+      title={alertInfo.title}
+      type={alertInfo.alertType}
+      variant="alarm"
+      action={
+        <Button
+          id="widget-slippage-warning-error-change-settings-or-reset-slippage-btn"
+          size="xxsmall"
+          type={alertInfo.alertType}
+          onClick={() => onClickActionButton(alertInfo.action)}>
+          {alertInfo.actionButtonTitle}
+        </Button>
+      }
+    />
+  );
+}

package/src/components/SlippageWarningsAndErrors/SlippageWarningsAndErrors.types.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export interface PropTypes {
+  onChangeSettings: () => void;
+}

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx ADDED Viewed

@@ -0,0 +1,215 @@
+import type { Result } from '../../hooks/useStatefulConnect';
+import type { WalletInfoWithExtra } from '../../types';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import { Divider } from '@rango-dev/ui';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ResultStatus,
+  useStatefulConnect,
+} from '../../hooks/useStatefulConnect';
+import { useWalletList } from '../../hooks/useWalletList';
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import {
+  ConnectStatus,
+  DerivationPath,
+  Namespaces,
+} from '../WalletStatefulConnect';
+import { Detached } from '../WalletStatefulConnect/Detached';
+import {
+  isOnDerivationPath,
+  isOnDetached,
+  isOnNamespace,
+  isOnStatus,
+} from './helpers';
+const KEEP_SUCCESS_MODAL_FOR = 3_000;
+const DELAY_SHOWING_MODAL_FOR = 300;
+interface PropTypes {
+  wallet: WalletInfoWithExtra | undefined;
+  id: string;
+  onClose: () => void;
+  // When connecting wallet is executed **successfully**, this will be called afterwards.
+  onConnect?: () => void;
+  options?: {
+    defaultSelectedChains?: string[];
+  };
+}
+export function StatefulConnectModal(props: PropTypes) {
+  const successModalTimerId = useRef<ReturnType<typeof setTimeout>>();
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState<string>();
+  const catchErrorOnHandle = (error: Error) => {
+    setError(error.message);
+  };
+  const { terminateConnectingWallets } = useWalletList();
+  const {
+    handleConnect,
+    handleDerivationPath,
+    handleNamespace,
+    getState,
+    resetState,
+    handleDisconnect,
+  } = useStatefulConnect();
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    handleNamespace(props.wallet!, selectedNamespaces)
+      .then(afterConnected)
+      .catch(catchErrorOnHandle);
+  };
+  const handleDetachedConfirm = () => {
+    handleClosingModal();
+  };
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (!derivationPath) {
+      throw new Error(
+        "Derivation path is empty. Please make sure you've filled the field correctly."
+      );
+    }
+    handleDerivationPath(props.wallet!, derivationPath)
+      .then(afterConnected)
+      .catch(catchErrorOnHandle);
+  };
+  const handleClosingModal = () => {
+    setIsConnecting(false);
+  };
+  const resetModalState = () => {
+    setError(undefined);
+    resetState();
+    setIsConnecting(false);
+    if (successModalTimerId.current) {
+      clearTimeout(successModalTimerId.current);
+    }
+  };
+  const afterConnected = (result: Result, isImmediatelyConnected?: boolean) => {
+    const resultIsConnected = result.status === ResultStatus.Connected;
+    const resultIsDisconnected = [
+      ResultStatus.Disconnected,
+      ResultStatus.DisconnectedUnhandled,
+    ].includes(result.status);
+    if (resultIsConnected) {
+      props.onConnect?.();
+      if (!isImmediatelyConnected) {
+        successModalTimerId.current = setTimeout(
+          handleClosingModal,
+          KEEP_SUCCESS_MODAL_FOR
+        );
+      }
+    } else if (resultIsDisconnected) {
+      handleClosingModal();
+    }
+  };
+  const handleNavigateToDerivationPath = (selectedNamespace: Namespace) => {
+    if (!props.wallet?.needsDerivationPath) {
+      return;
+    }
+    void handleNamespace(props.wallet, [selectedNamespace]);
+  };
+  useEffect(() => {
+    if (props.wallet) {
+      resetModalState();
+      let isConnected = false;
+      /*
+       * If connecting to wallet is happening quickly, we shouldn't show a modal.
+       * by default we are assuming we can connect quickly, but if it passes an certain amount of time
+       * We set his flag as false which means we a modal has been opened (showing a connection status or Namespace/Derivation path modal)
+       */
+      let isImmediatelyConnected = true;
+      const beforeConnecting = () => {
+        setTimeout(() => {
+          isImmediatelyConnected = false;
+          if (!isConnected) {
+            setIsConnecting(true);
+          }
+        }, DELAY_SHOWING_MODAL_FOR);
+      };
+      beforeConnecting();
+      handleConnect(props.wallet, {
+        disconnectIfConnected: true,
+        defaultSelectedChains: props.options?.defaultSelectedChains,
+      })
+        .then((result) => {
+          const resultIsNeedMoreStepsToConnect = [
+            ResultStatus.Namespace,
+            ResultStatus.Detached,
+            ResultStatus.DerivationPath,
+          ].includes(result.status);
+          if (!resultIsNeedMoreStepsToConnect) {
+            isConnected = true;
+          }
+          afterConnected(result, isImmediatelyConnected);
+        })
+        .catch(catchErrorOnHandle);
+    }
+  }, [props.wallet]);
+  return (
+    <WatermarkedModal
+      id={props.id}
+      open={isConnecting}
+      onClose={handleClosingModal}
+      onExit={() => {
+        resetModalState();
+        terminateConnectingWallets();
+        if (props.onClose) {
+          props.onClose();
+        }
+      }}
+      container={getContainer()}>
+      {isOnStatus(getState, props.wallet) && (
+        <>
+          <ConnectStatus
+            wallet={{
+              type: props.wallet.type,
+              image: props.wallet.image,
+            }}
+            error={error}
+          />
+          <Divider direction="vertical" size={32} />
+        </>
+      )}
+      {isOnNamespace(getState) && (
+        <Namespaces
+          onConfirm={handleConfirmNamespaces}
+          value={getState().namespace}
+        />
+      )}
+      {isOnDerivationPath(getState) && (
+        <DerivationPath
+          onConfirm={handleDerivationPathConfirm}
+          value={getState().derivationPath}
+        />
+      )}
+      {isOnDetached(getState) && (
+        <Detached
+          onConfirm={handleDetachedConfirm}
+          onDisconnectWallet={() =>
+            void handleDisconnect(getState().namespace.targetWallet)
+          }
+          value={getState().namespace}
+          selectedNamespaces={getState().selectedNamespaces}
+          navigateToDerivationPath={handleNavigateToDerivationPath}
+        />
+      )}
+    </WatermarkedModal>
+  );
+}

package/src/components/StatefulConnectModal/helpers.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import type { State } from '../../hooks/useStatefulConnect';
+import type { WalletInfoWithExtra } from '../../types';
+export function isOnStatus(
+  getState: () => State,
+  wallet?: WalletInfoWithExtra
+): wallet is WalletInfoWithExtra {
+  return getState().status === 'init' && !!wallet;
+}
+export function isOnNamespace(
+  getState: () => State
+): getState is () => State & { namespace: NonNullable<State['namespace']> } {
+  return getState().status === 'namespace';
+}
+export function isOnDerivationPath(
+  getState: () => State
+): getState is () => State & {
+  derivationPath: NonNullable<State['derivationPath']>;
+} {
+  return getState().status === 'derivationPath';
+}
+export function isOnDetached(
+  getState: () => State
+): getState is () => State & { namespace: NonNullable<State['namespace']> } {
+  return getState().status === 'detached';
+}

package/src/components/StatefulConnectModal/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { StatefulConnectModal } from './StatefulConnectModal';
2	+ export { isOnNamespace, isOnDerivationPath, isOnDetached } from './helpers';

package/src/components/SwapDetails/RequestIdRow.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import type { RequestIdProps } from './SwapDetails.types';
+import { i18n } from '@lingui/core';
+import {
+  CopyIcon,
+  DoneIcon,
+  IconButton,
+  RangoExplorerIcon,
+  Tooltip,
+  Typography,
+  useCopyToClipboard,
+} from '@rango-dev/ui';
+import React from 'react';
+import { SCANNER_BASE_URL } from '../../constants';
+import { getContainer } from '../../utils/common';
+import { RESET_INTERVAL } from './SwapDetails.helpers';
+import {
+  RequestIdContainer,
+  requestIdStyles,
+  rowStyles,
+  StyledLink,
+} from './SwapDetails.styles';
+export function RequestIdRow(props: RequestIdProps) {
+  const { requestId } = props;
+  const [isCopied, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
+  return (
+    <RequestIdContainer className={rowStyles()}>
+      <Typography variant="label" size="large" color="neutral700">
+        {i18n.t('Request ID')}
+      </Typography>
+      <div className={requestIdStyles()}>
+        <Typography variant="label" size="small" color="neutral700">
+          {requestId}
+        </Typography>
+        <Tooltip
+          container={getContainer()}
+          content={
+            isCopied ? i18n.t('Copied To Clipboard') : i18n.t('Copy Request ID')
+          }
+          open={isCopied || undefined}
+          side="bottom"
+          alignOffset={-16}
+          align="end">
+          <IconButton
+            id="widget-swap-details-done-copy-icon-btn"
+            variant="ghost"
+            onClick={handleCopy.bind(null, requestId || '')}>
+            {isCopied ? (
+              <DoneIcon size={16} color="secondary" />
+            ) : (
+              <CopyIcon size={16} color="gray" />
+            )}
+          </IconButton>
+        </Tooltip>
+        <StyledLink
+          target="_blank"
+          href={`${SCANNER_BASE_URL}/swap/${requestId}`}>
+          <Tooltip
+            container={getContainer()}
+            content={i18n.t('View on Rango Explorer')}
+            side="bottom">
+            <RangoExplorerIcon size={20} />
+          </Tooltip>
+        </StyledLink>
+      </div>
+    </RequestIdContainer>
+  );
+}

package/src/components/SwapDetails/SwapDateRow.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import type { SwapDateRowProps } from './SwapDetails.types';
+import { i18n } from '@lingui/core';
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+import { rowStyles } from './SwapDetails.styles';
+export function SwapDateRow(props: SwapDateRowProps) {
+  const { date, isFinished } = props;
+  return (
+    <div className={rowStyles()}>
+      <Typography variant="label" size="large" color="neutral700">
+        {isFinished ? i18n.t('Finished at') : i18n.t('Created at')}
+      </Typography>
+      <Typography variant="label" size="small" color="neutral700">
+        {date}
+      </Typography>
+    </div>
+  );
+}

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import type { SwapDetailsPlaceholderPropTypes } from './SwapDetails.types';
+import { i18n } from '@lingui/core';
+import { Divider, NotFound, Skeleton, Typography } from '@rango-dev/ui';
+import React from 'react';
+import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
+import { Layout } from '../Layout';
+import { LoadingSwapDetails } from '../LoadingSwapDetails';
+import {
+  datePlaceholderStyles,
+  PlaceholderContainer,
+  requestIdStyles,
+  rowStyles,
+  SkeletonContainer,
+} from './SwapDetails.styles';
+export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
+  const { requestId, showSkeleton } = props;
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Swap Details'),
+        suffix: <SuffixContainer />,
+      }}>
+      {showSkeleton && (
+        <SkeletonContainer>
+          <div className={rowStyles()}>
+            <Typography variant="label" size="large" color="neutral700">
+              {`${i18n.t('Request ID')}`}
+            </Typography>
+            <div className={requestIdStyles()}>
+              <Typography variant="label" size="small" color="neutral700">
+                <Skeleton width={60} height={10} variant="rounded" />
+              </Typography>
+              <Divider direction="horizontal" size={4} />
+              <Skeleton width={16} height={16} variant="rectangular" />
+              <Divider direction="horizontal" size={4} />
+              <Skeleton width={16} height={16} variant="rectangular" />
+            </div>
+          </div>
+          <div className={rowStyles()}>
+            <Typography
+              className={datePlaceholderStyles()}
+              variant="label"
+              size="large"
+              color="neutral700">
+              <Skeleton width={60} height={10} variant="rounded" />
+            </Typography>
+            <Typography variant="label" size="small" color="neutral700">
+              <Skeleton width={60} height={10} variant="rounded" />
+            </Typography>
+          </div>
+          <LoadingSwapDetails />
+        </SkeletonContainer>
+      )}
+      {!showSkeleton && (
+        <PlaceholderContainer>
+          <NotFound
+            title={i18n.t('Not found')}
+            description={i18n.t({
+              id: 'Swap with request ID = {requestId} not found.',
+              values: { requestId },
+            })}
+          />
+        </PlaceholderContainer>
+      )}
+    </Layout>
+  );
+}