Merge pull request #10 from oraichain/feat/support-ton-osmosis

support osmosis ton
oraidex · Aug 30, 2024 · f8eb08c · f8eb08c
2 parents adcfd5f + 95947a5
commit f8eb08c
Show file tree

Hide file tree

Showing 25 changed files with 1,501 additions and 451 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -16,8 +16,9 @@ const inter = IBM_Plex_Sans({
 });
 
 export const metadata: Metadata = {
-  title: "OraiDEX TON Bridge",
-  description: "TON Bridge with Oraichain",
+  title: "TON IBC",
+  description: "Trustless IBC bridge across TON & Cosmos-ecosystem",
+  icons: "./favicon.png",
 };
 
 export default function RootLayout({

diff --git a/assets/icons/OraiDEXLogo.tsx b/assets/icons/OraiDEXLogo.tsx
diff --git a/assets/icons/toast.tsx b/assets/icons/toast.tsx
@@ -52,7 +52,7 @@ export const InfoIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
     >
       <path
         d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
-        fill="#AEE67F"
+        fill="#fefefe"
       />
       <path
         d="M20 19.5V24.5M20 15.51L20.01 15.499M20 30C25.523 30 30 25.523 30 20C30 14.477 25.523 10 20 10C14.477 10 10 14.477 10 20C10 25.523 14.477 30 20 30Z"
@@ -76,7 +76,7 @@ export const SuccessIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
     >
       <path
         d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
-        fill="#AEE67F"
+        fill="#fefefe"
       />
       <path
         d="M13 21L17 25L27 15"

diff --git a/assets/icons/token.tsx b/assets/icons/token.tsx
diff --git a/assets/images/image.svg b/assets/images/image.svg
diff --git a/assets/images/logo.png b/assets/images/logo.png
diff --git a/components/layout/connectButton/index.module.scss b/components/layout/connectButton/index.module.scss
@@ -31,7 +31,7 @@
   gap: 10px;
   flex-shrink: 0;
   border-radius: var(--Dimension-Corner-Radius-button, 99px);
-  background: var(--Colors-Primary-Surface-default, #aee67f);
+  background: var(--Colors-Primary-Surface-default, #fefefe);
 
   color: var(--Colors-Neutral-Text-text-btn-default, #292f23);
   text-align: center;
@@ -204,7 +204,7 @@
           line-height: 100%; /* 18px */
 
           &.connected {
-            background: var(--Colors-Neutral-Surface-bg-section-2, #aee67f);
+            background: var(--Colors-Neutral-Surface-bg-section-2, #fefefe);
 
             color: var(--Colors-Neutral-Text-body, #232521);
           }

diff --git a/components/layout/header/index.module.scss b/components/layout/header/index.module.scss
@@ -10,6 +10,9 @@
   left: 0;
   z-index: 10;
 
+  svg {
+    width: 120px;
+  }
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -44,7 +47,7 @@
   gap: 10px;
   flex-shrink: 0;
   border-radius: var(--Dimension-Corner-Radius-button, 99px);
-  background: var(--Colors-Primary-Surface-default, #aee67f);
+  background: var(--Colors-Primary-Surface-default, #fefefe);
 
   color: var(--Colors-Neutral-Text-text-btn-default, #292f23);
   text-align: center;

diff --git a/components/layout/header/index.tsx b/components/layout/header/index.tsx
@@ -3,6 +3,7 @@
 import { OraiDEXLogo } from "@/assets/icons/OraiDEXLogo";
 import styles from "./index.module.scss";
 import ConnectButton from "../connectButton";
+import Image from "next/image";
 
 const Header = () => {
   return (

diff --git a/components/page/bridge/components/inputBridge/index.module.scss b/components/page/bridge/components/inputBridge/index.module.scss
@@ -40,7 +40,7 @@
       .percent {
         cursor: pointer;
         border-radius: 99px;
-        background: #aee67f;
+        background: #fefefe;
         color: black;
         padding: 2px 10px;
 

diff --git a/components/page/bridge/components/inputBridge/index.tsx b/components/page/bridge/components/inputBridge/index.tsx
@@ -6,7 +6,11 @@ import { SelectOptionIcon } from "@/assets/icons/network";
 import SelectCommon from "@/components/commons/select";
 import { AMOUNT_BALANCE_ENTRIES_UNIVERSAL_SWAP } from "@/constants/config";
 import { TonNetwork } from "@/constants/ton";
-import { OraichainTokenList, TonTokenList } from "@/constants/tokens";
+import {
+  OraichainTokenList,
+  OsmosisTokenList,
+  TonTokenList,
+} from "@/constants/tokens";
 import { numberWithCommas } from "@/helper/number";
 import { useCoinGeckoPrices } from "@/hooks/useCoingecko";
 import useOnClickOutside from "@/hooks/useOnclickOutside";
@@ -22,11 +26,13 @@ import NumberFormat from "react-number-format";
 import { fromNano } from "@ton/core";
 import styles from "./index.module.scss";
 import { EXTERNAL_MESSAGE_FEE } from "../../constants";
+import { NetworkList } from "../..";
 
-export type NetworkType = "Oraichain" | "Ton";
+export type NetworkType = "Oraichain" | "Ton" | "osmosis-1";
 
 const InputBridge: FC<{
   networkTo?: NetworkType;
+  networkFrom?: NetworkType;
   disabled?: boolean;
   onChangeAmount?: (amount: number | undefined) => void;
   amount: number;
@@ -39,6 +45,7 @@ const InputBridge: FC<{
   isMaintained?: boolean;
 }> = ({
   networkTo = "Oraichain",
+  networkFrom = "",
   disabled = false,
   amount,
   onChangeAmount,
@@ -65,14 +72,34 @@ const InputBridge: FC<{
     .mul(prices?.[token?.coingeckoId] || 0)
     .toNumber();
 
-  const displayBalance =
-    networkTo === "Ton"
-      ? toDisplay(amounts?.[token?.denom] || "0", token?.decimal)
-      : toDisplay(amountsTon?.[token?.denom] || "0", token?.decimal);
-  // : toDisplay(balance || "0", token?.decimal);
+  let displayBalance = toDisplay(
+    amountsTon?.[token?.denom] || "0",
+    token?.decimal
+  );
+
+  if (
+    networkFrom === NetworkList.oraichain.id ||
+    networkFrom === NetworkList["osmosis-1"].id
+  ) {
+    displayBalance = toDisplay(amounts?.[token?.denom] || "0", token?.decimal);
+  }
 
-  const networkList =
-    networkTo === "Ton" ? OraichainTokenList : TonTokenList(tonNetwork);
+  function filterByCoingeckoId(tokenList, coingeckoId = "the-open-network") {
+    return tokenList.filter((token) => token.coingeckoId === coingeckoId);
+  }
+
+  let networkList = TonTokenList(tonNetwork);
+  if (networkTo === NetworkList.ton.id) networkList = OraichainTokenList;
+  if (networkTo === NetworkList["osmosis-1"].id) {
+    const tokenList =
+      networkFrom === NetworkList.oraichain.id
+        ? OraichainTokenList
+        : TonTokenList(tonNetwork);
+    networkList = filterByCoingeckoId(tokenList);
+  }
+
+  if (networkFrom === NetworkList["osmosis-1"].id)
+    networkList = OsmosisTokenList;
 
   return (
     <div
@@ -185,6 +212,8 @@ const InputBridge: FC<{
                     className={styles.tokenItem}
                     key={`token-${key}`}
                     onClick={() => {
+                      console.log({ eerererere: e });
+
                       setToken(e);
                       setOpen(false);
                     }}

diff --git a/components/page/bridge/helper.ts b/components/page/bridge/helper.ts
@@ -0,0 +1,8 @@
+import { fromBech32, toBech32 } from "@cosmjs/encoding";
+
+export const getAddressCosmos = (addr, prefix = "osmo") => {
+  if (!addr) throw "Address not found";
+  const { data } = fromBech32(addr);
+  const cosmosAddress = toBech32(prefix, data);
+  return cosmosAddress;
+};
diff --git a/components/page/bridge/index.module.scss b/components/page/bridge/index.module.scss
@@ -123,6 +123,7 @@
             height: 24px;
             align-items: center;
             gap: 8px;
+            cursor: pointer;
 
             color: var(--Colors-Neutral-Text-text-token-name, #f7f7f7);
             font-size: 16px;
@@ -134,6 +135,81 @@
               height: 24px;
             }
           }
+
+          .search {
+            position: relative;
+            width: 100%;
+            margin: 24px 0;
+
+            .searchInput {
+              width: 100%;
+              padding: 8px 16px 8px 44px;
+              align-items: center;
+              gap: 16px;
+              flex: 1 0 0;
+              border-radius: var(--Dimension-Corner-Radius-search-bar, 99px);
+              background: var(--Colors-Neutral-Surface-bg-section, #232521);
+
+              color: var(--Colors-Neutral-Text-body, #f7f7f7);
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 150%; /* 21px */
+
+              &::placeholder {
+                color: var(--Colors-Neutral-Text-body, #979995);
+              }
+            }
+
+            .searchIcon {
+              position: absolute;
+              left: 16px;
+              top: 8px;
+
+              width: 20px;
+              height: 20px;
+            }
+          }
+
+          .list {
+            .tokenItem {
+              cursor: pointer;
+              display: flex;
+              padding: 12px;
+              gap: 12px;
+              align-items: center;
+              align-self: stretch;
+
+              svg {
+                width: 38px;
+                height: 38px;
+              }
+
+              &:hover {
+                border-radius: 8px;
+                background: var(
+                  --Colors-Neutral-Surface-bg-dropdown-hover,
+                  #494949
+                );
+              }
+
+              .info {
+                display: flex;
+                flex-direction: column;
+                color: var(--Colors-Neutral-Text-text-token-name, #f7f7f7);
+                font-size: 18px;
+                font-weight: 500;
+                line-height: 150%; /* 27px */
+
+                .name {
+                  color: var(--Colors-Neutral-Text-body-on-section, #979995);
+                  font-size: 13px;
+                  font-weight: 400;
+                  line-height: 150%; /* 19.5px */
+                  letter-spacing: 0.013px;
+                }
+              }
+            }
+          }
         }
       }
 
@@ -211,7 +287,7 @@
         gap: 10px;
         align-self: stretch;
         border-radius: var(--Dimension-Corner-Radius-button, 99px);
-        background: var(--Colors-Primary-Surface-default, #aee67f);
+        background: var(--Colors-Primary-Surface-default, #fefefe);
 
         color: var(--Colors-Neutral-Text-text-btn-default, #292f23);
         text-align: center;