wip synswap

orbs-network · Nov 21, 2023 · 0b7c9a7 · 0b7c9a7
1 parent d644a36
commit 0b7c9a7
Show file tree

Hide file tree

Showing 8 changed files with 264 additions and 205 deletions.
diff --git a/packages/dapp-example/src/Lynex.tsx b/packages/dapp-example/src/Lynex.tsx
@@ -131,7 +131,6 @@ const dapp: Dapp = {
   Component: DappComponent,
   logo,
   config,
-  workInProgress: true,
 };
 
 export default dapp;

diff --git a/packages/dapp-example/src/SyncSwap.tsx b/packages/dapp-example/src/SyncSwap.tsx
@@ -10,30 +10,29 @@ import { erc20sData, zeroAddress, erc20s } from "@defi.org/web3-candies";
 import { SelectorOption, TokenListItem } from "./types";
 import { TWAP, Orders } from "@orbs-network/twap-ui-syncswap";
 import { createTheme, ThemeProvider } from "@mui/material";
-const config = { ...Configs.QuickSwap };
+const config = { ...Configs.Lynex };
 config.name = "SyncSwap";
 const nativeTokenLogo = "https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png";
+const backendApi = "https://lynex-backend-7e21c8e31085.herokuapp.com/api/v1";
 
 const parseListToken = (tokenList: any) => {
-  return tokenList
-    .filter((t: any) => t.chainId === config.chainId)
-    .map(({ symbol, address, decimals, logoURI, name, chainId }: any) => ({
-      decimals,
-      symbol,
-      name,
-      chainId,
-      address,
-      tokenInfo: { address, chainId, decimals, symbol, name, logoURI: (logoURI as string)?.replace("/logo_24.png", "/logo_48.png") },
-      tags: [],
-    }));
+  return tokenList.map(({ symbol, address, decimals, logoURI, name }: any) => ({
+    decimals,
+    symbol,
+    name,
+    address,
+    logoURI,
+  }));
 };
 export const useDappTokens = () => {
   return useGetTokens({
     chainId: config.chainId,
     parse: parseListToken,
-    modifyList: (tokens: any) => ({ ..._.mapKeys(tokens, (t) => t.address) }),
-    baseAssets: erc20s.poly,
-    url: `https://raw.githubusercontent.com/viaprotocol/tokenlists/main/tokenlists/polygon.json`,
+    modifyFetchResponse: (response: any) => {
+      return response.data;
+    },
+    baseAssets: [],
+    url: `${backendApi}/assets`,
   });
 };
 interface TokenSelectModalProps {
@@ -96,15 +95,13 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
       srcToken={zeroAddress}
       dstToken={erc20sData.poly.USDC.address} //USDC
       dappTokens={dappTokens}
-      onSrcTokenSelected={(token: any) => console.log(token)}
-      onDstTokenSelected={(token: any) => console.log(token)}
       TokenSelectModal={TokenSelectModal}
       provider={library}
-      getTokenLogoURL={getTokenLogoURL}
       isDarkTheme={isDarkTheme}
       limit={limit}
       onTxSubmitted={(args: any) => console.log(args)}
       pallete={pallete}
+      priceUsd={priceUsd}
     />
   );
 };
@@ -169,3 +166,30 @@ const theme = createTheme({
     },
   },
 });
+
+
+const priceUsd = async (address: string) => {
+  try {
+    const response = await fetch(`${backendApi}/assets`, {
+      method: "get",
+    });
+    const baseAssetsCall = await response.json();
+    const baseAssets = baseAssetsCall.data;
+
+    const wbnbPrice = baseAssets.find((asset: any) => asset.address.toLowerCase() === "0xe5D7C2a44FfDDf6b295A15c148167daaAf5Cf34f".toLowerCase())?.price;
+
+    const nativeBNB = {
+      address: "ETH",
+      name: "ETH",
+      symbol: "ETH",
+      decimals: 18,
+      logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png",
+      price: wbnbPrice,
+    };
+    baseAssets.unshift(nativeBNB);
+    return baseAssets.find((it: any) => it.address.toLowerCase() === address.toLowerCase())?.price;
+  } catch (ex) {
+    console.error("get baseAssets had error", ex);
+    return 0;
+  }
+};
diff --git a/packages/lib/src/components/Components.tsx b/packages/lib/src/components/Components.tsx
@@ -20,7 +20,7 @@ import {
 } from "./base";
 import { HiOutlineSwitchVertical } from "react-icons/hi";
 import { TbArrowsRightLeft } from "react-icons/tb";
