Add Router, errorAtom, renderLogic

packages/widget-v2/package.json

@@ -56,6 +56,7 @@
     "lodash.debounce": "^4.0.8",
     "pluralize": "^8.0.0",
     "rc-virtual-list": "^3.14.5",
+    "react-error-boundary": "^4.0.13",
     "react-shadow-scope": "^1.0.5",
     "zod": "^3.23.8"
   }

packages/widget-v2/src/components/AssetChainInput.tsx

@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components';
 import { CogIcon } from '@/icons/CogIcon';
 import { Button, GhostButton } from '@/components/Button';
 import { useAtom } from 'jotai';
-import { skipAssets } from '@/state/skip';
+import { skipAssets } from '@/state/skipClient';
 import { useUsdValue } from '@/utils/useUsdValue';
 import { formatUSD } from '@/utils/intl';
 

packages/widget-v2/src/modals/ManualAddressModal/ManualAddressModal.tsx

@@ -12,9 +12,9 @@ import {
 import { WALLET_LIST } from '@/modals/WalletSelectorModal/WalletSelectorFlow';
 import { Button } from '@/components/Button';
 import { SmallText, Text } from '@/components/Typography';
-import { destinationAssetAtom, destinationWalletAtom } from '@/state/swap';
+import { destinationAssetAtom, destinationWalletAtom } from '@/state/swapPage';
 import { useAtom } from 'jotai';
-import { getChain } from '@/state/skip';
+import { getChain } from '@/state/skipClient';
 
 export const ManualAddressModal = NiceModal.create((modalProps: ModalProps) => {
   const { theme } = modalProps;

packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx

@@ -3,7 +3,7 @@ import { Modal, ModalProps } from '@/components/Modal';
 import { Column } from '@/components/Layout';
 import { styled } from 'styled-components';
 import { useAtom } from 'jotai';
-import { ChainWithAsset, ClientAsset, skipAssets } from '@/state/skip';
+import { ChainWithAsset, ClientAsset, skipAssets } from '@/state/skipClient';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { VirtualList } from '@/components/VirtualList';
 import {

packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx

@@ -1,7 +1,7 @@
 import { Row } from '@/components/Layout';
 import { ModalRowItem } from '@/components/ModalRowItem';
 import { SmallText, Text } from '@/components/Typography';
-import { ChainWithAsset, ClientAsset } from '@/state/skip';
+import { ChainWithAsset, ClientAsset } from '@/state/skipClient';
 import { CircleSkeletonElement, SkeletonElement } from '@/components/Skeleton';
 import { styled } from 'styled-components';
 import { Chain } from '@chain-registry/types';

packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalSearchInput.tsx

@@ -5,7 +5,7 @@ import { SkipLogoIcon } from '@/icons/SkipLogoIcon';
 import { SmallText } from '@/components/Typography';
 import { SearchIcon } from '@/icons/SearchIcon';
 import { StyledAssetLabel } from '@/components/AssetChainInput';
-import { ClientAsset } from '@/state/skip';
+import { ClientAsset } from '@/state/skipClient';
 import { LeftArrowIcon } from '@/icons/ArrowIcon';
 import { useModal } from '@ebay/nice-modal-react';
 import { Button } from '@/components/Button';

packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModalItem.tsx

@@ -1,7 +1,7 @@
 import { RouteResponse } from '@skip-go/client';
 import { SmallText } from '@/components/Typography';
 import { useAtom } from 'jotai';
-import { skipAssets, getChain, ClientAsset } from '@/state/skip';
+import { skipAssets, getChain, ClientAsset } from '@/state/skipClient';
 import { Column, Row } from '@/components/Layout';
 import styled, { useTheme } from 'styled-components';
 import { getFormattedAssetAmount } from '@/utils/crypto';

packages/widget-v2/src/pages/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,13 @@
+import { errorAtom } from '@/state/errorPage';
+import { useResetAtom } from 'jotai/utils';
+
+export const ErrorPage = () => {
+  const resetError = useResetAtom(errorAtom);
+
+  return (
+    <div>
+      error page
+      <button onClick={() => resetError()}>reset</button>
+    </div>
+  );
+};

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPage.tsx

@@ -8,7 +8,7 @@ import { useModal } from '@ebay/nice-modal-react';
 import { ManualAddressModal } from '@/modals/ManualAddressModal/ManualAddressModal';
 import styled, { useTheme } from 'styled-components';
 import { useAtom } from 'jotai';
-import { destinationWalletAtom } from '@/state/swap';
+import { destinationWalletAtom } from '@/state/swapPage';
 import { SwapExecutionPageRouteSimple } from './SwapExecutionPageRouteSimple';
 import { SwapExecutionPageRouteDetailed } from './SwapExecutionPageRouteDetailed';
 
@@ -17,6 +17,7 @@ import { Operation, txState } from './SwapExecutionPageRouteDetailedRow';
 import { SmallText } from '@/components/Typography';
 import { SignatureIcon } from '@/icons/SignatureIcon';
 import pluralize from 'pluralize';
+import operations from './operations.json';
 
 enum SwapExecutionState {
   destinationAddressUnset,
@@ -25,14 +26,10 @@ enum SwapExecutionState {
   confirmed,
 }
 
-export type SwapExecutionPageProps = {
-  operations: Operation[];
-};
-
 const SIGNATURES_REQUIRED = 2;
 const TX_DELAY_MS = 5_000; // 5 seconds
 
-export const SwapExecutionPage = ({ operations }: SwapExecutionPageProps) => {
+export const SwapExecutionPage = () => {
   const theme = useTheme();
 
   const [destinationWallet] = useAtom(destinationWalletAtom);
@@ -157,7 +154,10 @@ export const SwapExecutionPage = ({ operations }: SwapExecutionPageProps) => {
           onClick: () => setSimpleRoute(!simpleRoute),
         }}
       />
-      <SwapExecutionPageRoute txStateMap={txStateMap} operations={operations} />
+      <SwapExecutionPageRoute
+        txStateMap={txStateMap}
+        operations={operations as Operation[]}
+      />
       {renderMainButton}
       <SwapPageFooter
         rightContent={

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailedRow.tsx

@@ -1,7 +1,7 @@
 import { useAtom } from 'jotai';
 import { Row } from '@/components/Layout';
 import { SmallText } from '@/components/Typography';
-import { getChain, skipAssets } from '@/state/skip';
+import { getChain, skipAssets } from '@/state/skipClient';
 import { getFormattedAssetAmount } from '@/utils/crypto';
 import { css, styled, useTheme } from 'styled-components';
 import React from 'react';

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimple.tsx

@@ -5,7 +5,7 @@ import { useAtom } from 'jotai';
 import { SwapExecutionPageRouteSimpleRow } from './SwapExecutionPageRouteSimpleRow';
 import { BridgeArrowIcon } from '@/icons/BridgeArrowIcon';
 import { ICONS } from '@/icons';
-import { destinationWalletAtom } from '@/state/swap';
+import { destinationWalletAtom } from '@/state/swapPage';
 import { WALLET_LIST } from '@/modals/WalletSelectorModal/WalletSelectorFlow';
 
 export type SwapExecutionPageRouteSimpleProps = {

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx

@@ -2,7 +2,7 @@ import { useTheme } from 'styled-components';
 import { Button } from '@/components/Button';
 import { Column, Row } from '@/components/Layout';
 import { SmallText, Text } from '@/components/Typography';
-import { getChain, skipAssets } from '@/state/skip';
+import { getChain, skipAssets } from '@/state/skipClient';
 import { getFormattedAssetAmount } from '@/utils/crypto';
 import { Wallet } from '@/components/RenderWalletList';
 import { iconMap, ICONS } from '@/icons';

packages/widget-v2/src/pages/SwapPage/SwapPage.tsx

@@ -7,8 +7,8 @@ import { Column } from '@/components/Layout';
 import { MainButton } from '@/components/MainButton';
 import { SmallText } from '@/components/Typography';
 import { ICONS } from '@/icons';
-import { skipAssets, getChainsContainingAsset } from '@/state/skip';
-import { sourceAssetAtom, destinationAssetAtom } from '@/state/swap';
+import { skipAssets, getChainsContainingAsset } from '@/state/skipClient';
+import { sourceAssetAtom, destinationAssetAtom } from '@/state/swapPage';
 import { TokenAndChainSelectorModal } from '@/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal';
 import { SwapPageSettings } from './SwapPageSettings';
 import { SwapPageFooter } from './SwapPageFooter';

packages/widget-v2/src/pages/SwapPage/swapPageState.ts

@@ -0,0 +1,15 @@
+import { atom } from 'jotai';
+import { ClientAsset } from '@/state/skipClient';
+import { Wallet } from '@/components/RenderWalletList';
+
+export type AssetAtom = Partial<ClientAsset> & {
+  amount?: string;
+};
+
+export const sourceAssetAtom = atom<AssetAtom>();
+
+export const destinationAssetAtom = atom<AssetAtom>();
+
+export const connectedWalletAtom = atom<Wallet>();
+
+export const destinationWalletAtom = atom<Wallet>();

packages/widget-v2/src/state/errorPage.ts

@@ -0,0 +1,7 @@
+import { atomWithReset } from 'jotai/utils';
+
+export const errorAtom = atomWithReset<
+  ExpectedErrorDetails | Error | undefined
+>(undefined);
+
+type ExpectedErrorDetails = {};

packages/widget-v2/src/state/router.ts

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+
+export enum Routes {
+  SwapPage,
+  SwapExecutionPage,
+}
+
+export const currentPageAtom = atom<Routes>(Routes.SwapPage);

packages/widget-v2/src/state/swap.ts → packages/widget-v2/src/state/swapPage.ts

@@ -1,5 +1,5 @@
 import { atom } from 'jotai';
-import { ClientAsset } from './skip';
+import { ClientAsset } from './skipClient';
 import { Wallet } from '@/components/RenderWalletList';
 
 export type AssetAtom = Partial<ClientAsset> & {

packages/widget-v2/src/stories/ManualAddressModals.stories.tsx

@@ -4,8 +4,8 @@ import { Row } from '@/components/Layout';
 import { defaultTheme, lightTheme } from '@/widget/theme';
 import { ManualAddressModal } from '@/modals/ManualAddressModal/ManualAddressModal';
 import { useEffect, useState } from 'react';
-import { skipAssets } from '@/state/skip';
-import { destinationAssetAtom } from '@/state/swap';
+import { skipAssets } from '@/state/skipClient';
+import { destinationAssetAtom } from '@/state/swapPage';
 import { useAtom } from 'jotai';
 
 const meta = {

packages/widget-v2/src/stories/SwapExecutionFlow.stories.tsx → packages/widget-v2/src/stories/SwapExecutionPage.stories.tsx

@@ -2,12 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { renderLightAndDarkTheme } from './renderLightAndDarkTheme';
 import { SwapExecutionPage } from '@/pages/SwapExecutionPage/SwapExecutionPage';
 import NiceModal from '@ebay/nice-modal-react';
-import { destinationAssetAtom } from '@/state/swap';
+import { destinationAssetAtom } from '@/state/swapPage';
 import { useAtom } from 'jotai';
 import operations from '@/pages/SwapExecutionPage/operations.json';
-import { skipAssets } from '@/state/skip';
+import { skipAssets } from '@/state/skipClient';
 import { useEffect, useState } from 'react';
-import { Operation } from '@/pages/SwapExecutionPage/SwapExecutionPageRouteDetailedRow';
 
 const meta = {
   title: 'Pages/SwapExecutionPage',
@@ -16,8 +15,8 @@ const meta = {
     const [_destinationAsset, setDestinationAsset] =
       useAtom(destinationAssetAtom);
     const [shouldRender, setShouldRender] = useState(false);
-    const firstOperation = props.operations[0];
-    const lastOperation = props.operations[props.operations.length - 1];
+    const firstOperation = operations[0];
+    const lastOperation = operations[operations.length - 1];
 
     const [{ data: assets }] = useAtom(skipAssets);
 
@@ -57,7 +56,5 @@ type Story = StoryObj<typeof meta>;
 export default meta;
 
 export const SwapExecutionPageExample: Story = {
-  args: {
-    operations: operations as Operation[],
-  },
+  args: {},
 };

packages/widget-v2/src/utils/useUsdValue.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { z } from 'zod';
-import { getAssets } from '@/state/skip';
+import { getAssets } from '@/state/skipClient';
 
 interface Args {
   coingeckoID: string;

packages/widget-v2/src/widget/Router.tsx

@@ -0,0 +1,31 @@
+import { ErrorPage } from '@/pages/ErrorPage/ErrorPage';
+import { SwapExecutionPage } from '@/pages/SwapExecutionPage/SwapExecutionPage';
+import { SwapPage } from '@/pages/SwapPage/SwapPage';
+import { errorAtom } from '@/state/errorPage';
+import { Routes, currentPageAtom } from '@/state/router';
+import { useAtom } from 'jotai';
+import { ErrorBoundary } from 'react-error-boundary';
+
+export const Router = () => {
+  const [currentPage] = useAtom(currentPageAtom);
+  const [error, setError] = useAtom(errorAtom);
+
+  if (error) {
+    return <ErrorPage />;
+  }
+
+  switch (currentPage) {
+    case Routes.SwapPage:
+      return (
+        <ErrorBoundary fallback={null} onError={(error) => setError(error)}>
+          <SwapPage />
+        </ErrorBoundary>
+      );
+    case Routes.SwapExecutionPage:
+      return (
+        <ErrorBoundary fallback={null} onError={(error) => setError(error)}>
+          <SwapExecutionPage />
+        </ErrorBoundary>
+      );
+  }
+};

packages/widget-v2/src/widget/Widget.tsx

@@ -1,10 +1,10 @@
 import { ShadowDomAndProviders } from './ShadowDomAndProviders';
-import { SwapPage } from '@/pages/SwapPage/SwapPage';
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
 import { styled } from 'styled-components';
 import { Modal } from '@/components/Modal';
 import { cloneElement, ReactElement } from 'react';
 import { PartialTheme } from './theme';
+import { Router } from './Router';
 
 export type SwapWidgetProps = {
   theme?: PartialTheme;
@@ -15,7 +15,7 @@ export const SwapWidget = (props: SwapWidgetProps) => {
     <NiceModal.Provider>
       <ShadowDomAndProviders {...props}>
         <WidgetContainer>
-          <SwapPage />
+          <Router />
         </WidgetContainer>
       </ShadowDomAndProviders>
     </NiceModal.Provider>
@@ -26,7 +26,7 @@ const SwapWidgetWithoutNiceModalProvider = (props: SwapWidgetProps) => {
   return (
     <ShadowDomAndProviders {...props}>
       <WidgetContainer>
-        <SwapPage />
+        <Router />
       </WidgetContainer>
     </ShadowDomAndProviders>
   );

packages/widget-v2/tsconfig.app.json

@@ -26,7 +26,7 @@
     /* Aliases */
     "baseUrl": ".",
     "paths": {
-      "@*": ["src/*"]
+      "@/*": ["src/*"]
     }
   },
   "include": ["src"]

yarn.lock

@@ -24160,6 +24160,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^4.0.13":
+  version: 4.0.13
+  resolution: "react-error-boundary@npm:4.0.13"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: 50398d080015d51d22c6f94c56f4ea336d10232d72345b36ee6f15b6b643666d20b072829b02f091a80e5af68fe67f68a62ef0d2b649dbd759ead929304449af
+  languageName: node
+  linkType: hard
+
 "react-hot-toast@npm:^2.4.1":
   version: 2.4.1
   resolution: "react-hot-toast@npm:2.4.1"
@@ -28495,6 +28506,7 @@ __metadata:
     lodash.debounce: ^4.0.8
     pluralize: ^8.0.0
     rc-virtual-list: ^3.14.5
+    react-error-boundary: ^4.0.13
     react-shadow-scope: ^1.0.5
     storybook: ^8.2.6
     styled-components: ^6.0.0