@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/i18n/zh.json

@@ -0,0 +1,267 @@
+{
+  "language": {
+    "name": "中文",
+    "title": "语言"
+  },
+  "format": {
+    "currency": "{{value, currency(currency: USD)}}",
+    "number": "{{value, number(maximumFractionDigits: 9)}}"
+  },
+  "button": {
+    "auto": "自动",
+    "bridge": "跨链",
+    "buy": "购买",
+    "buyNow": "立即购买",
+    "cancel": "取消",
+    "connectWallet": "关联钱包",
+    "contactSupport": "联系技术支持",
+    "continue": "继续",
+    "copyAddress": "复制地址",
+    "dark": "深色主题",
+    "delete": "删除",
+    "disconnect": "断开连接",
+    "done": "已完成",
+    "exchange": "兑换",
+    "getGas": "开始兑换燃气费",
+    "hide": "隐藏",
+    "learnMore": "了解更多",
+    "lifiCheckout": "LI.FI 结算",
+    "lifiExchange": "LI.FI 兑换",
+    "light": "浅色主题",
+    "max": "最大",
+    "ok": "确认",
+    "removeTransaction": "删除交易",
+    "reset": "重置",
+    "resetSettings": "恢复默认设置",
+    "reviewBridge": "查看跨链详情",
+    "reviewPurchase": "查看购买详情",
+    "reviewSwap": "查看该兑换",
+    "seeDetails": "查看详情",
+    "showAll": "显示所有",
+    "startBridging": "开始跨链",
+    "startSwapping": "开始兑换",
+    "swap": "兑换",
+    "tryAgain": "重试",
+    "viewCoverage": "查看我们的覆盖范围",
+    "viewOnExplorer": "在区块链浏览器上查看"
+  },
+  "header": {
+    "activeTransactions": "进行中的交易",
+    "bridge": "跨链",
+    "checkout": "支付",
+    "exchange": "兑换",
+    "from": "兑换自",
+    "gas": "燃气费",
+    "payWith": "支付方式",
+    "purchase": "购买",
+    "purchaseDetails": "交易明细",
+    "selectChain": "选择网络",
+    "selectWallet": "选择你的钱包",
+    "settings": "设置",
+    "swap": "兑换",
+    "to": "兑换为",
+    "transactionDetails": "交易详情",
+    "transactionHistory": "交易记录",
+    "walletConnected": "连接钱包",
+    "youGet": "您获得"
+  },
+  "info": {
+    "message": {
+      "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",
+      "emptyActiveTransactions": "正在进行的兑换将在这里显示。一旦完成，你可在兑换记录中找到它们。",
+      "emptyTokenList": "我们无法在 {{chainName}} 链上找到这些代币，或者你的钱包内没有这些代币。请再次搜索或者选择其他链再试一次。",
+      "emptyTransactionHistory": "交易记录只存储在本地，如果您清除浏览器数据，交易记录将被删除。",
+      "routeNotFound": "导致其的原因可能是：流动性低，所选定代币的数额太低，燃气费过高，或者当前没有合适的交易路径。"
+    },
+    "title": {
+      "autoRefuel": "获得燃气费",
+      "emptyActiveTransactions": "没有正在进行的交易",
+      "emptyTransactionHistory": "近期无交易",
+      "routeNotFound": "没有可用的路由"
+    }
+  },
+  "success": {
+    "message": {
+      "exchangePartiallySuccessful": "我们尝试完成本次交易，但是 {{tool}} 的 {{tokenSymbol}} 代币流动性不足。",
+      "exchangeSuccessful": "{{walletAddress}} 钱包在 {{chainName}} 链上收到 {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}",
+      "purchaseSuccessful": "您的 {{walletAddress}} 钱包在 {{chainName}} 链上拥有该 {{assetName}} 财产"
+    },
+    "title": {
+      "bridgePartiallySuccessful": "跨链部分成功",
+      "bridgeSuccessful": "跨链成功",
+      "purchaseSuccessful": "购买成功",
+      "refundIssued": "退款已受理",
+      "swapPartiallySuccessful": "兑换部分完成",
+      "swapSuccessful": "兑换成功"
+    }
+  },
+  "warning": {
+    "message": {
+      "deleteActiveTransactions": "正在进行的交易记录只存储在本地，如果删除它们，我们将无法恢复这些记录。",
+      "deleteTransactionHistory": "交易记录只存储在本地，如果你删除它，我们将无法恢复这些记录。",
+      "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
+      "insufficientFunds": "你没有足够的资金来完成这笔交易。",
+      "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
+      "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
+      "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。"
+    },
+    "title": {
+      "deleteActiveTransactions": "确定要删除所有正在进行的交易吗？",
+      "deleteTransaction": "确定要删除该交易吗？",
+      "deleteTransactionHistory": "确定要清空交易记录吗?",
+      "highValueLoss": "大额资金损失",
+      "insufficientGas": "燃气费不足",
+      "rateChanged": "兑换比例变动",
+      "resetSettings": "确定要恢复默认设置吗?"
+    }
+  },
+  "error": {
+    "message": {
+      "allowanceRequired": "{{tokenSymbol}} 的转账金额超过了您设置的支出上限。请提高该代币的支出上限，然后重试。",
+      "insufficientFunds": "您没有足够的燃气费支付该交易。",
+      "signatureRejected": "需要您签名来完成此次交易。不用担心，{{chainName}} 链上 {{amount, number(maximumFractionDigits: 9)}} 个 {{tokenSymbol}} 仍在您的钱包里。",
+      "slippageThreshold": "滑点大于预设值，请选择其他路由并获取新的价格。",
+      "transactionFailed": "请查看区块浏览器以了解更多信息。",
+      "transactionNotSent": "交易未能发送。",
+      "transactionCanceled": "交易已被取消。",
+      "remainInYourWallet": "{{chainName}} 链上 {{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}} 仍在您的钱包内。",
+      "unknown": "请再试一次或者联系支持。"
+    },
+    "title": {
+      "allowanceRequired": "余额不足",
+      "balanceIsTooLow": "余额太低",
+      "chainSwitch": "请切换当前网络",
+      "gasLimitIsTooLow": "燃气费设置过低",
+      "insufficientFunds": "资金不足",
+      "signatureRejected": "交易需要签名。",
+      "slippageNotMet": "滑点未满足",
+      "transactionCanceled": "交易取消",
+      "exchangeRateUpdateCanceled": "兑换率更新已取消",
+      "transactionFailed": "交易失败",
+      "transactionUnderpriced": "交易定价过低",
+      "transactionUnprepared": "无法开始该交易",
+      "unknown": "未知错误",
+      "walletAddressInvalid": "钱包地址无效。",
+      "walletAddressRequired": "请输入钱包地址。",
+      "walletEnsAddressInvalid": "钱包地址或 ENS 无效，或者当前网络不支持 ENS。"
+    }
+  },
+  "tooltip": {
+    "additionalProviderFee": "跨链和交易所的手续费。",
+    "estimatedNetworkFee": "预估网络手续费。",
+    "estimatedTime": "预计兑换的执行时间（分钟）。",
+    "notFound": {
+      "text": "我们找不到这个页面。",
+      "title": "404"
+    },
+    "numberOfSteps": "一系列的兑换步骤，每个步骤可能包含1-2个需要签名的交易。",
+    "progressToNextUpdate": "数据将在{{value}} 秒后自动刷新，点击这里可以手动更新。",
+    "recommended": "一个价格低廉但是兼顾复杂性和易用性的路由方案。",
+    "settingsModified": "设置(已修改)"
+  },
+  "main": {
+    "crossStepDetails": "通过{{tool}}把资产从{{from}}链跨到{{to}}链上",
+    "currentAmount": "当前余额",
+    "estimatedTime": "{{value}}分钟",
+    "featuredTokens": "精选代币",
+    "from": "从",
+    "fromAmount": "需要支付",
+    "gasCost": "燃气费消耗",
+    "gasFeeEstimated": "预估燃气费",
+    "gasFeePaid": "已支付燃气费",
+    "inProgress": "进行中",
+    "nftStepDetails": "通过 {{tool}} 购买 NFT",
+    "onChain": "在{{chainName}} 上",
+    "otherTokens": "其他代币",
+    "ownedBy": "属于",
+    "process": {
+      "crossChain": {
+        "actionRequired": "请签署此交易",
+        "done": "跨链交易已确认",
+        "pending": "跨链交易进行中",
+        "started": "准备执行跨链交易"
+      },
+      "nft": {
+        "done": "NFT 已购买"
+      },
+      "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": "跨链并购买",
+    "stepDetails": "通过 LI.FI {{tool}}",
+    "stepSwap": "兑换",
+    "stepSwapAndBridge": "兑换和跨链",
+    "stepSwapAndBuy": "兑换并购买",
+    "supportId": "支持ID",
+    "swapStepDetails": "通过{{tool}}在{{chain}}链上兑换代币",
+    "tags": {
+      "cheapest": "便宜的",
+      "fastest": "快速的",
+      "insurable": "可投保",
+      "insurance": "保险",
+      "insured": "受保中",
+      "recommended": "建议的",
+      "safest": "最佳/安全"
+    },
+    "to": "到",
+    "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
+    "tokenOnChainAmount": "{{chainName}} 链上{{amount, number(maximumFractionDigits: 9)}} 个{{tokenSymbol}}",
+    "tokenSearch": "按代币名称或者地址搜索",
+    "valueLoss": "资金损失",
+    "walletAddressOrEns": "钱包地址或ENS名称"
+  },
+  "insurance": {
+    "bridgeExploits": "跨链桥故障、被黑或者被利用漏洞",
+    "insure": "在跨链期间为<0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> 投保。",
+    "insured": "在跨链期间为<0>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</0> 投保。",
+    "slippageError": "目标链代币的滑点错误"
+  },
+  "settings": {
+    "enabledBridges": "已选中的跨链桥",
+    "enabledExchanges": "已选中的交易所",
+    "gasPrice": {
+      "fast": "快速",
+      "normal": "正常",
+      "slow": "缓慢",
+      "title": "燃气费"
+    },
+    "routePriority": "路由优先级",
+    "showDestinationWallet": "显示收款钱包",
+    "slippage": "滑点",
+    "resetSettings": "您正在使用自定义设置过滤可用路由。"
+  },
+  "wallet": {
+    "extensionNotFound": "在选择钱包之前，请确保只有{{name}} 浏览器的扩展应用处于激活状态。"
+  }
+}

package/src/icons/InsuraceLogo.tsx

@@ -0,0 +1,46 @@
+import { useTheme } from '@mui/material';
+import type { SVGProps } from 'react';
+
+export const InsuraceLogo = (props: SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
+  const insurColor =
+    theme.palette.mode === 'light' ? '#1C4332' : theme.palette.common.white;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="58"
+      height="20"
+      fill="none"
+      {...props}
+    >
+      <path
+        fill={insurColor}
+        fillRule="evenodd"
+        d="M42.887 3.894a2.104 2.104 0 0 0-1.304.405 1.259 1.259 0 0 0-.544 1.046c0 .683.509 1.15 1.527 1.401.483.12.817.236 1 .345.184.11.276.234.276.373a.36.36 0 0 1-.227.331 1.25 1.25 0 0 1-.568.115c-.66 0-1.292-.25-1.896-.753V8.23c.473.418 1.082.637 1.826.656h.055c.46.01.912-.12 1.297-.37a1.19 1.19 0 0 0 .558-1.053c0-.734-.51-1.229-1.527-1.485a.532.532 0 0 1-.084-.02l-.097-.022a5.483 5.483 0 0 1-.826-.258c-.18-.079-.269-.192-.269-.341a.38.38 0 0 1 .23-.341c.178-.09.374-.133.572-.126.303.006.602.061.886.164a4 4 0 0 1 .906.443V4.41a3.55 3.55 0 0 0-1.791-.516Zm-11.621.056h1.052v4.88h-1.052V3.95Zm5.014 0 1.638 3.876V3.95h1.025v4.88h-1.625l-1.687-4.002V8.83h-1.025V3.95h1.674Zm10.56.007h1.053v2.9c-.007.28.102.55.3.746a.972.972 0 0 0 .711.3.982.982 0 0 0 .715-.3c.2-.196.31-.466.303-.746v-2.9h1.046v2.9c.013.543-.2 1.067-.59 1.447a2.158 2.158 0 0 1-2.941.007 1.934 1.934 0 0 1-.596-1.454v-2.9Zm9.283 1.653a.714.714 0 0 1-.718.71h-1.179V4.891h1.178a.7.7 0 0 1 .51.206.68.68 0 0 1 .209.505v.008ZM53.18 3.95v4.88h1.045V7.226h.823l.969 1.604h1.185l-1.046-1.736c.29-.114.538-.316.708-.578.176-.26.27-.565.268-.879a1.617 1.617 0 0 0-.505-1.185 1.673 1.673 0 0 0-1.224-.502h-2.223Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#28DA98"
+        fillRule="evenodd"
+        d="M32.366 13.05a1.27 1.27 0 0 0 .37.914c.238.252.57.391.917.383a1.317 1.317 0 0 0 1.296-1.296 1.267 1.267 0 0 0-.383-.913 1.233 1.233 0 0 0-.913-.393 1.216 1.216 0 0 0-.918.388c-.24.245-.373.575-.37.918Zm-.53-1.78a2.274 2.274 0 0 1 1.69-.721c.49-.01.966.166 1.332.493v-.411h1.324v4.838h-1.324v-.401c-.37.318-.845.488-1.333.475a2.252 2.252 0 0 1-1.684-.74 2.45 2.45 0 0 1-.708-1.752 2.471 2.471 0 0 1 .704-1.78v-.001Zm7.093 0c.461-.47 1.095-.73 1.753-.721.5-.006.99.148 1.397.438.408.284.72.685.895 1.15l-1.205.347a1.274 1.274 0 0 0-.434-.543 1.095 1.095 0 0 0-.652-.206 1.174 1.174 0 0 0-.895.393 1.31 1.31 0 0 0-.365.922c-.005.342.127.672.365.918.228.252.554.393.895.388.235.004.466-.068.657-.206a1.3 1.3 0 0 0 .429-.534l1.205.347c-.176.46-.486.858-.89 1.141a2.36 2.36 0 0 1-1.401.439 2.388 2.388 0 0 1-1.767-.736 2.501 2.501 0 0 1 .014-3.537Zm9.495 1.269h-2.346a1.16 1.16 0 0 1 .425-.585c.217-.16.482-.244.753-.237a1.195 1.195 0 0 1 1.168.822Zm.411-1.424a2.477 2.477 0 0 0-3.323.155 2.501 2.501 0 0 0-.013 3.537c.46.48 1.1.747 1.766.735a2.89 2.89 0 0 0 1.351-.342 2.08 2.08 0 0 0 .94-.908l-1.15-.33c-.313.28-.722.428-1.141.412a1.327 1.327 0 0 1-.758-.215 1.043 1.043 0 0 1-.429-.616h3.633c.037-.156.056-.315.055-.475a2.338 2.338 0 0 0-.064-.53 2.467 2.467 0 0 0-.867-1.423Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#28DA98"
+        d="M16.951 10a2.139 2.139 0 0 0-2.139-2.139l1.908-1.907c0 1.18.958 2.139 2.139 2.139L16.95 10ZM12.905 5.954a2.139 2.139 0 0 0-2.14-2.139l1.908-1.907c0 1.18.958 2.138 2.139 2.138l-1.907 1.908Z"
+      />
+      <path
+        fill={insurColor}
+        d="M16.951 18.093a2.139 2.139 0 0 0-2.138-2.14l1.907-1.907c0 1.181.958 2.139 2.139 2.139l-1.908 1.908ZM12.905 14.046a2.139 2.139 0 0 0-2.14-2.138L12.674 10c0 1.181.958 2.139 2.139 2.139l-1.907 1.907ZM16.938 2.147c.008-.078.013-.158.013-.24l-.014.24Z"
+      />
+      <path
+        fill="#28DA98"
+        d="M20.207 8.651a1.907 1.907 0 0 0-2.698 0 1.901 1.901 0 0 0-.558 1.35c-.001 1.181-.958 2.138-2.14 2.138h.001c-.488 0-.976.186-1.349.559a1.9 1.9 0 0 0-.558 1.35c-.001 1.18-.957 2.135-2.136 2.137h-.004a2.139 2.139 0 0 1-2.138-2.138c0-.489-.186-.977-.559-1.35a1.901 1.901 0 0 0-1.349-.558 2.139 2.139 0 0 1-2.138-2.137v-.004c0-1.18.957-2.136 2.137-2.137.488 0 .977-.185 1.35-.558.373-.373.559-.861.559-1.35 0-1.18.958-2.138 2.139-2.138a1.907 1.907 0 1 0-1.907-1.907A2.139 2.139 0 0 1 6.72 4.046c-.488 0-.977.186-1.35.56-.372.372-.558.86-.558 1.348a2.139 2.139 0 0 1-2.138 2.139 1.907 1.907 0 1 0 .001 3.815 2.139 2.139 0 0 1 2.137 2.136c0 .489.185.978.559 1.351a1.9 1.9 0 0 0 1.354.559 2.139 2.139 0 0 1 2.133 2.139 1.908 1.908 0 0 0 3.815 0c0-1.182.958-2.14 2.139-2.14.488 0 .976-.185 1.349-.558.374-.374.56-.864.558-1.354a2.139 2.139 0 0 1 2.137-2.133 1.908 1.908 0 0 0 1.35-3.256Z"
+      />
+      <path
+        fill={insurColor}
+        d="M28.3 8.651a1.901 1.901 0 0 0-1.348-.558 2.139 2.139 0 0 1-2.139-2.139 1.9 1.9 0 0 0-.559-1.349 1.901 1.901 0 0 0-1.349-.559 2.139 2.139 0 0 1-2.138-2.135 1.907 1.907 0 1 0-3.815-.003c0 .082-.005.164-.014.244v-.005a2.13 2.13 0 0 1-.999 1.579l-.002.001a2.112 2.112 0 0 1-.16.09l-.012.006a2.11 2.11 0 0 1-.163.072l-.018.008c-.055.02-.11.04-.167.056l-.02.006c-.057.016-.115.03-.174.042l-.02.003c-.06.011-.12.02-.182.026l-.013.001c-.064.006-.129.01-.194.01-.06 0-.118.002-.176.008h-.007a1.909 1.909 0 0 0-.526.128l-.01.003a1.92 1.92 0 0 0-.166.077l-.003.002c-.046.024-.09.051-.135.08l-.027.016c-.045.029-.087.061-.13.095-.008.006-.017.011-.025.018a1.912 1.912 0 0 0-.39.43l-.046.08c-.016.027-.034.054-.05.083-.011.023-.02.047-.032.07-.015.033-.032.066-.046.1-.01.025-.018.053-.028.08-.01.03-.023.062-.033.094-.01.036-.018.073-.027.11-.005.023-.012.046-.016.068a1.9 1.9 0 0 0-.02.137l-.007.045a1.935 1.935 0 0 0-.007.154l-.001.029a2.139 2.139 0 0 1-2.138 2.139A1.907 1.907 0 1 0 12.675 10c0-1.18.956-2.138 2.136-2.139.243 0 .485-.045.713-.137l.006-.002c.052-.02.102-.045.152-.07l.018-.009c.045-.023.089-.05.132-.078l.03-.018c.042-.027.083-.058.123-.09l.032-.023a1.953 1.953 0 0 0 .276-.277c.01-.01.017-.023.026-.034.03-.04.06-.08.088-.12l.017-.03c.028-.044.055-.088.079-.133l.009-.02c.025-.049.049-.1.07-.15l.003-.01c.09-.227.136-.468.136-.71l.013-.236a2.139 2.139 0 0 1 4.264.237c0 .49.186.978.559 1.352.373.373.862.559 1.35.558a2.139 2.139 0 0 1-.001 4.278c-.488 0-.977.186-1.35.559-.372.373-.558.862-.558 1.35a2.139 2.139 0 0 1-2.136 2.137 1.908 1.908 0 0 0-1.352 3.256 1.908 1.908 0 0 0 3.257-1.349c0-1.18.958-2.138 2.139-2.138.488 0 .976-.186 1.349-.559.372-.372.558-.86.558-1.35 0-1.18.957-2.136 2.137-2.137a1.907 1.907 0 0 0 1.35-3.256Z"
+      />
+    </svg>
+  );
+};

