Refactor flows to pages and modals, Add Aliases (#180)

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

@@ -1,14 +1,14 @@
 import { styled } from 'styled-components';
-import { Column, Row, Spacer } from './Layout';
-import { SmallText, Text } from './Typography';
-import { ChevronIcon } from '../icons/ChevronIcon';
+import { Column, Row, Spacer } from '@/components/Layout';
+import { SmallText, Text } from '@/components/Typography';
+import { ChevronIcon } from '@/icons/ChevronIcon';
 import { useTheme } from 'styled-components';
-import { CogIcon } from '../icons/CogIcon';
-import { Button, GhostButton } from './Button';
+import { CogIcon } from '@/icons/CogIcon';
+import { Button, GhostButton } from '@/components/Button';
 import { useAtom } from 'jotai';
-import { skipAssets } from '../state/skip';
-import { useUsdValue } from '../utils/useUsdValue';
-import { formatUSD } from '../utils/intl';
+import { skipAssets } from '@/state/skip';
+import { useUsdValue } from '@/utils/useUsdValue';
+import { formatUSD } from '@/utils/intl';
 
 export type AssetChainInputProps = {
   value?: string;

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

@@ -1,6 +1,6 @@
 import { css, styled } from 'styled-components';
-import { FlexProps, flexProps } from './Layout';
-import { removeButtonStyles, SmallText } from './Typography';
+import { FlexProps, flexProps } from '@/components/Layout';
+import { removeButtonStyles, SmallText } from '@/components/Typography';
 
 export type GhostButtonProps = {
   secondary?: boolean;

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

@@ -1,7 +1,7 @@
 import { styled, useTheme } from 'styled-components';
-import { Column } from './Layout';
-import { iconMap, ICONS } from '../icons';
-import { SmallText, Text } from './Typography';
+import { Column } from '@/components/Layout';
+import { iconMap, ICONS } from '@/icons';
+import { SmallText, Text } from '@/components/Typography';
 
 export type ErrorStateProps = {
   icon?: ICONS;

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

@@ -1,9 +1,9 @@
 import { styled } from 'styled-components';
-import { Row } from './Layout';
-import { SmallText, Text } from './Typography';
+import { Row } from '@/components/Layout';
+import { SmallText, Text } from '@/components/Typography';
 import { useTheme } from 'styled-components';
-import { ICONS, iconMap } from '../icons';
-import { getBrandButtonTextColor } from '../utils/colors';
+import { ICONS, iconMap } from '@/icons';
+import { getBrandButtonTextColor } from '@/utils/colors';
 
 export type MainButtonProps = {
   label: string;

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

@@ -1,9 +1,9 @@
 import { css, styled } from 'styled-components';
 import * as Dialog from '@radix-ui/react-dialog';
-import { ShadowDomAndProviders } from '../widget/ShadowDomAndProviders';
+import { ShadowDomAndProviders } from '@/widget/ShadowDomAndProviders';
 import { useModal } from '@ebay/nice-modal-react';
 import { useEffect } from 'react';
-import { PartialTheme } from '../widget/theme';
+import { PartialTheme } from '@/widget/theme';
 
 export type ModalProps = {
   children: React.ReactNode;

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

@@ -1,6 +1,6 @@
 import { css, styled } from 'styled-components';
-import { Row } from './Layout';
-import { removeButtonStyles, Text } from './Typography';
+import { Row } from '@/components/Layout';
+import { removeButtonStyles, Text } from '@/components/Typography';
 
 export type ModalRowItemProps = {
   leftContent?: React.ReactNode;

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

@@ -1,12 +1,12 @@
 import { useCallback, useMemo } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { LeftArrowIcon } from '../icons/ArrowIcon';
-import { hashObject } from '../utils/misc';
-import { Button } from './Button';
-import { Row, Column } from './Layout';
+import { LeftArrowIcon } from '@/icons/ArrowIcon';
+import { hashObject } from '@/utils/misc';
+import { Button } from '@/components/Button';
+import { Row, Column } from '@/components/Layout';
 import { ModalRowItem } from './ModalRowItem';
 import { VirtualList } from './VirtualList';
-import { Text } from '../components/Typography';
+import { Text } from '@/components/Typography';
 
 export type RenderWalletListProps = {
   title: string;

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

@@ -1,5 +1,5 @@
 import { css, styled } from 'styled-components';
-import { getHexColor, opacityToHex } from '../utils/colors';
+import { getHexColor, opacityToHex } from '@/utils/colors';
 
 export const SkeletonElement = styled.div<{
   width: number;

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

@@ -1,5 +1,5 @@
 import { css, styled } from 'styled-components';
-import { getBrandButtonTextColor } from '../utils/colors';
+import { getBrandButtonTextColor } from '@/utils/colors';
 
 type TextProps = {
   fontSize?: number;

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

@@ -1,5 +1,5 @@
 import List from 'rc-virtual-list';
-import { getHexColor, opacityToHex } from '../utils/colors';
+import { getHexColor, opacityToHex } from '@/utils/colors';
 import { useTheme } from 'styled-components';
 
 export type VirtualListProps<T> = {

packages/widget-v2/src/icons/ArrowIcon.tsx

@@ -1,4 +1,4 @@
-import { withBoundProps } from '../utils/misc';
+import { withBoundProps } from '@/utils/misc';
 
 type IconProps = {
   color?: string;

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

@@ -1,22 +1,22 @@
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
-import { Modal, ModalProps } from '../../components/Modal';
-import { Column, Row } from '../../components/Layout';
+import { Modal, ModalProps } from '@/components/Modal';
+import { Column, Row } from '@/components/Layout';
 import { css, styled } from 'styled-components';
 import { useCallback, useMemo, useState } from 'react';
-import { RightArrowIcon } from '../../icons/ArrowIcon';
+import { RightArrowIcon } from '@/icons/ArrowIcon';
 import {
   RenderWalletList,
   RenderWalletListHeader,
   Wallet,
-} from '../../components/RenderWalletList';
-import { WALLET_LIST } from '../WalletSelectorFlow/WalletSelectorFlow';
-import { Button } from '../../components/Button';
-import { SmallText, Text } from '../../components/Typography';
-import { destinationAssetAtom, destinationWalletAtom } from '../../state/swap';
+} from '@/components/RenderWalletList';
+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 { useAtom } from 'jotai';
-import { getChain } from '../../state/skip';
+import { getChain } from '@/state/skip';
 
-export const ManualAddressFlow = NiceModal.create((modalProps: ModalProps) => {
+export const ManualAddressModal = NiceModal.create((modalProps: ModalProps) => {
   const { theme } = modalProps;
   const modal = useModal();
   const [destinationAsset] = useAtom(destinationAssetAtom);

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

@@ -1,26 +1,26 @@
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
-import { Modal, ModalProps } from '../../components/Modal';
-import { Column } from '../../components/Layout';
+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/skip';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { VirtualList } from '../../components/VirtualList';
+import { VirtualList } from '@/components/VirtualList';
 import {
   isChainWithAsset,
-  RowItem,
+  TokenAndChainSelectorModalRowItem,
   Skeleton,
-} from './TokenAndChainSelectorFlowRowItem';
-import { SearchInput } from './TokenAndChainSelectorFlowSearchInput';
+} from './TokenAndChainSelectorModalRowItem';
+import { TokenAndChainSelectorModalSearchInput } from './TokenAndChainSelectorModalSearchInput';
 
-export type TokenAndChainSelectorFlowProps = ModalProps & {
+export type TokenAndChainSelectorModalProps = ModalProps & {
   onSelect: (token: ClientAsset | null) => void;
   chainsContainingAsset?: ChainWithAsset[];
   asset?: Partial<ClientAsset>;
 };
 
-export const TokenAndChainSelectorFlow = NiceModal.create(
-  (modalProps: TokenAndChainSelectorFlowProps) => {
+export const TokenAndChainSelectorModal = NiceModal.create(
+  (modalProps: TokenAndChainSelectorModalProps) => {
     const modal = useModal();
     const { onSelect, chainsContainingAsset, asset } = modalProps;
     const [{ data: assets, isPending }] = useAtom(skipAssets);
@@ -66,7 +66,7 @@ export const TokenAndChainSelectorFlow = NiceModal.create(
     const renderItem = useCallback(
       (asset: ClientAsset | ChainWithAsset, index: number) => {
         return (
-          <RowItem
+          <TokenAndChainSelectorModalRowItem
             item={asset}
             index={index}
             onSelect={onSelect}
@@ -80,7 +80,10 @@ export const TokenAndChainSelectorFlow = NiceModal.create(
     return (
       <Modal {...modalProps}>
         <StyledContainer>
-          <SearchInput onSearch={handleSearch} asset={asset} />
+          <TokenAndChainSelectorModalSearchInput
+            onSearch={handleSearch}
+            asset={asset}
+          />
           {showSkeleton || (!filteredAssets && !filteredChains) ? (
             <Column>
               {Array.from({ length: 10 }, (_, index) => (

packages/widget-v2/src/widget/TokenAndChainSelectorFlow/TokenAndChainSelectorFlowRowItem.tsx → packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalRowItem.tsx

@@ -1,21 +1,11 @@
-import { Row } from '../../components/Layout';
-import { ModalRowItem } from '../../components/ModalRowItem';
-import { SmallText, Text } from '../../components/Typography';
-import { ChainWithAsset, ClientAsset } from '../../state/skip';
-import {
-  CircleSkeletonElement,
-  SkeletonElement,
-} from '../../components/Skeleton';
+import { Row } from '@/components/Layout';
+import { ModalRowItem } from '@/components/ModalRowItem';
+import { SmallText, Text } from '@/components/Typography';
+import { ChainWithAsset, ClientAsset } from '@/state/skip';
+import { CircleSkeletonElement, SkeletonElement } from '@/components/Skeleton';
 import { styled } from 'styled-components';
 import { Chain } from '@chain-registry/types';
 
-export type RowItemType = {
-  item: ClientAsset | ChainWithAsset;
-  index: number;
-  skeleton: React.ReactElement;
-  onSelect: (token: ClientAsset | null) => void;
-};
-
 export const isClientAsset = (
   item: ClientAsset | ChainWithAsset
 ): item is ClientAsset => {
@@ -28,7 +18,19 @@ export const isChainWithAsset = (
   return (item as Chain).chain_id !== undefined;
 };
 
-export const RowItem = ({ item, index, skeleton, onSelect }: RowItemType) => {
+export type TokenAndChainSelectorModalRowItemProps = {
+  item: ClientAsset | ChainWithAsset;
+  index: number;
+  skeleton: React.ReactElement;
+  onSelect: (token: ClientAsset | null) => void;
+};
+
+export const TokenAndChainSelectorModalRowItem = ({
+  item,
+  index,
+  skeleton,
+  onSelect,
+}: TokenAndChainSelectorModalRowItemProps) => {
   if (!item) return skeleton;
 
   if (isClientAsset(item)) {

packages/widget-v2/src/widget/TokenAndChainSelectorFlow/TokenAndChainSelectorFlowSearchInput.tsx → packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalSearchInput.tsx

@@ -1,25 +1,25 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { styled, useTheme } from 'styled-components';
-import { Row } from '../../components/Layout';
-import { SkipLogoIcon } from '../../icons/SkipLogoIcon';
-import { SmallText } from '../../components/Typography';
-import { SearchIcon } from '../../icons/SearchIcon.tsx';
-import { StyledAssetLabel } from '../../components/AssetChainInput.tsx';
-import { ClientAsset } from '../../state/skip.ts';
-import { LeftArrowIcon } from '../../icons/ArrowIcon.tsx';
+import { Row } from '@/components/Layout';
+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 { LeftArrowIcon } from '@/icons/ArrowIcon';
 import { useModal } from '@ebay/nice-modal-react';
-import { Button } from '../../components/Button.tsx';
-import { Text } from '../../components/Typography';
+import { Button } from '@/components/Button';
+import { Text } from '@/components/Typography';
 
-interface SearchInputProps {
+type TokenAndChainSelectorModalSearchInputProps = {
   onSearch: (term: string) => void;
   asset?: Partial<ClientAsset>;
-}
+};
 
-export const SearchInput: React.FC<SearchInputProps> = ({
+export const TokenAndChainSelectorModalSearchInput = ({
   onSearch,
   asset,
-}) => {
+}: TokenAndChainSelectorModalSearchInputProps) => {
   const theme = useTheme();
   const modal = useModal();
   const inputRef = useRef<HTMLInputElement>(null);

packages/widget-v2/src/widget/TransactionHistoryFlow/TransactionHistoryFlow.tsx → packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModal.tsx

@@ -1,34 +1,34 @@
 import NiceModal from '@ebay/nice-modal-react';
-import { Modal, ModalProps } from '../../components/Modal';
-import { Column } from '../../components/Layout';
+import { Modal, ModalProps } from '@/components/Modal';
+import { Column } from '@/components/Layout';
 import { styled } from 'styled-components';
-import { SwapFlowHeader } from '../SwapFlow/SwapFlowHeader';
-import { SwapFlowFooter } from '../SwapFlow/SwapFlowFooter';
-import { ICONS } from '../../icons';
-import { VirtualList } from '../../components/VirtualList';
+import { SwapPageHeader } from '@/pages/SwapPage/SwapPageHeader';
+import { SwapPageFooter } from '@/pages/SwapPage/SwapPageFooter';
+import { ICONS } from '@/icons';
+import { VirtualList } from '@/components/VirtualList';
 import {
-  TransactionHistoryFlowItem,
+  TransactionHistoryModalItem,
   TxHistoryItem,
-} from './TransactionHistoryFlowItem';
+} from './TransactionHistoryModalItem';
 import { useState } from 'react';
-import { HistoryIcon } from '../../icons/HistoryIcon';
-import { SmallText } from '../../components/Typography';
+import { HistoryIcon } from '@/icons/HistoryIcon';
+import { SmallText } from '@/components/Typography';
 
 const ITEM_HEIGHT = 40;
 const ITEM_GAP = 5;
 
-export type TransactionHistoryFlowProps = ModalProps & {
+export type TransactionHistoryModalProps = ModalProps & {
   txHistory: TxHistoryItem[];
 };
 
-export const TransactionHistoryFlow = NiceModal.create(
-  ({ txHistory, ...modalProps }: TransactionHistoryFlowProps) => {
+export const TransactionHistoryModal = NiceModal.create(
+  ({ txHistory, ...modalProps }: TransactionHistoryModalProps) => {
     const [itemIndexToShowDetail, setItemIndexToShowDetail] = useState<
       number | undefined
     >();
     return (
       <Modal {...modalProps}>
-        <SwapFlowHeader
+        <SwapPageHeader
           leftButton={{
             label: 'Back',
             icon: ICONS.thinArrow,
@@ -55,7 +55,7 @@ export const TransactionHistoryFlow = NiceModal.create(
               height={300}
               itemHeight={ITEM_HEIGHT + ITEM_GAP}
               renderItem={(item, index) => (
-                <TransactionHistoryFlowItem
+                <TransactionHistoryModalItem
                   txHistoryItem={item}
                   showDetails={index === itemIndexToShowDetail}
                   onClickRow={() => {
@@ -74,7 +74,7 @@ export const TransactionHistoryFlow = NiceModal.create(
             />
           )}
         </StyledContainer>
-        <SwapFlowFooter />
+        <SwapPageFooter />
       </Modal>
     );
   }