@rango-dev/widget-embedded 0.17.1-next.8 → 0.18.0

package/src/Widget.tsx

@@ -1,106 +0,0 @@
-import type { WidgetConfig } from './types';
-import type { WalletType } from '@rango-dev/wallets-shared';
-import type { PropsWithChildren } from 'react';
-
-import { I18nManager, styled } from '@rango-dev/ui';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-
-import { AppRouter } from './components/AppRouter';
-import { AppRoutes } from './components/AppRoutes';
-import { WidgetEvents } from './components/WidgetEvents';
-import { globalFont } from './globalStyles';
-import { useLanguage } from './hooks/useLanguage';
-import { useTheme } from './hooks/useTheme';
-import QueueManager from './QueueManager';
-import { useAppStore } from './store/AppStore';
-import { useNotificationStore } from './store/notification';
-import { useSettingsStore } from './store/settings';
-import { DEFAULT_CONFIG } from './store/slices/config';
-import { initConfig } from './utils/configs';
-import { WidgetContext, WidgetWallets } from './Wallets';
-
-const MainContainer = styled('div', {
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  fontFamily: '$widget',
-  boxSizing: 'border-box',
-  '& *, *::before, *::after': {
-    boxSizing: 'inherit',
-    listStyleType: 'none',
-  },
-  '& *:focus-visible': {
-    outlineColor: '$info500',
-    transition: 'none',
-  },
-});
-
-export type WidgetProps = {
-  config?: WidgetConfig;
-};
-
-export function Main() {
-  globalFont();
-
-  const { fetch: fetchMeta, config } = useAppStore();
-  const { activeTheme } = useTheme(config?.theme || {});
-  const { activeLanguage, changeLanguage } = useLanguage();
-  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
-    useState<string>('');
-  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
-  const widgetContext = useContext(WidgetContext);
-
-  useMemo(() => {
-    if (config?.apiKey) {
-      initConfig({
-        API_KEY: config?.apiKey,
-      });
-    }
-  }, [config]);
-  useEffect(() => {
-    void fetchMeta().catch();
-    void useSettingsStore.persist.rehydrate();
-    void useNotificationStore.persist.rehydrate();
-    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
-  }, []);
-  useEffect(() => {
-    if (config?.language) {
-      changeLanguage(config.language);
-    }
-  }, [config?.language]);
-
-  return (
-    <I18nManager language={activeLanguage}>
-      <MainContainer id="swap-container" className={activeTheme()}>
-        <QueueManager>
-          <WidgetEvents />
-          <AppRouter
-            lastConnectedWallet={lastConnectedWalletWithNetwork}
-            disconnectedWallet={disconnectedWallet}
-            clearDisconnectedWallet={() => {
-              setDisconnectedWallet(undefined);
-            }}>
-            <AppRoutes />
-          </AppRouter>
-        </QueueManager>
-      </MainContainer>
-    </I18nManager>
-  );
-}
-
-export function Widget(props: PropsWithChildren<WidgetProps>) {
-  if (!props.config?.externalWallets) {
-    return (
-      <WidgetWallets
-        config={props.config ?? DEFAULT_CONFIG}
-        providers={props.config?.wallets}
-        options={{
-          walletConnectProjectId: props.config?.walletConnectProjectId,
-        }}>
-        <Main />
-      </WidgetWallets>
-    );
-  }
-  return <Main />;
-}

package/src/components/LoadingSwapDetails/LoadingSwapDetailStep.tsx

