Merge pull request #1072 from oraidex/feat/ton

feat/ton
oraidex · Dec 11, 2024 · d376f85 · d376f85
2 parents fba0d84 + 6c33633
commit d376f85
Show file tree

Hide file tree

Showing 54 changed files with 2,390 additions and 513 deletions.
diff --git a/index.html b/index.html
@@ -38,6 +38,7 @@
     <meta property="twitter:domain" content="%PUBLIC_URL%" />
     <script>
       var exports = {};
+      var require = {};
     </script>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -20,13 +20,18 @@
     "@lucky-canvas/react": "^0.1.13",
     "@oraichain/bitcoin-bridge-contracts-sdk": "^1.1.9",
     "@oraichain/bitcoin-bridge-lib-js": "^1.1.9",
+    "@oraichain/common": "1.2.4",
     "@oraichain/common-contracts-sdk": "^1.0.31",
     "@oraichain/ethereum-multicall": "^1.0.2",
     "@oraichain/kawaiiverse-txs": "^0.0.3",
     "@oraichain/orai-bitcoin": "2.0.0",
     "@oraichain/oraidex-common-ui": "1.0.11",
     "@oraichain/oraidex-contracts-sdk": "1.0.55",
-    "@oraichain/oraidex-universal-swap": "1.1.23",
+    "@oraichain/oraidex-universal-swap": "1.1.24",
+    "@oraichain/ton-bridge-contracts": "^0.15.8",
+    "@oraichain/tonbridge-contracts-sdk": "^1.3.1",
+    "@oraichain/tonbridge-sdk": "^1.3.6",
+    "@orbs-network/ton-access": "^2.3.3",
     "@react-spring/web": "^9.7.5",
     "@reduxjs/toolkit": "^1.9.3",
     "@sentry/react": "7.99.0",
@@ -39,6 +44,11 @@
     "@tanstack/react-query": "^4.32.6",
     "@tharsis/proto": "^0.1.17",
     "@tippyjs/react": "^4.2.0",
+    "@ton/core": "^0.56.3",
+    "@ton/crypto": "^3.3.0",
+    "@ton/ton": "^14.0.0",
+    "@tonconnect/protocol": "^2.2.6",
+    "@tonconnect/ui-react": "^2.0.6",
     "@visx/curve": "^2.17.0",
     "@visx/gradient": "^3.3.0",
     "@visx/responsive": "^2.17.0",
@@ -126,7 +136,7 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "vite",
-    "build": "vite build",
+    "build": "NODE_OPTIONS='--max-old-space-size=12288' vite build",
     "serve": "vite serve",
     "ts-check": "tsc --noEmit",
     "postinstall": "patch-package",
@@ -157,7 +167,11 @@
     "bitcoinjs-lib": "5.2.0",
     "axios": "0.26.1",
     "@sentry/react": "7.99.0",
-    "@oraichain/oraidex-common": "1.1.39"
+    "@oraichain/oraidex-common": "1.1.40"
+  },
+  "overrides": {
+    "cosmjs-types@>0.7.0 <0.8.0": "0.7.1",
+    "cosmjs-types@>0.8.0 <1": "0.9.0"
   },
   "engines": {
     "node": "^18 || ^20"

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,5 @@
+{
+  "url": "https://app.oraidex.io",
+  "name": "OraiDex",
+  "iconUrl": "https://oraidex.io/favicon.svg"
+}
diff --git a/src/components/CheckBox.module.scss b/src/components/CheckBox.module.scss
@@ -30,8 +30,11 @@
   left: 0;
   height: 16px;
   width: 16px;
-  border: 1px solid $blue-color;
   transform: translateY(-50%);
+
+  @include theme {
+    border: 1px solid theme-get('primary-surface-default-dark-3');
+  }
 }
 
 .radioBox {
@@ -40,14 +43,16 @@
 
 /* On mouse-over, add a grey background color */
 .container:hover input ~ .checkmark {
-  border-color: $blue-color;
+  @include theme {
+    border-color: theme-get('primary-surface-default-dark-3');
+  }
 }
 
 /* When the checkbox is checked, add a blue background */
 .container input:checked ~ .checkmark {
-  border-color: $blue-color;
-  @include theme() {
-    background-color: theme-get('bg-color');
+  @include theme {
+    border-color: theme-get('primary-surface-default-dark-3');
+    background-color: theme-get('neutral-6');
   }
 }
 
@@ -69,9 +74,11 @@
   top: 1px;
   width: 5px;
   height: 10px;
-  border: solid $blue-color;
-  border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
+  @include theme {
+    border: solid theme-get('primary-surface-default-dark-3');
+    border-width: 0 2px 2px 0;
+  }
 }
diff --git a/src/components/Modals/SelectTokenModal/SelectTokenModal.module.scss b/src/components/Modals/SelectTokenModal/SelectTokenModal.module.scss
@@ -1,5 +1,5 @@
 @import 'src/styles/themes';
-@import "src/styles/mixins";
+@import 'src/styles/mixins';
 
 .select {
   background: #141416;
@@ -28,7 +28,7 @@
     /* aiRight/White */
 
     &.light {
-     color: #6F767E;
+      color: #6f767e;
     }
   }
 
@@ -42,11 +42,10 @@
     .item {
       &.light {
         &.light {
-          color: #6F767E;
-         }
+          color: #6f767e;
+        }
       }
 
-
       border-radius: 8px;
       display: flex;
       gap: 10px;
@@ -69,12 +68,13 @@
 
       &:hover {
         cursor: pointer;
-        background: #333642;
+        background: #232521;
+        opacity: 0.7;
       }
 
       &.light:hover {
-        background-color: $blue-color;
-        color: #fff;
+        background-color: #f7f7f7;
+        opacity: 0.7;
       }
 
       .logo {
@@ -99,4 +99,4 @@
       }
     }
   }
