@openocean.finance/widget 1.0.0

package/src/i18n/zh.json

@@ -0,0 +1,319 @@
+{
+  "language": {
+    "name": "中文",
+    "title": "语言"
+  },
+  "format": {
+    "currency": "{{value, currencyExt(currency: USD)}}",
+    "number": "{{value, number(maximumFractionDigits: 9)}}",
+    "percent": "{{value, percent(maximumFractionDigits: 2)}}"
+  },
+  "button": {
+    "auto": "自动",
+    "bookmark": "收藏",
+    "bookmarks": "收藏夹",
+    "bridge": "跨链",
+    "bridgeReview": "查看跨链详情",
+    "buy": "购买",
+    "cancel": "取消",
+    "checkoutReview": "查看购买详情",
+    "close": "关闭",
+    "confirm": "确认",
+    "connectAnotherWallet": "连接另一个钱包",
+    "connectWallet": "关联钱包",
+    "contactSupport": "联系技术支持",
+    "continue": "继续",
+    "copyAddress": "复制地址",
+    "dark": "深色主题",
+    "delete": "删除",
+    "deposit": "存款",
+    "depositReview": "查看存款详情",
+    "disconnect": "断开连接",
+    "done": "确认",
+    "exchange": "兑换",
+    "getGas": "开始兑换燃气费",
+    "learnMore": "了解更多",
+    "light": "浅色主题",
+    "max": "最大",
+    "ok": "确认",
+    "options": "选项",
+    "removeTransaction": "删除交易",
+    "reset": "重置",
+    "resetSettings": "恢复默认设置",
+    "seeDetails": "查看详情",
+    "showAll": "显示所有",
+    "startBridging": "开始跨链",
+    "startSwapping": "开始兑换",
+    "swap": "兑换",
+    "swapReview": "查看兑换详情",
+    "tryAgain": "重试",
+    "viewCoverage": "查看我们的覆盖范围",
+    "viewOnExplorer": "在区块链浏览器上查看"
+  },
+  "header": {
+    "activeTransactions": "进行中的交易",
+    "amount": "",
+    "bookmarkedWallets": "已收藏的钱包",
+    "bridge": "跨链",
+    "checkout": "支付",
+    "checkoutDetails": "交易细节",
+    "deposit": "存款",
+    "depositDetails": "存款详情",
+    "depositTo": "",
+    "exchange": "兑换",
+    "from": "兑换自",
+    "gas": "燃气费",
+    "payWith": "支付方式",
+    "receive": "接收",
+    "recentWallets": "最近使用的钱包",
+    "selectChain": "选择网络",
+    "selectWallet": "选择你的钱包",
+    "send": "发送",
+    "sendToWallet": "发送到该钱包",
+    "settings": "设置",
+    "swap": "兑换",
+    "to": "兑换为",
+    "transactionDetails": "交易详情",
+    "transactionHistory": "交易记录",
+    "walletConnected": "连接钱包",
+    "youGet": "您获得",
+    "youPay": "需要支付"
+  },
+  "info": {
+    "message": {
+      "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",
+      "emptyActiveTransactions": "正在进行的兑换将在这里显示。一旦完成，你可在兑换记录中找到它们。",
+      "emptyTokenList": "我们无法在 {{chainName}} 链上找到这些代币，或者你的钱包内没有这些代币。请再次搜索或者选择其他链再试一次。",
+      "emptyChainList": "我们找不到任何匹配的链",
+      "emptyBridgesList": "我们找不到任何匹配的桥",
+      "emptyExchangesList": "我们找不到任何匹配的交易所",
+      "emptyTransactionHistory": "交易记录只存储在本地，如果您清除浏览器数据，交易记录将被删除。",
+      "fundsToExchange": "发送到交易所的资金可能会丢失",
+      "toAddressIsRequired": "请提供收款的钱包地址。",
+      "routeNotFound": "导致其的原因可能是：流动性低，所选定代币的数额太低，燃气费过高，或者当前没有合适的交易路径。"
+    },
+    "title": {
+      "autoRefuel": "获得 {{chainName}} 链的燃气费",
+      "emptyActiveTransactions": "没有正在进行的交易",
+      "emptyTransactionHistory": "近期无交易",
+      "routeNotFound": "没有可用的路由"
+    }
+  },
+  "success": {
+    "message": {
+      "exchangePartiallySuccessful": "我们尝试执行这笔交易，但是因为滑点设置的问题或者 {{tokenSymbol}} 代币流动性不足，{{tool}} 无法完成交易",
+      "exchangeSuccessful": "{{walletAddress}} 钱包在 {{chainName}} 链上收到 {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}",
+      "checkoutSuccessful": "您的 {{walletAddress}} 钱包在 {{chainName}} 链上拥有该 {{assetName}} 财产"
+    },
+    "title": {
+      "bridgePartiallySuccessful": "跨链部分成功",
+      "bridgeSuccessful": "跨链成功",
+      "depositSuccessful": "存款成功",
+      "checkoutSuccessful": "购买成功",
+      "refundIssued": "退款已受理",
+      "swapPartiallySuccessful": "兑换部分完成",
+      "swapSuccessful": "兑换成功"
+    }
+  },
+  "warning": {
+    "message": {
+      "deleteActiveTransactions": "正在进行的交易记录只存储在本地，如果删除它们，我们将无法恢复这些记录。",
+      "deleteTransactionHistory": "交易记录只存储在本地，如果你删除它，我们将无法恢复这些记录。",
+      "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
+      "insufficientFunds": "你没有足够的资金来完成这笔交易。",
+      "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
+      "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
+      "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。",
+      "slippageOutsideRecommendedLimits": "过高的滑点可能会导致交易被抢跑，造成财产损失"
+    },
+    "title": {
+      "deleteActiveTransactions": "确定要删除所有正在进行的交易吗？",
+      "deleteTransaction": "确定要删除该交易吗？",
+      "deleteTransactionHistory": "确定要清空交易记录吗?",
+      "highValueLoss": "大额资金损失",
+      "insufficientGas": "燃气费不足",
+      "rateChanged": "兑换比例变动",
+      "resetSettings": "确定要恢复默认设置吗?"
+    }
+  },
+  "error": {
+    "message": {
+      "allowanceRequired": "{{tokenSymbol}} 的转账金额超过了您设置的支出上限。请提高该代币的支出上限，然后重试。",
+      "insufficientFunds": "您没有足够的燃气费支付该交易。",
+      "remainInYourWallet": "{{chainName}} 链上 {{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 仍在您的钱包内。",
+      "signatureRejected": "需要您签名来完成此次交易。不用担心，{{chainName}} 链上 {{amount, number(maximumFractionDigits: 9)}} 个 {{tokenSymbol}} 仍在您的钱包里。",
+      "slippageThreshold": "滑点大于预设值，请选择其他路由并获取新的价格。",
+      "transactionCanceled": "交易已被取消。",
+      "transactionConflict": "交易无法处理，因为它与使用相同资金的另一个待处理交易相冲突。 请等待交易确认或检查您的交易历史，然后再次尝试。",
+      "transactionExpired": "区块高度已超过允许的最大值，或者交易哈希值已经过期。",
+      "transactionFailed": "请查看区块浏览器以了解更多信息。",
+      "transactionNotSent": "交易未能发送。",
+      "transactionSimulationFailed": "该交易模拟执行失败。",
+      "unknown": "请再试一次或者联系支持。",
+      "walletChangedDuringExecution": "询价的钱包地址与试图签署交易的钱包地址不匹配，请确保在整个交易执行过程中使用相同的钱包地址。"
+    },
+    "title": {
+      "allowanceRequired": "余额不足",
+      "balanceIsTooLow": "余额太低",
+      "bookmarkAlreadyExists": "钱包: {{name}}，已被收藏",
+      "bookmarkNameRequired": "请输入收藏钱包的名称",
+      "chainSwitch": "请切换当前网络",
+      "exchangeRateUpdateCanceled": "兑换率更新已取消",
+      "gasLimitIsTooLow": "燃气费设置过低",
+      "insufficientFunds": "资金不足",
+      "signatureRejected": "交易需要签名。",
+      "slippageNotMet": "滑点未满足",
+      "transactionCanceled": "交易取消",
+      "transactionConflict": "交易冲突",
+      "transactionExpired": "交易过期",
+      "transactionFailed": "交易失败",
+      "transactionSimulationFailed": "交易模拟失败",
+      "transactionUnderpriced": "交易定价过低",
+      "transactionUnprepared": "无法开始该交易",
+      "unknown": "未知错误",
+      "walletAddressInvalid": "钱包地址或域名无效",
+      "walletAddressInvalid_chain": "钱包地址或者域名在所选中的 {{chainName}} 链无效",
+      "walletAddressRequired": "请输入钱包地址。",
+      "walletChainTypeInvalid": "钱包地址与所选中目标的 {{chainName}} 链不匹配",
+      "walletMismatch": "钱包地址不匹配"
+    }
+  },
+  "tooltip": {
+    "deselectAll": "取消全选",
+    "estimatedTime": "预计完成兑换或者跨链的时间，但不涵盖切换链和批准代币的时间。",
+    "feeCollection": "该手续费适用于选定的代币对，保证使用 {{tool}} 交易顺畅。",
+    "minReceived": "在签署兑换或者跨链交易之前， 预估的最低代币数量可能会变化，对于两步交易，这适用于第二步交易签署之前。",
+    "notFound": {
+      "text": "我们找不到这个页面。",
+      "title": "404"
+    },
+    "numberOfSteps": "每次代币兑换包含了一到两次需要签名的交易。",
+    "priceImpact": "源代币和目标代币之间的估计差值。",
+    "progressToNextUpdate": "数据将在{{value}} 秒后自动刷新，点击这里可以手动更新。",
+    "selectAll": "全选",
+    "settingsModified": "设置(已修改)",
+    "slippage": "真实的成交价位与预设的成交价位间相差的最大百分比。该值可以在设置中更改。"
+  },
+  "main": {
+    "allTokens": "所有代币",
+    "bridgeStepDetails": "通过 {{tool}} 把资产从 {{from}} 链跨到 {{to}} 链上",
+    "checkoutStepDetails": "通过 {{tool}} 购买",
+    "currentAmount": "当前余额",
+    "depositStepDetails": "通过 {{tool}} 存入资金",
+    "featuredTokens": "精选代币",
+    "fees": {
+      "defaultIntegrator": "集成商费用",
+      "estimated": "预估总费用",
+      "integrator": "{{tool}} 费用",
+      "network": "网络费用",
+      "paid": "已支付的费用",
+      "provider": "供应商费用"
+    },
+    "from": "从",
+    "inProgress": "进行中",
+    "maxSlippage": "最大滑点",
+    "minReceived": "最少收到",
+    "myTokens": "我的代币",
+    "onChain": "在{{chainName}} 上",
+    "ownedBy": "属于",
+    "popularTokens": "热门代币",
+    "priceImpact": "价格冲击",
+    "process": {
+      "bridge": {
+        "actionRequired": "请签署此交易",
+        "done": "跨链交易已确认",
+        "pending": "跨链交易进行中",
+        "started": "准备执行跨链交易"
+      },
+      "checkout": {
+        "done": "购买完成"
+      },
+      "deposit": {
+        "done": "已完成存款"
+      },
+      "receivingChain": {
+        "done": "跨链完成",
+        "partial": "跨链部分完成",
+        "pending": "等待接收链回应",
+        "refunded": "跨链交易资产已退还"
+      },
+      "swap": {
+        "actionRequired": "请签署此交易",
+        "done": "兑换完成",
+        "pending": "代币兑换中",
+        "started": "准备兑换"
+      },
+      "switchChain": {
+        "actionRequired": "请切换当前网络",
+        "done": "网络切换成功"
+      },
+      "tokenAllowance": {
+        "done": "已批准代币限额",
+        "pending": "代币限额批准进行中",
+        "started": "设置代币限额"
+      }
+    },
+    "quotedAmount": "报价金额",
+    "rateChange": "波动率",
+    "receiving": "接收",
+    "refuelStepDetails": "通过 {{tool}} 获取燃气费",
+    "selectChain": "选择网络",
+    "selectChainAndToken": "选择链和代币",
+    "selectToken": "选择代币",
+    "sendToAddress": "发送到{{address}}",
+    "sendToWallet": "发送到另外的钱包",
+    "sending": "发送中",
+    "sentToAddress": "发送到{{address}}",
+    "stepBridge": "跨链",
+    "stepBridgeAndBuy": "跨链并购买",
+    "stepBridgeAndDeposit": "跨链并存款",
+    "stepBuy": "购买",
+    "stepDeposit": "存款",
+    "stepDetails": "通过 OpenOcean {{tool}}",
+    "stepSwap": "兑换",
+    "stepSwapAndBridge": "兑换和跨链",
+    "stepSwapAndBuy": "兑换并购买",
+    "stepSwapAndDeposit": "兑换并存款",
+    "swapStepDetails": "通过{{tool}}在{{chain}}链上兑换代币",
+    "transferId": "交易 ID",
+    "tags": {
+      "cheapest": "最佳报价",
+      "fastest": "速度最快"
+    },
+    "to": "到",
+    "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
+    "tokenOnChainAmount": "{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}}",
+    "tokenSearch": "按代币名称或者地址搜索",
+    "valueLoss": "资金损失",
+    "searchChains": "搜索链",
+    "searchBridges": "搜索跨链桥",
+    "searchExchanges": "搜索交易所"
+  },
+  "settings": {
+    "theme": "主题",
+    "enabledBridges": "跨链桥",
+    "enabledExchanges": "交易所",
+    "gasPrice": {
+      "fast": "快速",
+      "normal": "正常",
+      "slow": "缓慢",
+      "title": "燃气费"
+    },
+    "routePriority": "路由优先级",
+    "slippage": "最大滑点",
+    "custom": "自定义",
+    "resetSettings": "您正在使用自定义设置来过滤可用路由。"
+  },
+  "sendToWallet": {
+    "addBookmark": "添加到收藏",
+    "bookmarkWallet": "已收藏的钱包",
+    "confirmWalletAddress": "确认钱包地址",
+    "connectedWallets": "已连接的钱包",
+    "enterAddress_long": "请输入地址或钱包域名",
+    "enterAddress_short": "请输入钱包地址",
+    "enterName": "输入名称",
+    "noBookmarkedWallets": "没有收藏的钱包",
+    "noConnectedWallets": "没有已连接的钱包",
+    "noRecentWallets": "没有最近使用的钱包"
+  }
+}

