feat: stargate bridge (#577)

* wip: bridge form page

* wip: bridge transaction preview and status page

* wip: rainbow bridge integration

* wip: rainbow bridge transfer

* wip: get token balance

* wip: bridge transfer status & history

* wip: transform rainbow transfer rawData

* fix: bridge abi filename

* feat: Perfect interaction details

* fix: bridge transaction status icon animate

* feat: copy wallet accountId

* feat: bridge history filter hash

* fix: bridge custom address

* fix: some bugs that came up during testing

* fix: some bugs

* fix

* wip

wip

fix

wip

wip

* adjusting the stargate contract integration

* fix: change ethereum testnet

* chore: upgrade @near-eth/* dependencies

* fix: miss dependency os-browserify

* fix: miss dependencies @near-eth/aurora-*

* feat: calculate stargate fee and mininimum received

* feat: integration bridge history api

* fix: stargate query contract optimization

* fix: unconnect wallet bug

* fix: bridge to default token

* fix: bridge history support near and other query optimization

* fix: Bridge Route text adjustment

* fix: some bugs

* fix: some bugs

* wip

* feat: support more evm chains and improve interaction details

* fix: judgment discount logic

* fix: bridge realtime computing gas

* fix: some bugs

* fix: some bugs

* feat: aurora tokens config add USDC

* fix: some bugs

* fix: remove display gas fee

* fix: evm erc20 approve

* fix: getTokenByAddress

* fix: bridge cannot cover gas fee warning

* feat: new bridge menu

* fix: bridge token selector filter

* fix: bridge custom address

* fix: remove console

* fix: bridge unconnected wallet disable input amount

* fix: bridge token out disable style

* fix: bridge bugs

* fix: wallet selector discount

* feat: bridge add stargate protocol fee

* fix: bridge readableMinAmountWithSlippage

* fix: bridge preview fee

* fix: bridge preview minimun received

* fix: bridge Bridging Time

* fix: change aurora receive address

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/locales"
+    ]
+}

craco.config.cjs

@@ -40,13 +40,16 @@ module.exports = {
       business: process.cwd(),
       src: path.resolve('src'),
     },
+    experiments: {
+      asyncWebAssembly: true,
+    },
     plugins: {
       add: [
         // Webpack 5 does not polyfill node globals, so we do so for those necessary:
         // new BundleAnalyzerPlugin(),
         new ProvidePlugin({
           Buffer: ['buffer', 'Buffer'],
-          process: 'process/browser.js',
+          process: 'process/browser',
         }),
         new MiniCssExtractPlugin({
           filename: 'static/css/[name].[contenthash:8].css',
@@ -151,19 +154,19 @@ module.exports = {
           fs: false,
           path: require.resolve('path-browserify'),
           assert: require.resolve('assert'),
-          util: require.resolve('util/'),
+          util: require.resolve('util'),
           crypto: require.resolve('crypto-browserify'),
           stream: require.resolve('stream-browserify'),
-          // os: require.resolve('os-browserify/browser'),
+          os: require.resolve('os-browserify/browser'),
           http: require.resolve('stream-http'),
           https: require.resolve('https-browserify'),
-          buffer: require.resolve('buffer/'),
+          buffer: require.resolve('buffer'),
           events: require.resolve('events/'),
           url: require.resolve('url/'),
           zlib: require.resolve('browserify-zlib'),
+          process: 'process/browser',
         },
       });
-
       // Configure webpack caching:
       webpackConfig.cache = Object.assign(webpackConfig.cache, {
         cacheDirectory: getCacheDirectory('webpack'),

globals.d.ts

@@ -1,4 +1,14 @@
-declare module "*.svg" {
+declare module '*.svg' {
   const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
   export default content;
-}
+}
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+interface Window {
+  /** Provider used for querying Ethereum data (transaction status, sync status ...) */
+  ethProvider?: import('@web3-onboard/core').EIP1193Provider;
+  ethWeb3Provider?: import('ethers').providers.Web3Provider;
+}

package.json

@@ -75,6 +75,7 @@
     "jest": "^26.6.3",
     "jest-environment-node": "~26.6.2",
     "mini-css-extract-plugin": "2.7.6",
+    "os-browserify": "^0.3.0",
     "postcss": "^8.0.9",
     "postcss-modules": "^4.0.0",
     "prettier": "2.3.1",
@@ -103,6 +104,12 @@
     "@keypom/selector": "^1.2.3",
     "@ledgerhq/devices": "^7.0.0",
     "@metamask/detect-provider": "^2.0.0",
+    "@near-eth/aurora-erc20": "^2.7.2",
+    "@near-eth/aurora-ether": "^2.7.0",
+    "@near-eth/aurora-nep141": "^1.5.2",
+    "@near-eth/client": "^1.12.0",
+    "@near-eth/near-ether": "^2.5.0",
+    "@near-eth/nep141-erc20": "^2.5.0",
     "@near-js/accounts": "^1.0.2",
     "@near-js/crypto": "^1.2.0",
     "@near-js/keystores-browser": "^0.0.8",