@@ -1,41 +0,0 @@
-import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
-
-import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import { StepContainer } from './LoadingSwapDetails.styles';
-
-export function LoadingSwapDetailStep(props: StepSkeletonPropsTypes) {
-  const { extraInfo } = props;
-  return (
-    <StepContainer>
-      <div className="step-title">
-        <Skeleton height={28} width={28} variant="circular" />
-        <Divider direction="horizontal" size={8} />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <div className="step-tokens">
-        <Divider direction="horizontal" size={20} />
-        <div className="step-token-info">
-          <ChainToken size="small" loading chainImage="" tokenImage="" />
-          <Divider direction="horizontal" size={8} />
-          <Skeleton height={12} width={76} variant="rounded" />
-        </div>
-        <div className="step-icon-container">
-          <NextIcon color="gray" size={16} />
-        </div>
-        <div className="step-token-info">
-          <ChainToken size="small" loading chainImage="" tokenImage="" />
-          <Divider direction="horizontal" size={8} />
-          <Skeleton height={12} width={76} variant="rounded" />
-        </div>
-      </div>
-      {extraInfo && (
-        <div className="extra-info">
-          <Divider direction="horizontal" size={20} />
-          <Skeleton height={22} width={297} variant="rectangular" />
-        </div>
-      )}
-    </StepContainer>
-  );
-}

package/src/components/LoadingSwapDetails/LoadingSwapDetails.types.ts

@@ -1,3 +0,0 @@
-export interface StepSkeletonPropsTypes {
-  extraInfo?: boolean;
-}

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