package/src/icons/lifi.ts

@@ -0,0 +1,2 @@
+export const OOToolLogo =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3e %3ccircle cx='16' cy='16' r='16' fill='%23F5B5FF'/%3e %3cpath fill='black' d='m15.503 19.203-5.334 1.235a.468.468 0 0 0-.34.439v3.672c0 .308.243.503.55.438l7.443-1.722c.308-.065.437-.357.308-.634l-1.346-2.778c-.21-.439 0-.894.47-.991l4.864-1.17c.34-.081.632-.439.632-.796V13.5c0-.309-.243-.52-.551-.439l-7.02 1.674c-.438.097-.633.52-.438.926l1.232 2.551c.211.439 0 .877-.47.991'/%3e %3cpath fill='black' d='m11.985 10.023 1.394 2.86c.179.374 0 .764-.405.845l-2.578.601c-.324.081-.584.406-.584.731v3.07c0 .52.422.846.925.732l2.4-.552c.323-.065.583-.406.583-.732l.016-3.151c0-.44.357-.878.778-.975l7.863-1.885a.468.468 0 0 0 .34-.439V7.456c0-.309-.242-.52-.55-.439L12.293 9.39c-.308.065-.438.357-.308.633'/%3e %3c/svg%3e"

package/src/index.ts

