fixed quick swap

README.md

@@ -5,3 +5,7 @@
 1. `npm install`
 2. `npm run test`
 3. `npm run start` or `npm run build`
+
+### Notes
+
+You must have prettier installed globally to run the prettier script. You can install it by running `npm install -g prettier`.

packages/dapp-example/src/QuickSwap.tsx

@@ -92,7 +92,7 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
       }
       return token.tokenInfo ? token.tokenInfo.logoURI : nativeTokenLogo;
     },
-    [dappTokens],
+    [dappTokens]
   );
 
   const onInputChange = (e: any) => {
@@ -119,7 +119,7 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
     />
   );
 };
-const logo = "https://s2.coinmarketcap.com/static/img/coins/64x64/8206.png";
+
 const DappComponent = () => {
   const [selected, setSelected] = useState(SelectorOption.TWAP);
 
@@ -140,7 +140,7 @@ const DappComponent = () => {
 
 const dapp: Dapp = {
   Component: DappComponent,
-  logo,
+  logo: "https://s2.coinmarketcap.com/static/img/coins/64x64/8206.png",
   configs: [config],
   path: config.name.toLowerCase(),
 };

packages/quickswap/src/index.tsx

@@ -1,10 +1,11 @@
 import { Components, Translations, TwapAdapter, useTwapContext, Styles as TwapStyles, TWAPTokenSelectProps, hooks, TWAPProps, Configs, Token } from "@orbs-network/twap-ui";
 import translations from "./i18n/en.json";
 
-import { createContext, memo, useCallback, useContext, useEffect, useState } from "react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import Web3 from "web3";
-import { configureStyles } from "./styles";
+import { darkTheme, GlobalStyles, lightTheme } from "./styles";
 import { isNativeAddress, network } from "@defi.org/web3-candies";
+import { ThemeProvider } from "styled-components";
 
 interface QuickSwapTWAPProps extends TWAPProps {
   connect: () => void;
@@ -57,10 +58,6 @@ const AdapterContextProvider = AdapterContext.Provider;
 
 const useAdapterContext = () => useContext(AdapterContext);
 
-const useGlobalStyles = (isProMode?: boolean, isDarkMode = true) => {
-  return configureStyles(isProMode, isDarkMode);
-};
-
 const ModifiedTokenSelectModal = (props: TWAPTokenSelectProps) => {
   const TokenSelectModal = useAdapterContext().TokenSelectModal;
 
@@ -126,7 +123,7 @@ const SrcTokenPercentSelector = () => {
 
 const ChangeTokensOrder = () => {
   return (
-    <div>
+    <div className="twap-change-tokens-order-wrapper">
       <Components.ChangeTokensOrder />
     </div>
   );
@@ -151,35 +148,46 @@ const Tooltip = () => {
   return <div></div>;
 };
 
-const TWAP = (props: Props) => {
-  const connect = useCallback(() => {
-    props.connect();
-  }, []);
+const TWAPContent = () => {
+  const context = useAdapterContext();
+
+  const theme = useMemo(() => {
+    return context.isDarkTheme ? darkTheme : lightTheme;
+  }, [context.isDarkTheme]);
 
   return (
-    <div className="adapter-wrapper">
-      <TwapAdapter
-        connect={connect}
-        config={config}
-        maxFeePerGas={props.maxFeePerGas}
-        priorityFeePerGas={props.priorityFeePerGas}
-        translations={translations as Translations}
-        provider={props.provider}
-        account={props.account}
-        dappTokens={props.dappTokens}
-        parsedTokens={[]}
-        onTxSubmitted={props.onTxSubmitted}
-        onDstTokenSelected={props.onDstTokenSelected}
-        onSrcTokenSelected={props.onSrcTokenSelected}
-        isLimitPanel={props.limit}
-        Components={{ Tooltip }}
-      >
-        <AdapterContextProvider value={props}>
+    <ThemeProvider theme={theme}>
+      <div className="adapter-wrapper">
+        <TwapAdapter
+          connect={context.connect}
+          config={config}
+          maxFeePerGas={context.maxFeePerGas}
+          priorityFeePerGas={context.priorityFeePerGas}
+          translations={translations as Translations}
+          provider={context.provider}
+          account={context.account}
+          dappTokens={context.dappTokens}
+          parsedTokens={[]}
+          onTxSubmitted={context.onTxSubmitted}
+          onDstTokenSelected={context.onDstTokenSelected}
+          onSrcTokenSelected={context.onSrcTokenSelected}
+          isLimitPanel={context.limit}
+          Components={{ Tooltip }}
+        >
+          <GlobalStyles />
           <AmountUpdater />
-          {props.limit ? <LimitPanel /> : <TWAPPanel />}
-        </AdapterContextProvider>
-      </TwapAdapter>
-    </div>
+          {context.limit ? <LimitPanel /> : <TWAPPanel />}
+        </TwapAdapter>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+const TWAP = (props: Props) => {
+  return (
+    <AdapterContextProvider value={{ ...props }}>
+      <TWAPContent />
+    </AdapterContextProvider>
   );
 };
 
@@ -207,7 +215,6 @@ const TWAPPanel = () => {
         <TradeInterval />
         <MaxDuration />
       </TwapStyles.StyledColumnFlex>
-
       <Components.PoweredBy />
     </div>
   );

packages/quickswap/src/styles.ts

@@ -1,5 +1,16 @@
 import { Components, Styles, StylesConfig } from "@orbs-network/twap-ui";
-import { styled } from "styled-components";
+import { createGlobalStyle, styled } from "styled-components";
+export const darkTheme = {
+  palette: {
+    mode: "dark",
+  },
+};
+
+export const lightTheme = {
+  palette: {
+    mode: "light",
+  },
+};
 
 export const darkModeStylesConfig: StylesConfig = {
   iconsColor: "rgb(105, 108, 128)",
@@ -66,7 +77,10 @@ const getButtonStyles = (isDarkMode?: number | boolean) => {
     },
   };
 };
-export const configureStyles = (isProMode?: boolean, isDarkMode?: boolean) => {
+
+export const GlobalStyles = createGlobalStyle(({ theme }) => {
+  const isDarkMode = theme?.palette.mode === "dark" ? 1 : 0;
+  const isProMode = theme?.isProMode ? 1 : 0;
   const styles = isDarkMode ? darkModeStylesConfig : lightModeStylesConfig;
   const cardBackground = isProMode ? styles.selectedTokenBackground : styles.cardBackground;
   return {
@@ -95,7 +109,7 @@ export const configureStyles = (isProMode?: boolean, isDarkMode?: boolean) => {
         fontWeight: "400!important",
       },
       input: {
-        textAlign: "end!important",
+        textAlign: "right",
         fontSize: "13px!important",
       },
       ".twap-label": {
@@ -576,6 +590,7 @@ export const configureStyles = (isProMode?: boolean, isDarkMode?: boolean) => {
     },
 
     ".twap-token-panel": {
+      marginBottom: 12,
       ".twap-token-panel-title": {
         fontSize: 16,
       },
@@ -665,16 +680,30 @@ export const configureStyles = (isProMode?: boolean, isDarkMode?: boolean) => {
         },
       },
     },
+    ".twap-change-tokens-order-wrapper": {
+      position: "relative",
+      width: "100%",
+    },
     ".twap-change-tokens-order": {
       position: "absolute",
       width: "36px!important",
       height: 36,
       top: -24,
+      left: "50%",
+      transform: "translateX(-50%)",
       background: styles.wrapperBackground,
       border: isDarkMode ? `3px solid ${styles.cardBackground}` : `1px solid ${styles.selectedTokenBorderColor}`,
       borderRadius: 8,
       button: {
         padding: "0!important",
+        background: "none",
+        border: "none",
+        ".twap-icon": {
+          svg: {
+            width: 24,
+            height: 24,
+          },
+        },
       },
     },
     ".twap-powered-by": {
@@ -701,6 +730,7 @@ export const configureStyles = (isProMode?: boolean, isDarkMode?: boolean) => {
       maxWidth: "100%!important",
       margin: "auto",
       fontFamily: "Inter",
+      color: styles.textColor,
     },
     ".twap-max-duration-wrapper, .twap-trade-interval-wrapper": {
       ".twap-label": {
@@ -805,6 +835,27 @@ export const configureStyles = (isProMode?: boolean, isDarkMode?: boolean) => {
       backdropFilter: "blur(15px)",
       background: "rgba(0,0,0,.4)!important",
     },
+    ".twap-select-menu": {
+      button: {
+        background: "none",
+        border: "none",
+        textTransform: "uppercase",
+      },
+    },
+    ".twap-select-menu-list": {
+      background: "rgb(35, 39, 52)",
+      border: "1px solid rgb(199, 202, 217)",
+      borderRadius: "20px",
+      padding: "11px 0px",
+      width: "150px",
+      textTransform: "capitalize",
+
+      ".twap-select-menu-list-item": {
+        paddingLeft: "20px",
+        paddingRight: "20px",
+      },
+    },
+
     "@media(max-width:450px)": {
       ".twap-market-price": {
         display: "flex",
@@ -823,7 +874,7 @@ export const configureStyles = (isProMode?: boolean, isDarkMode?: boolean) => {
       },
     },
   };
-};
+});
 
 export const StyledReset = styled("button")<{ isDarkMode: number }>(({ isDarkMode }) => {
   return {