@rango-dev/widget-embedded 0.1.10-next.100

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@rango-dev/widget-embedded",
+  "version": "0.1.10-next.100",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "scripts": {
+    "dev": "parcel public/index.html -p 3001",
+    "build:app": "parcel build",
+    "build": "tsdx build --entry ./src/lib.tsx"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "dependencies": {
+    "@rango-dev/provider-all": "^0.1.11-next.79",
+    "@rango-dev/queue-manager-core": "^0.1.10-next.75",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.10-next.77",
+    "@rango-dev/queue-manager-react": "^0.1.10-next.73",
+    "@rango-dev/ui": "^0.1.10-next.75",
+    "@rango-dev/wallets-core": "^0.1.11-next.80",
+    "@rango-dev/wallets-shared": "^0.1.11-next.78",
+    "bignumber.js": "^9.1.1",
+    "copy-to-clipboard": "^3.3.3",
+    "i18next": "^22.4.11",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
+    "immer": "^9.0.19",
+    "mitt": "^3.0.0",
+    "parcel": "^2.8.0",
+    "rango-sdk": "^0.1.19",
+    "rango-types": "^0.1.23",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
+    "react-router-dom": "^6.8.0",
+    "zustand": "^4.3.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1,2 @@
+
+Widget will use `components`, `queues` and `wallets` to make a react app to be embedded as widget.

package/src/App.tsx

@@ -0,0 +1,91 @@
+import { SwapContainer } from '@rango-dev/ui';
+import React from 'react';
+import { AppRouter } from './components/AppRouter';
+import { useMetaStore } from './store/meta';
+import './app.css';
+import { Events, Provider } from '@rango-dev/wallets-core';
+import { allProviders } from '@rango-dev/provider-all';
+import { EventHandler } from '@rango-dev/wallets-core/dist/wallet';
+import { Network } from '@rango-dev/wallets-shared';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from './utils/wallets';
+import { useWalletsStore } from './store/wallets';
+import { Layout } from './components/Layout';
+import { globalFont, globalStyles } from './globalStyles';
+import { useTheme } from './hooks/useTheme';
+import QueueManager from './QueueManager';
+import { isEvmBlockchain } from 'rango-sdk';
+import { Configs } from './types';
+import './i18n';
+
+const providers = allProviders();
+
+//todo: update interface and update widget state based on WidgetProps change
+export type WidgetProps = {
+  configs?: Configs;
+};
+
+export function App({ configs }: WidgetProps) {
+  globalStyles();
+  globalFont(configs?.fontFamily || 'Roboto');
+  const { activeTheme } = useTheme({
+    ...configs?.colors,
+    borderRadius: configs?.borderRadius,
+  });
+
+  const { blockchains } = useMetaStore.use.meta();
+  const disconnectWallet = useWalletsStore.use.disconnectWallet();
+  const connectWallet = useWalletsStore.use.connectWallet();
+
+  const evmBasedChainNames = blockchains
+    .filter(isEvmBlockchain)
+    .map((chain) => chain.name);
+
+  const onUpdateState: EventHandler = (
+    type,
+    event,
+    value,
+    _,
+    supportedChains
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      if (value) {
+        const supportedChainNames: Network[] | null =
+          walletAndSupportedChainsNames(supportedChains);
+        const data = prepareAccountsForWalletStore(
+          type,
+          value,
+          evmBasedChainNames,
+          supportedChainNames
+        );
+        connectWallet(data);
+      } else {
+        disconnectWallet(type);
+      }
+    }
+  };
+
+  return (
+    <Provider
+      allBlockChains={blockchains}
+      providers={providers}
+      onUpdateState={onUpdateState}
+    >
+      <div id="pageContainer" className={activeTheme}>
+        <QueueManager>
+          <SwapContainer>
+            <AppRouter
+              title={configs?.title}
+              titleSize={configs?.titleSize}
+              titleWeight={configs?.titleWeight}
+            >
+              <Layout configs={configs} />
+            </AppRouter>
+          </SwapContainer>
+        </QueueManager>
+      </div>
+    </Provider>
+  );
+}

package/src/QueueManager.tsx

@@ -0,0 +1,94 @@
+import React, { PropsWithChildren } from 'react';
+import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
+import {
+  swapQueueDef,
+  SwapQueueContext,
+} from '@rango-dev/queue-manager-rango-preset';
+import { useWallets } from '@rango-dev/wallets-core';
+import {
+  convertEvmBlockchainMetaToEvmChainInfo,
+  Network,
+  WalletType,
+} from '@rango-dev/wallets-shared';
+import { useMetaStore } from './store/meta';
+import { useWalletsStore } from './store/wallets';
+import { walletAndSupportedChainsNames } from './utils/wallets';
+import { isEvmBlockchain } from 'rango-sdk';
+
+function QueueManager(props: PropsWithChildren<{}>) {
+  const {
+    providers,
+    getSigners,
+    state,
+    connect,
+    canSwitchNetworkTo,
+    getWalletInfo,
+  } = useWallets();
+
+  const { blockchains } = useMetaStore.use.meta();
+  const balances = useWalletsStore.use.balances();
+
+  const wallets = {
+    blockchains: balances.map((wallet) => ({
+      accounts: [wallet],
+      name: wallet.chain,
+    })),
+  };
+
+  const switchNetwork = (wallet: WalletType, network: Network) => {
+    if (!canSwitchNetworkTo(wallet, network)) {
+      return undefined;
+    }
+    return connect(wallet, network);
+  };
+
+  // TODO: this code copy & pasted from rango, should be refactored.
+  const allBlockchains = blockchains
+    .filter((blockchain) => blockchain.enabled)
+    .reduce(
+      (blockchainsObj, blockchain) => (
+        (blockchainsObj[blockchain.name] = blockchain), blockchainsObj
+      ),
+      {}
+    );
+  const evmBasedChains = blockchains.filter(isEvmBlockchain);
+  const getSupportedChainNames = (type: WalletType) => {
+    const { supportedChains } = getWalletInfo(type);
+    return walletAndSupportedChainsNames(supportedChains);
+  };
+  const allProviders = providers();
+  const context: SwapQueueContext = {
+    meta: {
+      blockchains: allBlockchains,
+      evmBasedChains: evmBasedChains,
+      evmNetworkChainInfo:
+        convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
+      getSupportedChainNames,
+    },
+    getSigners,
+    //todo: remove Network type
+    //@ts-ignore
+    wallets,
+    providers: allProviders,
+    switchNetwork,
+    connect,
+    state,
+    notifier: (message) => {
+      console.log('[notifier]', message);
+    },
+  };
+
+  return (
+    <ManagerProvider
+      //@ts-ignore
+      queuesDefs={[swapQueueDef]}
+      context={context}
+      onPersistedDataLoaded={(_manager) => {}}
+      isPaused={false}
+    >
+      {props.children}
+    </ManagerProvider>
+  );
+}
+
+export default QueueManager;

package/src/app.css

@@ -0,0 +1,27 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+#app {
+  height: 100vh;
+}
+#pageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}

