From e6514e34040ae2281c46c191d9067309a366a32c Mon Sep 17 00:00:00 2001 From: Sukh Singh Date: Thu, 8 Aug 2024 15:58:29 +0100 Subject: [PATCH] fixed quick swap --- README.md | 4 ++ packages/dapp-example/src/QuickSwap.tsx | 6 +- packages/quickswap/src/index.tsx | 75 ++++++++++++++----------- packages/quickswap/src/styles.ts | 59 +++++++++++++++++-- 4 files changed, 103 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index fec4f75a..5c51962b 100644 --- a/README.md +++ b/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`. diff --git a/packages/dapp-example/src/QuickSwap.tsx b/packages/dapp-example/src/QuickSwap.tsx index 54cbb606..a6768cbd 100644 --- a/packages/dapp-example/src/QuickSwap.tsx +++ b/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(), }; diff --git a/packages/quickswap/src/index.tsx b/packages/quickswap/src/index.tsx index a1b3c911..0dcc4754 100644 --- a/packages/quickswap/src/index.tsx +++ b/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 ( -
+
); @@ -151,35 +148,46 @@ const Tooltip = () => { return
; }; -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 ( -
- - + +
+ + - {props.limit ? : } - - -
+ {context.limit ? : } + +
+ + ); +}; + +const TWAP = (props: Props) => { + return ( + + + ); }; @@ -207,7 +215,6 @@ const TWAPPanel = () => { -
); diff --git a/packages/quickswap/src/styles.ts b/packages/quickswap/src/styles.ts index 7e1a8be0..ae5b53bb 100644 --- a/packages/quickswap/src/styles.ts +++ b/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 {