package/src/icons/index.ts

@@ -0,0 +1,2 @@
+export * from './InsuraceLogo';
+export * from './lifi';

package/src/icons/lifi.ts

@@ -0,0 +1,2 @@
+export const LiFiToolLogo =
+  "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,20 @@
+import { App } from './App';
+export { useFormContext, useWatch } from 'react-hook-form';
+export type { WidgetDrawer } from './AppDrawer';
+export * from './components/NFT';
+export * from './config/version';
+export {
+  useAccount,
+  useAvailableChains,
+  useWidgetEvents,
+  widgetEvents,
+} from './hooks';
+export * from './providers/FormProvider/types';
+export { formatChain } from './providers/WalletProvider';
+export * from './types';
+
+// ClassNameGenerator.configure((componentName) =>
+//   componentName.replace('Mui', 'LiFi'),
+// );
+
+export const LiFiWidget = App;

package/src/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

@@ -0,0 +1,34 @@
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+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 fontSize={48}>
+        <SwapHorizIcon fontSize="inherit" />
+      </Typography>
+      <Typography fontSize={18} fontWeight={700}>
+        {t('info.title.emptyActiveTransactions')}
+      </Typography>
+      <Typography
+        fontSize={14}
+        color="text.secondary"
+        textAlign="center"
+        mt={2}
+      >
+        {t('info.message.emptyActiveTransactions')}
+      </Typography>
+    </Container>
+  );
+};