@@ -1,110 +0,0 @@
-import { darkTheme, styled } from '@rango-dev/ui';
-
-export const Container = styled('div', {
-  $$color: '$colors$neutral100',
-  [`.${darkTheme} &`]: {
-    $$color: '$colors$neutral300',
-  },
-  backgroundColor: '$$color',
-  borderBottomLeftRadius: '$xm',
-  borderBottomRightRadius: '$xm',
-  padding: '$15 ',
-  '& .cost-and-tag': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    height: '22px',
-  },
-  variants: {
-    rounded: {
-      true: {
-        borderRadius: '$xm',
-      },
-    },
-  },
-  '& .cost': {
-    display: 'flex',
-  },
-  '& .basic-summary': {
-    padding: '$15 $0 14px $0',
-  },
-  '& .output': {
-    padding: '$6 $0 $15 $0',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  '& .output__token-info': {
-    display: 'flex',
-    justifyContent: 'start',
-    alignItems: 'center',
-    paddingBottom: '$5',
-  },
-  '& .quote-summary': {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'end',
-  },
-  '& .quote-summary__separator': {
-    height: '$28',
-    marginLeft: '13px',
-    borderLeft: '1px solid $neutral700',
-  },
-  '& .token-amount': {
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  '& .token-amount__label': {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'start',
-  },
-  '& .chains': {
-    paddingTop: '$2',
-  },
-  '& .swap-preview': {
-    padding: '$15 $0 $15 $0',
-  },
-  '& .steps': {
-    paddingLeft: '$8',
-  },
-  '& .step__title': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__content': {
-    display: 'flex',
-    alignItems: 'start',
-  },
-  '& .step__tokens': {
-    paddingTop: '$5',
-    paddingBottom: '$10',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__token-info': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& .step__icon-container': {
-    margin: '$0 $2',
-    padding: '$4',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
-  minHeight: ' 64px',
-  margin: '0px 11.5px',
-  alignSelf: 'stretch',
-  variants: {
-    hideSeparator: {
-      true: {
-        minHeight: 'unset',
-        height: '0',
-      },
-    },
-  },
-});

package/src/components/Quote/QuoteSkeleton.tsx

@@ -1,108 +0,0 @@
-import type { PropTypes } from './QuoteSkeleton.types';
-
-import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
-import React from 'react';
-
-import { Container, StepSeparator } from './QuoteSkeleton.styles';
-
-function StepSkeleton(props: { separator?: boolean }) {
-  const { separator = true } = props;
-  return (
-    <>
-      <div className="step__title">
-        <Skeleton height={22} width={22} variant="circular" />
-        <Divider direction="horizontal" size={8} />
-        <Skeleton height={15} width={148} variant="rounded" />
-      </div>
-      <div className="step__content">
-        <StepSeparator hideSeparator={!separator} />
-        <div className="step__tokens">
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-          <div className="step__icon-container">
-            <NextIcon color="gray" size={16} />
-          </div>
-          <div className="step__token-info">
-            <ChainToken size="small" loading chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={8} />
-            <Skeleton height={12} width={76} variant="rounded" />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export function QuoteSkeleton(props: PropTypes) {
-  const { type, expanded, tag = false } = props;
-  const quoteSummary = (
-    <div className="quote-summary">
-      <div className="token-amount">
-        <ChainToken loading size="medium" chainImage="" tokenImage="" />
-        <Divider size={8} direction="horizontal" />
-        <div className="token-amount__label">
-          <Skeleton height={10} width={60} variant="rounded" />
-          <Divider size={4} />
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      </div>
-      <Skeleton height={12} width={64} variant="rounded" />
-    </div>
-  );
-
-  return (
-    <Container>
-      <div className="cost-and-tag">
-        <div className="cost">
-          <Skeleton width={60} height={10} variant="rounded" />
-          <Divider size={4} direction="horizontal" />
-          <Skeleton width={60} height={10} variant="rounded" />
-          <Divider size={4} direction="horizontal" />
-          <Skeleton width={60} height={10} variant="rounded" />
-        </div>
-        {tag && <Skeleton height={22} width={100} variant="rounded" />}
-      </div>
-      {type === 'basic' && (
-        <div className="basic-summary">
-          <Skeleton height={15} width={148} variant="rounded" />
-        </div>
-      )}
-      {type === 'list-item' && (
-        <div className="output">
-          <div className="output__token-info">
-            <ChainToken loading size="medium" chainImage="" tokenImage="" />
-            <Divider direction="horizontal" size={4} />
-            <Skeleton height={15} width={150} variant="rounded" />
-          </div>
-          <Divider size={4} />
-          <Skeleton height={10} width={184} variant="rounded" />
-        </div>
-      )}
-      {type === 'swap-preview' && (
-        <>
-          <Divider size={4} />
-          <div className="swap-preview">
-            {quoteSummary}
-            <div className="quote-summary__separator" />
-            {quoteSummary}
-          </div>
-        </>
-      )}
-      <div className="chains">
-        <Skeleton height={15} width={321} variant="rounded" />
-      </div>
-
-      {expanded && (
-        <div className="steps">
-          <Divider size={20} />
-          <StepSkeleton />
-          <StepSkeleton />
-          <StepSkeleton separator={false} />
-        </div>
-      )}
-    </Container>
-  );
-}

package/src/store/settings.ts

@@ -1,161 +0,0 @@
-import type { SwapperMeta } from 'rango-sdk';
-
-import { type Language } from '@rango-dev/ui';
-import { create } from 'zustand';
-import { persist, subscribeWithSelector } from 'zustand/middleware';
-
-import { BLOCKCHAIN_LIST_SIZE } from '../constants/configs';
-import { DEFAULT_LANGUAGE } from '../constants/languages';
-import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
-import { removeDuplicateFrom } from '../utils/common';
-
-import createSelectors from './selectors';
-
-export type ThemeMode = 'auto' | 'dark' | 'light';
-
-export interface SettingsState {
-  /** Keeping a history of blockchains that user has selected (in Swap process) */
-  preferredBlockchains: string[];
-  slippage: number;
-  customSlippage: number | null;
-  infiniteApprove: boolean;
-  disabledLiquiditySources: string[];
-  theme: ThemeMode;
-  language: Language;
-  affiliateRef: string | null;
-  affiliatePercent: number | null;
-  affiliateWallets: { [key: string]: string } | null;
-
-  setSlippage: (slippage: number) => void;
-  setCustomSlippage: (customSlippage: number | null) => void;
-  toggleInfiniteApprove: () => void;
-  toggleLiquiditySource: (name: string) => void;
-  setTheme: (theme: ThemeMode) => void;
-  setLanguage: (language: Language) => void;
-  toggleAllLiquiditySources: (
-    swappers: SwapperMeta[],
-    shouldReset?: boolean
-  ) => void;
-  setAffiliateRef: (affiliateRef: string | null) => void;
-  setAffiliatePercent: (affiliatePercent: number | null) => void;
-  setAffiliateWallets: (
-    affiliateWallets: { [key: string]: string } | null
-  ) => void;
-  addPreferredBlockchain: (blockchain: string) => void;
-}
-
-export const useSettingsStore = createSelectors(
-  create<SettingsState>()(
-    persist(
-      subscribeWithSelector((set, get) => ({
-        preferredBlockchains: [],
-        slippage: DEFAULT_SLIPPAGE,
-        customSlippage: null,
-        infiniteApprove: false,
-        affiliateRef: null,
-        affiliatePercent: null,
-        affiliateWallets: null,
-        disabledLiquiditySources: [],
-        theme: 'auto',
-        language: DEFAULT_LANGUAGE,
-        addPreferredBlockchain: (blockchain) => {
-          const currentPreferredBlockchains = get().preferredBlockchains;
-
-          const noNeedToDoAnything = currentPreferredBlockchains.find(
-            (preferredBlockchain, index) => {
-              const isSameBlockchain = preferredBlockchain === blockchain;
-              const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1;
-
-              return isSameBlockchain && isInVisibleList;
-            }
-          );
-
-          if (noNeedToDoAnything) {
-            return;
-          }
-
-          const nextPreferredBlockchains: string[] =
-            currentPreferredBlockchains.filter((preferredBlockchain) => {
-              const isSameBlockchain = preferredBlockchain === blockchain;
-
-              return !isSameBlockchain;
-            });
-
-          set(() => ({
-            preferredBlockchains: [blockchain, ...nextPreferredBlockchains],
-          }));
-        },
-        setSlippage: (slippage) =>
-          set(() => ({
-            slippage: slippage,
-          })),
-        setCustomSlippage: (customSlippage) =>
-          set(() => ({
-            customSlippage: customSlippage,
-          })),
-        setAffiliateRef: (affiliateRef) =>
-          set(() => ({
-            affiliateRef,
-          })),
-        setAffiliatePercent: (affiliatePercent) =>
-          set(() => ({
-            affiliatePercent,
-          })),
-
-        setAffiliateWallets: (affiliateWallets) =>
-          set(() => ({
-            affiliateWallets,
-          })),
-        toggleAllLiquiditySources: (swappers, shouldReset) =>
-          set((state) => {
-            if (shouldReset) {
-              return { disabledLiquiditySources: [] };
-            }
-            const swappersGroup = removeDuplicateFrom(
-              swappers.map((swapper) => swapper.swapperGroup)
-            );
-
-            if (
-              swappersGroup.length === state.disabledLiquiditySources.length
-            ) {
-              return { disabledLiquiditySources: [] };
-            }
-
-            return {
-              disabledLiquiditySources: swappersGroup,
-            };
-          }),
-        toggleInfiniteApprove: () =>
-          set((state) => ({
-            infiniteApprove: !state.infiniteApprove,
-          })),
-        toggleLiquiditySource: (name) =>
-          set((state) => {
-            if (state.disabledLiquiditySources.includes(name)) {
-              return {
-                disabledLiquiditySources: state.disabledLiquiditySources.filter(
-                  (liquiditySource) => liquiditySource != name
-                ),
-              };
-            }
-            return {
-              disabledLiquiditySources:
-                state.disabledLiquiditySources.concat(name),
-            };
-          }),
-        setTheme: (theme) =>
-          set(() => ({
-            theme,
-          })),
-        setLanguage: (language) =>
-          set(() => ({
-            language,
-          })),
-      })),
-      {
-        name: 'user-settings',
-        skipHydration: true,
-      }
-    )
-  )
-);