@@ -0,0 +1,31 @@
+export type * from '@lifi/sdk'
+export { ChainType, ChainId, CoinKey } from '@lifi/sdk'
+export { App as OpenOceanWidget } from './App.js'
+export type { WidgetDrawer } from './AppDrawer.js'
+export * from './components/ContractComponent/ItemPrice.js'
+export * from './components/ContractComponent/NFT/NFT.js'
+export * from './components/ContractComponent/NFT/NFTBase.js'
+export * from './components/ContractComponent/NFT/types.js'
+export * from './components/Skeleton/WidgetSkeleton.js'
+export { defaultMaxHeight } from './config/constants.js'
+export * from './config/version.js'
+export { useAvailableChains } from './hooks/useAvailableChains.js'
+export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js'
+export * from './stores/form/types.js'
+export { useFieldActions } from './stores/form/useFieldActions.js'
+export { useFieldValues } from './stores/form/useFieldValues.js'
+export * from './stores/bookmarks/types.js'
+export { azureLightTheme } from './themes/azureLight.js'
+export { jumperTheme } from './themes/jumper.js'
+export { openOceanTheme } from './themes/openocean.js'
+export * from './themes/palettes.js'
+export { watermelonLightTheme } from './themes/watermelonLight.js'
+export { windows95Theme } from './themes/windows95.js'
+export * from './types/events.js'
+export type { TokenAmount } from './types/token.js'
+export * from './types/widget.js'
+export { getPriceImpact } from './utils/getPriceImpact.js'
+export { percentFormatter } from './utils/percentFormatter.js'
+export { compactNumberFormatter } from './utils/compactNumberFormatter.js'
+export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js'
+export { navigationRoutes } from './utils/navigationRoutes.js'