@@ -129,6 +136,10 @@
     "@walletconnect/qrcode-modal": "2.0.0-alpha.20",
     "@walletconnect/sign-client": "2.0.0-beta.102-6a30ee7.0",
     "@walletconnect/types": "^2.0.0-beta.102",
+    "@web3-onboard/injected-wallets": "^2.10.9",
+    "@web3-onboard/ledger": "^2.5.2",
+    "@web3-onboard/react": "^2.8.13",
+    "@web3-onboard/walletconnect": "^2.5.1",
     "actionsheet-react": "^1.0.12",
     "animejs": "^3.2.1",
     "axios": "^0.21.1",

src/components/icon/Menu.tsx

@@ -8,7 +8,7 @@ const Rainbow = (props?: any) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_9323_113)">
+    <g clipPath="url(#clip0_9323_113)">
       <path
         d="M11.6732 6.75098C14.542 6.75098 16.8677 9.05739 16.8677 11.9032H23.6742C23.6738 5.32891 18.3008 0 11.6729 0L11.6732 6.75098Z"
         fill="white"

src/components/layout/MobileNav.tsx

@@ -12,7 +12,7 @@ import {
 import { Context } from 'src/components/wrapper';
 import getConfig from 'src/services/config';
 import { useRefPrice } from 'src/state/account';
-import { bridgeData, menuItemType, useMenusMobile } from 'src/utils/menu';
+import { menuItemType, useMenusMobile } from 'src/utils/menu';
 import { toPrecision } from 'src/utils/numbers';
 
 import { WalletContext } from '../../utils/wallets-integration';
@@ -439,7 +439,7 @@ export function MobileNavBar(props: any) {
         }
       } else {
         menusMobile.find((d) => {
-          let match = d.links.includes(pathname);
+          const match = d.links.includes(pathname);
           if (!match && Array.isArray(d.children)) {
             const level2Match = d.children.find((c) =>
               c.links?.includes(pathname)
@@ -593,8 +593,6 @@ export function MobileNavBar(props: any) {
     }
   }
 
-  const [showBridgeModalMobile, setShowBridgeModalMobile] =
-    useState<boolean>(false);
   function closeKeyModal() {
     setKeyModalShow(false);
   }
@@ -728,25 +726,6 @@ export function MobileNavBar(props: any) {
                 </div>
                 <div className="flex items-center gap-2">
                   <BuyNearButton />
-
-                  <div
-                    className={`frcc text-xs     rounded-lg py-1.5 px-3
-                  
-                  ${
-                    showBridgeModalMobile
-                      ? 'text-white  bg-priceBgColor'
-                      : 'text-cardBg bg-primaryText font-gothamBold'
-                  }
-                  `}
-                    onClick={() => {
-                      setShowBridgeModalMobile(true);
-                    }}
-                  >
-                    <FormattedMessage
-                      id="bridge_pure"
-                      defaultMessage={'Bridge'}
-                    ></FormattedMessage>
-                  </div>
                 </div>
               </div>
               <div className="text-primaryText gotham_bold pb-24">
@@ -933,118 +912,13 @@ export function MobileNavBar(props: any) {
         onClose={() => setShowWalletRisk(false)}
       />
 
-      <MobileBridgeModal
-        isOpen={showBridgeModalMobile}
-        onRequestClose={() => {
-          setShowBridgeModalMobile(false);
-        }}
-      ></MobileBridgeModal>
       {accountId && keyModalShow ? (
         <AccessKeyModal isOpen={keyModalShow} onRequestClose={closeKeyModal} />
       ) : null}
     </>
   );
 }
 
-function MobileBridgeModal(props: Modal.Props) {
-  const { accountId } = useWalletSelector();
-  return (
-    <Modal
-      {...props}
-      style={{
-        overlay: {
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: 'rgba(0, 0, 0, 0.7)',
-          zIndex: 9999999,
-          outline: 'none',
-        },
-        content: {
-          position: 'absolute',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          bottom: 0,
-          left: '50%',
-          top: 'none',
-          transform: 'translate(-50%, 0)',
-          outline: 'none',
-          width: '100%',
-        },
-      }}
-    >
-      <div
-        className="border rounded-2xl w-full pb-10 bg-cardBg p-2 text-base flex flex-col gap-4 text-white"
-        style={{
-          border: '1px solid #27343E',
-        }}
-      >
-        <div className="pl-4">
-          <FormattedMessage
-            id="bridge_pure"
-            defaultMessage={'Bridge'}
-          ></FormattedMessage>
-        </div>
-        {bridgeData.map((item) => {
-          if (!item.children) {
-            return (
-              <div
-                key={item.id}
-                className="flex flex-col gap-2 pl-1 text-white cursor-pointer frcs hover:bg-opacity-20 hover:rounded-xl"
-                onClick={() => {
-                  let targetUrl = item.link;
-                  if (item.needAccountId && accountId) {
-                    targetUrl = `${targetUrl}&address=${accountId}`;
-                  }
-                  openUrl(targetUrl);
-                }}
-              >
-                <div className="frcs gap-2 pl-3">
-                  <item.icon></item.icon>
-                  {item.name}
-                </div>
-              </div>
-            );
-          } else {
-            return (
-              <div
-                key={item.id}
-                className="flex flex-col gap-2 pl-1 text-primaryText "
-              >
-                <div className="frcs gap-2 pl-3">
-                  <item.icon></item.icon>
-
-                  {item.name}
-                </div>
-
-                {item.children.map((sub) => {
-                  return (
-                    <div
-                      key={sub.id}
-                      className="rounded-xl  py-1.5 pl-1 text-white bg-primaryText bg-opacity-20 cursor-pointer frcs"
-                      onClick={() => {
-                        openUrl(sub.link);
-                      }}
-                    >
-                      <div className="frcs pl-3 gap-2">
-                        <sub.icon></sub.icon>
-                        {sub.name}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            );
-          }
-        })}
-      </div>
-    </Modal>
-  );
-}
-
 function MobileLanguage(props: any) {
   const context = useContext(Context);
   const lans = useLanguageItems();

src/components/layout/NavigationBar.tsx

@@ -15,12 +15,7 @@ import { AccountIcon } from 'src/components/icon/Common';
 import { Context } from 'src/components/wrapper';
 import getConfig from 'src/services/config';
 import { NEARXIDS, wallet } from 'src/services/near';
-import {
-  BridgeButton,
-  menuItemType,
-  useLanguageItems,
-  useMenus,
-} from 'src/utils/menu';
+import { menuItemType, useLanguageItems, useMenus } from 'src/utils/menu';
 import { auroraAddr, useAuroraTokens } from '../../services/aurora/aurora';
 import { ETH_DECIMAL } from '../../services/aurora/aurora';
 import { useAuroraBalances } from '../../services/aurora/aurora';
@@ -921,10 +916,6 @@ function NavigationBar() {
             </div>
           </div>
           <div className="flex items-center justify-end">
-            <div className="mr-3">
-              <BridgeButton></BridgeButton>
-            </div>
-
             {isMobile ? null : <BuyNearButton />}
 
             <div className="flex items-center mx-3">

src/context/WalletSelectorContext.tsx

@@ -5,6 +5,7 @@ import { NetworkId, setupWalletSelector } from '@near-wallet-selector/core';
 import type {
   WalletSelector,
   AccountState,
+  Wallet,
   Network,
 } from '@near-wallet-selector/core';
 import { setupModal } from '@near-wallet-selector/modal-ui';
@@ -43,6 +44,7 @@ import {
 } from '../pages/Orderly/orderly/utils';
 import { isMobile } from '../utils/device';
 import { setupKeypom } from '@keypom/selector';
+import { SignMessageMethod } from '@near-wallet-selector/core/src/lib/wallet';
 import { addUserWallet } from '../services/indexer';
 
 const CONTRACT_ID = getOrderlyConfig().ORDERLY_ASSET_MANAGER;
@@ -54,6 +56,7 @@ declare global {
     selector: WalletSelector & {
       getAccountId?: () => string;
     };
+    nearWallet: Wallet & SignMessageMethod;
     modal: WalletSelectorModal;
     selectorAccountId?: string | null;
     sender?: any;

src/pages/Bridge/abi/auroraErc20.json

@@ -0,0 +1 @@
+[{"inputs":[{"internalType":"string","name":"name","type":"string"},{"internalType":"string","name":"symbol","type":"string"},{"internalType":"uint8","name":"decimal","type":"uint8"},{"internalType":"address","name":"admin","type":"address"}],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"spender","type":"address"},{"indexed":false,"internalType":"uint256","name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":false,"internalType":"uint256","name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"inputs":[],"name":"admin","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"target","type":"address"},{"internalType":"bytes","name":"data","type":"bytes"}],"name":"adminDelegatecall","outputs":[{"internalType":"bytes","name":"","type":"bytes"}],"stateMutability":"payable","type":"function"},{"inputs":[{"internalType":"uint256","name":"flags","type":"uint256"}],"name":"adminPause","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"adminReceiveEth","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[{"internalType":"address payable","name":"destination","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"adminSendEth","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"key","type":"uint256"},{"internalType":"uint256","name":"value","type":"uint256"}],"name":"adminSstore","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"},{"internalType":"address","name":"spender","type":"address"}],"name":"allowance","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"approve","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"decimals","outputs":[{"internalType":"uint8","name":"","type":"uint8"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"subtractedValue","type":"uint256"}],"name":"decreaseAllowance","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"addedValue","type":"uint256"}],"name":"increaseAllowance","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"mint","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"name","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"paused","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"symbol","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"totalSupply","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"recipient","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"transfer","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"sender","type":"address"},{"internalType":"address","name":"recipient","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"transferFrom","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"recipient","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"withdrawToEthereum","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bytes","name":"recipient","type":"bytes"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"withdrawToNear","outputs":[],"stateMutability":"nonpayable","type":"function"}]