-}
+}
diff --git a/src/components/Modals/SelectTokenModal/SelectTokenModal.tsx b/src/components/Modals/SelectTokenModal/SelectTokenModal.tsx
@@ -45,63 +45,80 @@ export const SelectTokenModal: FC<ModalProps> = ({
           <div>{type === 'token' ? 'Select a token' : 'Select a network'}</div>
         </div>
         <div className={cx('options')}>
-          {items?.map((item: TokenItemType | CustomChainInfo) => {
-            let key: string, title: string, balance: string;
-            let tokenAndChainIcons;
-            if (type === 'token') {
-              const token = item as TokenItemType;
-              key = token.denom;
-              title = token.name;
-              let sumAmountDetails: AmountDetails = {};
-              // by default, we only display the amount that matches the token denom
-              sumAmountDetails[token.denom] = amounts[token.denom];
-              let sumAmount: number = toSumDisplay(sumAmountDetails);
-              // if there are sub-denoms, we get sub amounts & calculate sum display of both sub & main amount
-              if (token.evmDenoms) {
-                const subAmounts = getSubAmountDetails(amounts, token);
-                sumAmountDetails = { ...sumAmountDetails, ...subAmounts };
-                sumAmount = toSumDisplay(sumAmountDetails);
+          {items
+            ?.map((item: TokenItemType | CustomChainInfo) => {
+              let key: string, title: string, balance: string, rawBalance: string;
+              let tokenAndChainIcons;
+              if (type === 'token') {
+                const token = item as TokenItemType;
+                key = token.denom;
+                title = token.name;
+                let sumAmountDetails: AmountDetails = {};
+                // by default, we only display the amount that matches the token denom
+                sumAmountDetails[token.denom] = amounts[token.denom];
+                let sumAmount: number = toSumDisplay(sumAmountDetails);
+                // if there are sub-denoms, we get sub amounts & calculate sum display of both sub & main amount
+                if (token.evmDenoms) {
+                  const subAmounts = getSubAmountDetails(amounts, token);
+                  sumAmountDetails = { ...sumAmountDetails, ...subAmounts };
+                  sumAmount = toSumDisplay(sumAmountDetails);
+                }
+                tokenAndChainIcons = tokensIcon.find((tokenIcon) => tokenIcon.coinGeckoId === token.coinGeckoId);
+                balance = sumAmount > 0 ? sumAmount.toFixed(truncDecimals) : '0';
+                rawBalance = balance;
+              } else {
+                const network = item as CustomChainInfo;
+                key = network.chainId.toString();
+                title = network.chainName;
+                const subAmounts = Object.fromEntries(
+                  Object.entries(amounts).filter(
+                    ([denom]) => tokenMap[denom] && tokenMap[denom].chainId === network.chainId
+                  )
+                );
+                const totalUsd = getTotalUsd(subAmounts, prices);
+                tokenAndChainIcons = chainIcons.find((chainIcon) => chainIcon.chainId === network.chainId);
+                rawBalance = totalUsd > 0 ? totalUsd.toFixed(2) : '0';
+                balance = '$' + rawBalance;
               }
-              tokenAndChainIcons = tokensIcon.find((tokenIcon) => tokenIcon.coinGeckoId === token.coinGeckoId);
-              balance = sumAmount > 0 ? sumAmount.toFixed(truncDecimals) : '0';
-            } else {
-              const network = item as CustomChainInfo;
-              key = network.chainId.toString();
-              title = network.chainName;
-              const subAmounts = Object.fromEntries(
-                Object.entries(amounts).filter(([denom]) => tokenMap[denom] && tokenMap[denom].chainId === network.chainId)
-              );
-              const totalUsd = getTotalUsd(subAmounts, prices);
-              tokenAndChainIcons = chainIcons.find((chainIcon) => chainIcon.chainId === network.chainId);
-              balance = '$' + (totalUsd > 0 ? totalUsd.toFixed(2) : '0');
-            }
-            const icon =
-              tokenAndChainIcons && theme === 'light' ? (
-                <tokenAndChainIcons.IconLight className={cx('logo')} />
-              ) : (
-                <tokenAndChainIcons.Icon className={cx('logo')} />
-              );
+              const icon =
+                tokenAndChainIcons && theme === 'light' ? (
+                  <tokenAndChainIcons.IconLight className={cx('logo')} />
+                ) : (
+                  <tokenAndChainIcons.Icon className={cx('logo')} />
+                );
 
-            return (
-              <div
-                className={cx('item', theme)}
-                key={key}
-                onClick={() => {
-                  setToken(key, type === 'token' && (item as TokenItemType).contractAddress);
-                  if (setSymbol) {
-                    setSymbol(title);
-                  }
-                  close();
-                }}
-              >
-                {icon}
-                <div className={cx('grow')}>
-                  <div>{title}</div>
+              return {
+                ...item,
+                key,
+                title,
+                balance,
+                rawBalance,
+                icon
+              };
+            })
+            .sort((a, b) => Number(b.rawBalance || 0) - Number(a.rawBalance || 0))
+            .map((item, idx) => {
+              const { key, title, balance, icon } = item;
+              return (
+                <div
+                  className={cx('item', theme)}
+                  key={`${key}-${idx}`}
+                  onClick={() => {
+                    setToken(key, type === 'token' && (item as TokenItemType).contractAddress);
+                    if (setSymbol) {
+                      setSymbol(title);
+                    }
+                    close();
+                  }}
+                >
+                  {icon}
+                  <div className={cx('grow')}>
+                    <div>{title}</div>
+                  </div>
+                  <div>{balance}</div>
                 </div>
-                <div>{balance}</div>
-              </div>
-            );
-          })}
+              );
+            })}
         </div>
       </div>
     </Modal>

diff --git a/src/components/Modals/SlippageModal/SlippageModal.module.scss b/src/components/Modals/SlippageModal/SlippageModal.module.scss
@@ -1,9 +1,9 @@
-@import "src/styles/mixins";
+@import 'src/styles/mixins';
 
 .setting {
   border-radius: 8px;
   padding: 20px 24px 24px;
-  border: 1px solid #A871DF;
+  border: 1px solid #a871df;
 
   .header {
     display: flex;
@@ -21,7 +21,7 @@
       line-height: 100%;
       /* identical to box height, or 18px */
       text-align: center;
-      color: #F0B90B;
+      color: #f0b90b;
 
       img {
         margin-right: 10px;
@@ -34,14 +34,13 @@
       height: 18px;
 
       path {
-        fill: #777E91;
+        fill: #777e91;
       }
     }
   }
 
-
   .subtitle {
-    color: #A871DF;
+    color: #a871df;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
@@ -70,7 +69,7 @@
       border-radius: 4px;
       padding: 6px 14px;
       margin: 0 4px;
-      color: #A871DF;
+      color: #a871df;
 
       .input {
         max-width: 40px;
@@ -88,7 +87,7 @@
     }
 
     .isChosen {
-      border: 1px solid #A871DF;
+      border: 1px solid #a871df;
       opacity: 1;
     }
   }
@@ -115,22 +114,22 @@
 }
 
 .light-modal {
-  background-color: #FCFCFC;
+  background-color: #fcfcfc;
   box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
 
   .options {
     .item {
-      background: #EEE7FF;
+      background: #eee7ff;
     }
   }
 }
 
 .dark-modal {
-  background-color: #2B2D3B;
+  background-color: #232521;
 
   .options {
     .item {
-      background: #423A56;
+      background: #423a56;
     }
   }
-}
+}