package/src/components/AppRouter.tsx

@@ -0,0 +1,60 @@
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import {
+  MemoryRouter,
+  useInRouterContext,
+  useLocation,
+  useNavigate,
+} from 'react-router';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { UpdateUrl } from './UpdateUrl';
+import { Home } from '../pages/Home';
+interface PropTypes {
+  title?: string;
+  titleSize?: number;
+  titleWeight?: number;
+}
+const Route: React.FC = ({
+  children,
+  ...props
+}: PropTypes & PropsWithChildren) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const ref = useRef(true);
+
+  useEffect(() => {
+    if (
+      [navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
+        location.pathname
+      ) &&
+      ref.current
+    )
+      navigate(navigationRoutes.home + location.search, { state: 'redirect' });
+
+    ref.current = false;
+  }, []);
+
+  if (
+    [navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
+      location.pathname
+    ) &&
+    ref.current
+  )
+    return <Home {...props} />;
+
+  return <> {children}</>;
+};
+
+export function AppRouter({
+  children,
+  ...props
+}: PropTypes & PropsWithChildren) {
+  const isRouterInContext = useInRouterContext();
+  const Router = isRouterInContext ? Route : MemoryRouter;
+
+  return (
+    <>
+      <Router {...props}>{children}</Router>
+      {isRouterInContext && <UpdateUrl />}
+    </>
+  );
+}