package/src/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

@@ -0,0 +1,45 @@
+import { SwapHoriz } from '@mui/icons-material'
+import { Container, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+
+export const ActiveTransactionsEmpty: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Container
+      sx={{
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingY: 12,
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
+        <SwapHoriz fontSize="inherit" />
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
+        {t('info.title.emptyActiveTransactions')}
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
+      >
+        {t('info.message.emptyActiveTransactions')}
+      </Typography>
+    </Container>
+  )
+}

package/src/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -0,0 +1,95 @@
+import { DeleteOutline } from '@mui/icons-material'
+import type { IconButtonProps } from '@mui/material'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  List,
+  useTheme,
+} from '@mui/material'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ActiveTransactionItem } from '../../components/ActiveTransactions/ActiveTransactionItem.js'
+import { Dialog } from '../../components/Dialog.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'
+import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js'
+import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty.js'
+
+const DeleteIconButton: React.FC<IconButtonProps> = ({ onClick }) => {
+  const theme = useTheme()
+
+  return (
+    <IconButton
+      size="medium"
+      edge={theme?.navigation?.edge ? 'end' : false}
+      onClick={onClick}
+    >
+      <DeleteOutline />
+    </IconButton>
+  )
+}
+
+export const ActiveTransactionsPage = () => {
+  const { t } = useTranslation()
+  const executingRoutes = useExecutingRoutesIds()
+  const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes)
+  const [open, setOpen] = useState(false)
+
+  const toggleDialog = useCallback(() => {
+    setOpen((open) => !open)
+  }, [])
+
+  const headerAction = useMemo(
+    () =>
+      executingRoutes.length ? (
+        <DeleteIconButton onClick={toggleDialog} />
+      ) : undefined,
+    [executingRoutes.length, toggleDialog]
+  )
+
+  useHeader(t('header.activeTransactions'), headerAction)
+
+  if (!executingRoutes.length) {
+    return <ActiveTransactionsEmpty />
+  }
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        sx={{
+          paddingTop: 0,
+          paddingLeft: 1.5,
+          paddingRight: 1.5,
+          paddingBottom: 1.5,
+        }}
+      >
+        {executingRoutes.map((routeId) => (
+          <ActiveTransactionItem key={routeId} routeId={routeId} />
+        ))}
+      </List>
+      <Dialog open={open} onClose={toggleDialog}>
+        <DialogTitle>{t('warning.title.deleteActiveTransactions')}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {t('warning.message.deleteActiveTransactions')}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
+          <Button
+            variant="contained"
+            onClick={() => deleteRoutes('active')}
+            autoFocus
+          >
+            {t('button.delete')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </PageContainer>
+  )
+}