-import { styled } from "@mui/system";
+import { styled, Button as MuiButton } from "@mui/material";
 import { AiOutlineWarning } from "react-icons/ai";
 import { useTwapContext } from "../context";
 import {
@@ -53,7 +53,7 @@ import {
 } from "./Labels";
 import { SwitchVariant, TWAPTokenSelectProps } from "../types";
 import { analytics } from "../analytics";
-import { Fade, FormControl, RadioGroup, Typography } from "@mui/material";
+import { Box, Fade, FormControl, RadioGroup, Typography } from "@mui/material";
 import { IoIosArrowDown } from "react-icons/io";
 import { IconType } from "react-icons";
 import Copy from "./base/Copy";
@@ -162,6 +162,7 @@ export const TokenSelect = ({
   tokenSelectedUi,
   tokenNotSelectedUi,
   CustomArrow,
+  customButtonElement,
 }: {
   onClick: () => void;
   isSrc?: boolean;
@@ -170,33 +171,66 @@ export const TokenSelect = ({
   tokenSelectedUi?: ReactNode;
   tokenNotSelectedUi?: ReactNode;
   CustomArrow?: IconType;
+  customButtonElement?: FC;
 }) => {
   const srcToken = useTwapStore((state) => state.srcToken);
   const dstToken = useTwapStore((state) => state.dstToken);
 
   const token = isSrc ? srcToken : dstToken;
 
-  if (token) {
-    return (
-      <StyledRowFlex
-        gap={5}
-        style={{ cursor: "pointer" }}
-        width="fit-content"
-        onClick={onClick}
-        className={`${className} twap-token-select twap-token-selected ${!!srcToken && !!dstToken ? "twap-token-filled" : ""}`}
-      >
-        {tokenSelectedUi ? (
-          <>{tokenSelectedUi}</>
-        ) : (
-          <>
-            <TokenLogoAndSymbol isSrc={isSrc} />
-            {!hideArrow && <Icon icon={CustomArrow ? <CustomArrow size={20} /> : <IoIosArrowDown size={20} />} />}
-          </>
-        )}
-      </StyledRowFlex>
-    );
-  }
-  return <TokenSelectButton customUi={tokenNotSelectedUi} hideArrow={hideArrow} className={`${className} twap-token-not-selected`} onClick={onClick} />;
+  return (
+    <Box className={`${className} twap-token-select`}>
+      {token ? (
+        <StyledRowFlex gap={5} style={{ cursor: "pointer" }} width="fit-content" onClick={onClick} className={`twap-token-selected`}>
+          {tokenSelectedUi ? (
+            <>{tokenSelectedUi}</>
+          ) : (
+            <>
+              <TokenLogoAndSymbol isSrc={isSrc} />
+              {!hideArrow && <Icon icon={CustomArrow ? <CustomArrow size={20} /> : <IoIosArrowDown size={20} />} />}
+            </>
+          )}
+        </StyledRowFlex>
+      ) : (
+        <TokenSelectButton
+          customButtonElement={customButtonElement}
+          customUi={tokenNotSelectedUi}
+          hideArrow={hideArrow}
+          className={`${className} twap-token-not-selected`}
+          onClick={onClick}
+        />
+      )}
+    </Box>
+  );
+};
+
+export const TokenSelectNew = ({
+  onClick,
+  isSrc,
+  hideArrow = true,
+  className = "",
+  CustomArrow,
+}: {
+  onClick: () => void;
+  isSrc?: boolean;
+  hideArrow?: boolean;
+  className?: string;
+  CustomArrow?: IconType;
+}) => {
+  const srcToken = useTwapStore((state) => state.srcToken);
+  const dstToken = useTwapStore((state) => state.dstToken);
+  const translations = useTwapContext().translations;
+
+  const token = isSrc ? srcToken : dstToken;
+
+  return (
+    <Box className={`${className} twap-token-select`}>
+      <MuiButton onClick={onClick} className={`twap-token-selected`}>
+        {token ? <TokenLogoAndSymbol isSrc={isSrc} /> : <StyledOneLineText>{translations.selectToken}</StyledOneLineText>}
+        {!hideArrow && <Icon icon={CustomArrow ? <CustomArrow size={20} /> : <IoIosArrowDown size={20} />} />}
+      </MuiButton>
+    </Box>
+  );
 };
 
 export const TokenSymbol = ({ isSrc, hideNull, onClick }: { isSrc?: boolean; hideNull?: boolean; onClick?: () => void }) => {

diff --git a/packages/lib/src/components/base/TokenSelectButton.tsx b/packages/lib/src/components/base/TokenSelectButton.tsx
@@ -5,16 +5,17 @@ import Tooltip from "./Tooltip";
 import { useTwapContext } from "../../context";
 import { useTwapStore } from "../../store";
 import { StyledOneLineText, StyledRowFlex } from "../../styles";
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 
 interface Props {
   onClick: () => void;
   className?: string;
   hideArrow?: boolean;
   customUi: ReactNode;
+  customButtonElement?: FC ;
 }
 
-function TokenSelectButton({ className = "", onClick, hideArrow, customUi }: Props) {
+function TokenSelectButton({ className = "", onClick, hideArrow, customUi, customButtonElement }: Props) {
   const translations = useTwapContext().translations;
   const wrongNetwork = useTwapStore((state) => state.wrongNetwork);
   const maker = useTwapStore((state) => state.lib?.maker);
@@ -35,9 +36,11 @@ function TokenSelectButton({ className = "", onClick, hideArrow, customUi }: Pro
     onClick();
   };
 
+  const Btn = customButtonElement || StyledContainer;
+
   return (
     <Tooltip text={warning}>
-      <StyledContainer className={`twap-token-select ${className}`} onClick={_onClick}>
+      <Btn className={`twap-token-select ${className}`} onClick={_onClick}>
         <StyledRowFlex>
           {customUi ? (
             <>{customUi}</>
@@ -48,7 +51,7 @@ function TokenSelectButton({ className = "", onClick, hideArrow, customUi }: Pro
             </>
           )}
         </StyledRowFlex>
-      </StyledContainer>
+      </Btn>
     </Tooltip>
   );
 }

diff --git a/packages/quickswap/src/styles.ts b/packages/quickswap/src/styles.ts
@@ -764,7 +764,6 @@ export const configureStyles = (isProMode?: boolean, isDarkMode?: boolean) => {
     ".twap-limit-price .twap-label": {
       height: 38,
     },
-    ".twap-token-filled": {},
     ".twap-orders-wrapper": {
       fontFamily: "Inter",
       maxWidth: "100%!important",

diff --git a/packages/syncswap/src/i18n/en.json b/packages/syncswap/src/i18n/en.json
@@ -1 +1,3 @@
-{}
+{
+    "selectToken":"Select"
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -131,7 +131,6 @@ const dapp: Dapp = { @@
       Component: DappComponent,
       logo,
       config,
-      workInProgress: true,
     };
     export default dapp;
@@ Expand Down @@