package/src/components/AppRoutes.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useRoutes } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { ConfirmSwapPage } from '../pages/ConfirmSwapPage';
+import { HistoryPage } from '../pages/HistoryPage';
+import { Home } from '../pages/Home';
+import { LiquiditySourcePage } from '../pages/LiquiditySourcesPage';
+import { SelectChainPage } from '../pages/SelectChainPage';
+import { SelectTokenPage } from '../pages/SelectTokenPage';
+import { SettingsPage } from '../pages/SettingsPage';
+import { WalletsPage } from '../pages/WalletsPage';
+import { ConfirmWalletsPage } from '../pages/ConfirmWalletsPage';
+import { SwapDetailsPage } from '../pages/SwapDetailsPage';
+import { Configs } from '../types';
+
+interface PropTypes {
+  configs?: Configs;
+}
+
+export function AppRoutes(props: PropTypes) {
+  const { configs } = props;
+
+  return useRoutes([
+    {
+      path: navigationRoutes.home,
+      element: (
+        <Home
+          title={configs?.title}
+          titleSize={configs?.titleSize}
+          titleWeight={configs?.titleWeight}
+        />
+      ),
+    },
+    {
+      path: navigationRoutes.fromChain,
+      element: (
+        <SelectChainPage
+          type="from"
+          supportedChains={configs?.fromChains || 'all'}
+        />
+      ),
+    },
+    {
+      path: navigationRoutes.toChain,
+      element: (
+        <SelectChainPage
+          type="to"
+          supportedChains={configs?.toChains || 'all'}
+        />
+      ),
+    },
+    {
+      path: navigationRoutes.fromToken + '/*',
+      element: (
+        <SelectTokenPage
+          type="from"
+          supportedTokens={configs?.fromTokens || 'all'}
+        />
+      ),
+    },
+    {
+      path: navigationRoutes.toToken,
+      element: (
+        <SelectTokenPage
+          type="to"
+          supportedTokens={configs?.toTokens || 'all'}
+        />
+      ),
+    },
+    {
+      path: navigationRoutes.settings,
+      element: (
+        <SettingsPage supportedSwappers={configs?.liquiditySources || 'all'} />
+      ),
+    },
+    {
+      path: navigationRoutes.liquiditySources,
+      element: (
+        <LiquiditySourcePage
+          supportedSwappers={configs?.liquiditySources || 'all'}
+        />
+      ),
+    },
+    { path: navigationRoutes.swaps, element: <HistoryPage /> },
+    {
+      path: navigationRoutes.swapDetails,
+      element: <SwapDetailsPage />,
+    },
+    {
+      path: navigationRoutes.wallets,
+      element: (
+        <WalletsPage
+          supportedWallets={configs?.wallets || 'all'}
+          multiWallets={
+            typeof configs?.multiWallets === 'undefined'
+              ? true
+              : configs.multiWallets
+          }
+        />
+      ),
+    },
+    { path: navigationRoutes.confirmSwap, element: <ConfirmSwapPage /> },
+    { path: navigationRoutes.confirmWallets, element: <ConfirmWalletsPage /> },
+  ]);
+}