package/src/pages/LanguagesPage.tsx

@@ -0,0 +1,43 @@
+import { Check } from '@mui/icons-material'
+import { List } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { ListItemText } from '../components/ListItemText.js'
+import { PageContainer } from '../components/PageContainer.js'
+import { SettingsListItemButton } from '../components/SettingsListItemButton.js'
+import { useHeader } from '../hooks/useHeader.js'
+import { useLanguages } from '../hooks/useLanguages.js'
+
+export const LanguagesPage: React.FC = () => {
+  const { t } = useTranslation()
+  const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =
+    useLanguages()
+
+  useHeader(t('language.title'))
+
+  if (availableLanguages.length < 1) {
+    return null
+  }
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        sx={{
+          paddingTop: 0,
+          paddingLeft: 1.5,
+          paddingRight: 1.5,
+          paddingBottom: 1.5,
+        }}
+      >
+        {availableLanguages.map((language) => (
+          <SettingsListItemButton
+            key={language}
+            onClick={() => setLanguageWithCode(language)}
+          >
+            <ListItemText primary={t('language.name', { lng: language })} />
+            {selectedLanguageCode === language && <Check color="primary" />}
+          </SettingsListItemButton>
+        ))}
+      </List>
+    </PageContainer>
+  )
+}

package/src/pages/MainPage/MainPage.style.tsx