package/src/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -0,0 +1,82 @@
+import DeleteIcon from '@mui/icons-material/DeleteOutline';
+import {
+  Button,
+  Container,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  List,
+} from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ActiveTransactionItem } from '../../components/ActiveTransactions';
+import { Dialog } from '../../components/Dialog';
+import { useAccount } from '../../hooks';
+import {
+  useExecutingRoutesIds,
+  useHeaderStoreContext,
+  useRouteExecutionStore,
+} from '../../stores';
+import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
+
+export const ActiveTransactionsPage = () => {
+  const { t } = useTranslation();
+  const { account } = useAccount();
+  const executingRoutes = useExecutingRoutesIds(account.address);
+  const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
+  const headerStoreContext = useHeaderStoreContext();
+  const [open, setOpen] = useState(false);
+
+  const toggleDialog = useCallback(() => {
+    setOpen((open) => !open);
+  }, []);
+
+  useEffect(() => {
+    if (executingRoutes.length) {
+      return headerStoreContext.getState().setAction(
+        <IconButton size="medium" edge="end" onClick={toggleDialog}>
+          <DeleteIcon />
+        </IconButton>,
+      );
+    }
+  }, [executingRoutes.length, headerStoreContext, toggleDialog]);
+
+  if (!executingRoutes.length) {
+    return <ActiveTransactionsEmpty />;
+  }
+
+  return (
+    <Container disableGutters>
+      <List
+        sx={{
+          paddingLeft: 1.5,
+          paddingRight: 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>
+    </Container>
+  );
+};

package/src/pages/LanguagesPage/LanguagesPage.tsx

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

package/src/pages/LanguagesPage/index.ts

@@ -0,0 +1 @@
+export * from './LanguagesPage';

package/src/pages/MainPage/MainGasMessage.tsx

@@ -0,0 +1,11 @@
+import type { BoxProps } from '@mui/material';
+import { GasMessage } from '../../components/GasMessage';
+import { useRoutes } from '../../hooks';
+
+export const MainGasMessage: React.FC<BoxProps> = (props) => {
+  const { routes } = useRoutes();
+
+  const currentRoute = routes?.[0];
+
+  return <GasMessage route={currentRoute} {...props} />;
+};

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

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

package/src/pages/MainPage/MainPage.tsx

@@ -0,0 +1,42 @@
+import { Box } from '@mui/material';
+import { ActiveTransactions } from '../../components/ActiveTransactions';
+import { AmountInput } from '../../components/AmountInput';
+import { ContractComponent } from '../../components/ContractComponent';
+import { GasRefuelMessage } from '../../components/GasMessage';
+import { Routes } from '../../components/Routes';
+import { SelectChainAndToken } from '../../components/SelectChainAndToken';
+import {
+  SendToWallet,
+  SendToWalletButton,
+} from '../../components/SendToWallet';
+import { useExpandableVariant } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { MainGasMessage } from './MainGasMessage';
+import { FormContainer } from './MainPage.style';
+import { ReviewButton } from './ReviewButton';
+
+export const MainPage: React.FC = () => {
+  const expandable = useExpandableVariant();
+  const { subvariant, contractComponent } = useWidgetConfig();
+  const nft = subvariant === 'nft';
+  return (
+    <FormContainer disableGutters>
+      <ActiveTransactions mx={3} mt={1} mb={1} />
+      {nft ? (
+        <ContractComponent mx={3} mt={1} mb={1}>
+          {contractComponent}
+        </ContractComponent>
+      ) : null}
+      <SelectChainAndToken mt={1} mx={3} mb={2} />
+      {!nft ? <AmountInput formType="from" mx={3} mb={2} /> : null}
+      {!expandable ? <Routes mx={3} mb={2} /> : null}
+      <SendToWallet mx={3} mb={2} />
+      <GasRefuelMessage mx={3} mb={2} />
+      <MainGasMessage mx={3} mb={2} />
+      <Box display="flex" mx={3} mb={1}>
+        <ReviewButton />
+        <SendToWalletButton />
+      </Box>
+    </FormContainer>
+  );
+};

package/src/pages/MainPage/ReviewButton.tsx

@@ -0,0 +1,69 @@
+import { useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { BaseTransactionButton } from '../../components/BaseTransactionButton';
+import { useRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { useSetExecutableRoute, useSplitSubvariantStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+
+export const ReviewButton: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { isValid, isValidating } = useFormState();
+  const setExecutableRoute = useSetExecutableRoute();
+  const { subvariant } = useWidgetConfig();
+  const splitState = useSplitSubvariantStore((state) => state.state);
+
+  const { routes } = useRoutes();
+
+  const currentRoute = routes?.[0];
+
+  const handleClick = async () => {
+    if (currentRoute) {
+      setExecutableRoute(currentRoute);
+      navigate(navigationRoutes.transactionExecution, {
+        state: { routeId: currentRoute.id },
+      });
+    }
+  };
+
+  const getButtonText = (): string => {
+    if (currentRoute) {
+      switch (subvariant) {
+        case 'nft':
+          return t(`button.reviewPurchase`);
+        case 'refuel':
+          return t(`button.reviewBridge`);
+        default:
+          const transactionType =
+            currentRoute.fromChainId === currentRoute.toChainId
+              ? 'Swap'
+              : 'Bridge';
+          return t(`button.review${transactionType}`);
+      }
+    } else {
+      switch (subvariant) {
+        case 'nft':
+          return t(`button.buy`);
+        case 'refuel':
+          return t(`button.getGas`);
+        case 'split':
+          if (splitState) {
+            return t(`button.${splitState}`);
+          }
+          return t(`button.exchange`);
+        default:
+          return t(`button.exchange`);
+      }
+    }
+  };
+
+  return (
+    <BaseTransactionButton
+      text={getButtonText()}
+      onClick={handleClick}
+      disabled={currentRoute && (isValidating || !isValid)}
+    />
+  );
+};

package/src/pages/RoutesPage/RoutesPage.style.ts

@@ -0,0 +1,7 @@
+import { Stack as MuiStack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const Stack = styled(MuiStack)(({ theme }) => ({
+  position: 'relative',
+  padding: theme.spacing(1, 3),
+}));