package/src/components/BottomLogo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { styled } from '@rango-dev/ui/src/theme';
+import { Typography } from '@rango-dev/ui';
+import { useTranslation } from 'react-i18next';
+
+const Container = styled('div', {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'end',
+  alignItems: 'center',
+  paddingTop: '$16',
+});
+
+const Logo = styled('svg', {
+  fill: '$foreground',
+  width: '$24',
+  margin: '0 $8 0 $16',
+});
+
+const StyledAnchor = styled('a', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textDecoration: 'none',
+});
+
+export function BottomLogo() {
+  const { t } = useTranslation();
+
+  return (
+    <Container>
+      <Typography variant="caption">{t('Powered By')}</Typography>
+      <StyledAnchor href="https://rango.exchange" target="_blank">
+        <Logo xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.68 29">
+          <defs></defs>
+          <g id="Layer_2" data-name="Layer 2">
+            <g id="Layer_1-2" data-name="Layer 1">
+              <path d="M33.68,18.05A17.93,17.93,0,0,0,28.34,5.29,18.31,18.31,0,0,0,15.45,0H13.54V7.41L6.07,0H.69L9.83,9.07H0V11A17.93,17.93,0,0,0,5.34,23.71,18.32,18.32,0,0,0,18.24,29h1.9V21.59l7.38,7.31h5.39l-9-9h9.82ZM17.37,16.16H12.49a1.93,1.93,0,0,0-1.35.55,1.89,1.89,0,0,0-.56,1.34,1.85,1.85,0,0,0,.56,1.33,1.93,1.93,0,0,0,1.35.55h3.84V25.1A14.43,14.43,0,0,1,8,21a14.21,14.21,0,0,1-4.1-8.2H21.2a1.86,1.86,0,0,0,.74-.13,1.92,1.92,0,0,0,.64-.4,2,2,0,0,0,.43-.62,1.88,1.88,0,0,0,0-1.47,2,2,0,0,0-.43-.62,1.92,1.92,0,0,0-.64-.4,1.86,1.86,0,0,0-.74-.13H17.35V3.9A14.43,14.43,0,0,1,25.64,8a14.19,14.19,0,0,1,4.11,8.2Zm2.12-5.27a1.43,1.43,0,0,1,.26-.83,1.52,1.52,0,0,1,.67-.56,1.55,1.55,0,0,1,.88-.08,1.51,1.51,0,0,1,.77.4,1.54,1.54,0,0,1,.42.77,1.41,1.41,0,0,1-.09.86,1.47,1.47,0,0,1-.55.68,1.56,1.56,0,0,1-.84.25,1.52,1.52,0,0,1-1.52-1.49Z" />
+              <path d="M21.7,11.57a.68.68,0,0,0-.12-.38.64.64,0,0,0-.31-.25.68.68,0,0,0-.75.15.61.61,0,0,0-.19.35.62.62,0,0,0,0,.4.67.67,0,0,0,.25.3.69.69,0,0,0,.39.12.7.7,0,0,0,.49-.2A.68.68,0,0,0,21.7,11.57Z" />
+            </g>
+          </g>
+        </Logo>
+        <Typography variant="body2">RANGO</Typography>
+      </StyledAnchor>
+    </Container>
+  );
+}

package/src/components/ChangeSlippageButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button } from '@rango-dev/ui';
+import { useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+
+export function ChangeSlippageButton() {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      type="primary"
+      variant="outlined"
+      size="small"
+      onClick={() => navigate(navigationRoutes.settings)}
+    >
+      Change Slippage
+    </Button>
+  );
+}

package/src/components/ConfirmSwapErrors.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Typography } from '@rango-dev/ui';
+import { ConfirmSwapError, ConfirmSwapErrorTypes } from '../types';
+import { MinRequiredSlippage } from './warnings/MinRequiredSlippage';
+
+export function ConfirmSwapErrors(errors: ConfirmSwapError[]) {
+  return errors.flatMap((error) => {
+    switch (error.type) {
+      case ConfirmSwapErrorTypes.NO_ROUTE:
+        return (
+          <Typography variant="body2">
+            No routes found. Please try again later.
+          </Typography>
+        );
+      case ConfirmSwapErrorTypes.REQUEST_FAILED:
+        return (
+          <Typography variant="body2">{`Failed to confirm swap ${
+            error.status ? `'status': ${error.status})` : ''
+          }, please try again.`}</Typography>
+        );
+
+      case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+        return (
+          <Typography variant="body2">
+            Route updated and price impact is too high, try again later!
+          </Typography>
+        );
+      case ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE:
+        return (
+          <MinRequiredSlippage
+            minRequiredSlippage={error.minRequiredSlippage}
+          />
+        );
+      default:
+        return [];
+    }
+  });
+}