@@ -0,0 +1,8 @@
+import { Container, styled } from '@mui/material'
+
+export const FormContainer = styled(Container)({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  position: 'relative',
+})

package/src/pages/MainPage/MainPage.tsx

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next'
+// import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js'
+// import { AmountInput } from '../../components/AmountInput/AmountInput.js'
+import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
+import { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { PoweredBy } from '../../components/PoweredBy/PoweredBy.js'
+// import { Routes } from '../../components/Routes/Routes.js'
+import { SelectChainAndToken } from '../../components/SelectChainAndToken.js'
+import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'
+import { TransactionDetails } from '../../components/TransactionDetails.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+// import { useWideVariant } from '../../hooks/useWideVariant.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
+import { MainWarningMessages } from './MainWarningMessages.js'
+import { ReviewButton } from './ReviewButton.js'
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
+
+export const MainPage: React.FC = () => {
+  const { t } = useTranslation()
+  const { routes } = useRoutes()
+
+  // const wideVariant = useWideVariant()
+  const { subvariant, subvariantOptions, contractComponent, hiddenUI } =
+    useWidgetConfig()
+  const subvariantState = useSplitSubvariantStore((store) => store.state)
+  const custom = subvariant === 'custom'
+  const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy)
+  const title =
+    subvariant === 'custom'
+      ? t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
+      : subvariant === 'refuel'
+        ? t('header.gas')
+        : t('header.swap')
+
+  useHeader(title)
+
+  const marginSx = { marginBottom: 2 }
+
+  return (
+    <PageContainer>
+      {/* <ActiveTransactions sx={marginSx} /> */}
+      {custom ? (
+        <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
+      ) : null}
+      <SelectChainAndToken mb={2} />
+      {/* {!custom || subvariantOptions?.custom === 'deposit' ? (
+        <AmountInput formType="from" sx={marginSx} />
+      ) : null} */}
+      {/* {!wideVariant ? <Routes sx={marginSx} /> : null} */}
+      {subvariantState === 'bridge' && <SendToWalletButton sx={marginSx} />}
+      <GasRefuelMessage mb={2} />
+      <MainWarningMessages route={routes?.[0]} mb={2} />
+      {/*<Box
+        sx={{
+          display: 'flex',
+          mb: showPoweredBy ? 1 : 3,
+          gap: 1.5,
+        }}
+      >
+        <ReviewButton />
+        <SendToWalletExpandButton />
+      </Box> */}
+      <ReviewButton />
+      <TransactionDetails route={routes?.[0]} sx={{ marginTop: 2 }} />
+      {/* <SwapSummary /> */}
+
+      {showPoweredBy ? <PoweredBy /> : null}
+    </PageContainer>
+  )
+}

package/src/pages/MainPage/MainWarningMessages.tsx

@@ -0,0 +1,17 @@
+import type { Route } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+
+interface MainWarningMessagesProps extends BoxProps {
+  route?: Route
+}
+
+export const MainWarningMessages: React.FC<MainWarningMessagesProps> = (
+  props
+) => {
+  const { routes } = useRoutes()
+  const currentRoute = routes?.[0]
+
+  return <WarningMessages route={currentRoute} {...props} />
+}