package/src/components/ConfirmSwapWarnings.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Typography } from '@rango-dev/ui';
+import { ConfirmSwapWarningTypes, ConfirmSwapWarnings } from '../types';
+import { BalanceWarnings } from './warnings/BalanceWarnings';
+
+export function ConfirmSwapWarnings(warnings: ConfirmSwapWarnings[]) {
+  return warnings.flatMap((warning) => {
+    switch (warning.type) {
+      case ConfirmSwapWarningTypes.ROUTE_UPDATED:
+        return <Typography variant="body2">Route has been updated.</Typography>;
+      case ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+        return (
+          <Typography variant="body2">{`Output amount changed to ${warning.newOutputAmount} 
+      (${warning.percentageChange}% change).`}</Typography>
+        );
+
+      case ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED:
+        return (
+          <Typography variant="body2">
+            Route swappers has been updated.
+          </Typography>
+        );
+      case ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED:
+        return (
+          <Typography variant="body2">
+            Route internal coins has been updated.
+          </Typography>
+        );
+      case ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE:
+        return <BalanceWarnings messages={warning.messages} />;
+      default:
+        return [];
+    }
+  });
+}

package/src/components/Footer.tsx

@@ -0,0 +1,8 @@
+import { styled } from '@rango-dev/ui';
+
+export const Footer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  paddingTop: '$16',
+});

package/src/components/Header.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { css, styled, Typography } from '@rango-dev/ui';
+import { HeaderButtons } from './HeaderButtons';
+import { useTranslation } from 'react-i18next';
+
+export const HeaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: '$16 0',
+});
+
+export interface PropTypes {
+  onClickRefresh: () => void;
+  title?: string;
+  titleSize?: number;
+  titleWeight?: number;
+}
+
+export function Header(props: PropTypes) {
+  const { onClickRefresh, title, titleSize, titleWeight } = props;
+  const { t } = useTranslation();
+  const titleStyle = css({
+    fontSize: `${titleSize}px !important`,
+    fontWeight: `${titleWeight} !important`,
+  });
+
+  return (
+    <HeaderContainer>
+      <Typography variant="h4" className={titleStyle()}>
+        {title ? t(title.toLocaleLowerCase()) : ''}
+      </Typography>
+      <HeaderButtons onClickRefresh={onClickRefresh} />
+    </HeaderContainer>
+  );
+}

package/src/components/HeaderButtons.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  SettingsIcon,
+  Tooltip,
+  styled,
+  Button,
+  HistoryIcon,
+  RetryIcon,
+} from '@rango-dev/ui';
+import { useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { PropTypes } from './Header';
+
+const ButtonsContainer = styled('div', {
+  display: 'flex',
+});
+
+export function HeaderButtons(props: PropTypes) {
+  const { onClickRefresh } = props;
+  const navigate = useNavigate();
+
+  return (
+    <ButtonsContainer>
+      <Tooltip content="Refresh">
+        <Button variant="ghost" onClick={onClickRefresh}>
+          <RetryIcon size={24} />
+        </Button>
+      </Tooltip>
+      <Tooltip content="Transactions History">
+        <Button
+          variant="ghost"
+          onClick={() => navigate(navigationRoutes.swaps)}
+        >
+          <HistoryIcon size={24} />
+        </Button>
+      </Tooltip>
+      <Tooltip content="Settings">
+        <Button
+          variant="ghost"
+          onClick={() => navigate(navigationRoutes.settings)}
+        >
+          <SettingsIcon size={24} />
+        </Button>
+      </Tooltip>
+    </ButtonsContainer>
+  );
+}