Skip to content

Commit

Permalink
a
Browse files Browse the repository at this point in the history
  • Loading branch information
@denis-orbs
denis-orbs committed May 9, 2024
1 parent 37342b4 commit 5c5af6d
Show file tree
Hide file tree
Showing 21 changed files with 1,120 additions and 558 deletions.
10 changes: 5 additions & 5 deletions packages/dapp-example/src/QuickSwap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,11 @@ const useDecimals = (fromToken?: string, toToken?: string) => {
return { fromTokenDecimals, toTokenDecimals };
};

const _useTrade = (fromToken?: string, toToken?: string, amount?: string) => {
const { fromTokenDecimals, toTokenDecimals } = useDecimals(fromToken, toToken);
return useTrade(fromToken, toToken, amount, fromTokenDecimals, toTokenDecimals);
};

const TWAPComponent = ({ limit }: { limit?: boolean }) => {
const { account, library } = useWeb3React();
const connect = useConnectWallet();
Expand All @@ -95,11 +100,6 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
[_.size(dappTokens)]
);

const _useTrade = (fromToken?: string, toToken?: string, amount?: string) => {
const { fromTokenDecimals, toTokenDecimals } = useDecimals(fromToken, toToken);
return useTrade(fromToken, toToken, amount, fromTokenDecimals, toTokenDecimals);
};

return (
<TWAP
connect={connect}
Expand Down
81 changes: 58 additions & 23 deletions packages/dapp-example/src/Thena.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,38 @@
import { StyledModalContent, StyledThenaLayout, StyledThenaGradient, StyledThenaBox, StyledThena } from "./styles";
import { StyledModalContent, StyledThenaLayout, StyledThenaBox, StyledThena } from "./styles";
import { TWAP, Orders } from "@orbs-network/twap-ui-thena";
import { useConnectWallet, useGetPriceUsdCallback, useGetTokens, useTheme } from "./hooks";
import { hooks } from "@orbs-network/twap-ui";

import { useConnectWallet, useGetPriceUsdCallback, useGetTokens, useTheme, useTrade } from "./hooks";
import { Configs } from "@orbs-network/twap";
import { useWeb3React } from "@web3-react/core";
import { Dapp, TokensList, UISelector } from "./Components";
import { Popup } from "./Components";
import { useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import _ from "lodash";
import { erc20s, isNativeAddress } from "@defi.org/web3-candies";
import { SelectorOption, TokenListItem } from "./types";

import BN from "bignumber.js";
const config = Configs.Thena;

const nativeTokenLogo = "https://s2.coinmarketcap.com/static/img/coins/64x64/1839.png";

const pasrseListToken = (tokenList?: any[]) => {
return tokenList?.map(({ symbol, address, decimals, logoURI, name }: any) => ({
const pasrseListToken = (tokenList?: any) => {
return tokenList?.tokens.map(({ symbol, address, decimals, logoURI, name, price }: any) => ({
decimals,
symbol,
name,
address,
logoURI: isNativeAddress(address) ? nativeTokenLogo : logoURI.replace("_1", ""),
logoURI: isNativeAddress(address) ? nativeTokenLogo : logoURI,
price,
}));
};
export const useDappTokens = () => {
return useGetTokens({
chainId: config.chainId,
parse: pasrseListToken,
modifyList: (tokens: any) => ({ ..._.mapKeys(tokens, (t) => t.address) }),
url: "https://raw.githubusercontent.com/viaprotocol/tokenlists/main/tokenlists/bsc.json",
modifyList: (tokens: any) => {
return [config.nativeToken, ...tokens];
},
url: "https://lhthena.s3.us-east-2.amazonaws.com/token-list-lh.json",
baseAssets: erc20s.bsc,
});
};
Expand Down Expand Up @@ -71,24 +75,58 @@ const TokenSelectModal = ({ popup, setPopup, setSelectedAsset, baseAssets }: Tok
);
};

const _useTrade = (fromToken?: any, toToken?: any, amount?: string) => {
const _amount = hooks.useAmountBN(fromToken?.decimals, amount);

return useTrade(fromToken?.address, toToken?.address, _amount, fromToken?.decimals, toToken?.decimals);
};

const TWAPComponent = ({ limit }: { limit?: boolean }) => {
const { account, library } = useWeb3React();
const connect = useConnectWallet();
const { data: dappTokens } = useDappTokens();
const { isDarkTheme } = useTheme();
const priceUsd = useGetPriceUsdCallback();
const [fromToken, setFromToken] = useState<any>(undefined);
const [dstToken, setDstToken] = useState<any>(undefined);
const [amount, setAmount] = useState("");

useEffect(() => {
if (!dappTokens) return;
if (!fromToken) {
setFromToken(dappTokens[1]);
}
if (!dstToken) {
setDstToken(dappTokens[2]);
}
}, [dappTokens, fromToken, dstToken]);

const connector = useMemo(() => {
return {
getProvider: () => library,
};
}, [library]);

const trade = _useTrade(fromToken, dstToken, amount);

return (
<TWAP
connect={connect}
account={account}
srcToken="BNB"
dstToken="0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d"
srcToken={fromToken?.address}
dstToken={dstToken?.address}
dappTokens={dappTokens}
TokenSelectModal={TokenSelectModal}
provider={library}
isDarkTheme={isDarkTheme}
limit={limit}
priceUsd={priceUsd}
connector={connector}
onSrcTokenSelected={setFromToken}
onDstTokenSelected={setDstToken}
setFromAmount={setAmount}
outAmount={trade.outAmount}
outAmountLoading={BN(amount || "0").gt(0) && trade.isLoading}
/>
);
};
Expand All @@ -104,17 +142,14 @@ const DappComponent = () => {
<StyledThena isDarkMode={isDarkTheme ? 1 : 0}>
<StyledThenaLayout name={config.name}>
<UISelector select={setSelected} selected={selected} limit={true} />
<StyledThenaGradient>
<StyledThenaBox isDarkMode={isDarkTheme ? 1 : 0}>
<TWAPComponent limit={selected === SelectorOption.LIMIT} />
</StyledThenaBox>
</StyledThenaGradient>

<StyledThenaGradient>
<StyledThenaBox isDarkMode={isDarkTheme ? 1 : 0}>
<Orders />
</StyledThenaBox>
</StyledThenaGradient>

<StyledThenaBox isDarkMode={isDarkTheme ? 1 : 0}>
<TWAPComponent limit={selected === SelectorOption.LIMIT} />
</StyledThenaBox>

<StyledThenaBox isDarkMode={isDarkTheme ? 1 : 0}>
<Orders />
</StyledThenaBox>
</StyledThenaLayout>
</StyledThena>
);
Expand Down
14 changes: 4 additions & 10 deletions packages/dapp-example/src/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const fonts = {
[Configs.SpiritSwap.name]: "Jost",
[Configs.QuickSwap.name]: "Inter",
Kinetix: "Inter",
[Configs.Thena.name]: "Figtree",
[Configs.Thena.name]: "Inter",
[Configs.Pangolin.name]: "Poppins",
[Configs.PangolinDaas.name]: "Poppins",
[Configs.SpookySwap.name]: "Red Hat Display",
Expand Down Expand Up @@ -85,16 +85,10 @@ export const StyledSyncSwapBox = styled(Box)({
borderRadius: 10,
});

export const StyledThenaGradient = styled(Box)({
background: "transparent linear-gradient(128deg,#ed00c9,#bd00ed) 0 0 no-repeat padding-box",
padding: 1,
borderRadius: 10,
});

export const StyledThenaBox = styled(Box)<{ isDarkMode: number }>(({ isDarkMode }) => ({
background: isDarkMode ? "transparent linear-gradient(90deg,#1d023b,#17023e) 0 0 no-repeat padding-box" : "white",
background: "rgb(26 18 30/1)",
padding: 20,
borderRadius: 10,
borderRadius: 12,
}));

export const StyledStellaSwapBox = styled(Box)<{ isDarkMode: number }>(({ isDarkMode }) => ({
Expand All @@ -104,7 +98,7 @@ export const StyledStellaSwapBox = styled(Box)<{ isDarkMode: number }>(({ isDark
}));

export const StyledThena = styled(StyledDapp)<{ isDarkMode: number }>(({ isDarkMode }) => ({
background: isDarkMode ? "#090333" : "#F4F5F6",
background: "rgb(13 9 15/1)",
".ui-selector-btn": {
background: isDarkMode ? "rgba(255,255,255, 0.1)" : "white",
color: isDarkMode ? "white" : "black",
Expand Down
75 changes: 59 additions & 16 deletions packages/lib/src/components/Components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { useTwapContext } from "../context";
import { AiOutlineWarning } from "@react-icons/all-files/ai/AiOutlineWarning";
import { RiArrowUpDownLine } from "@react-icons/all-files/ri/RiArrowUpDownLine";
import { HiSwitchHorizontal } from "@react-icons/all-files/hi/HiSwitchHorizontal";
import { TiArrowSync } from "@react-icons/all-files/ti/TiArrowSync";

import { IconType } from "@react-icons/all-files";
import {
Expand Down Expand Up @@ -53,6 +54,7 @@ import {
useDeadlineUi,
useSetSrcAmountUi,
useDebounce,
usePriceDisplay,
} from "../hooks";
import { useLimitPriceStore, useTwapStore } from "../store";
import {
Expand All @@ -76,6 +78,7 @@ import {
OrderSummaryTradeIntervalLabel,
OrderSummaryMinDstAmountOutLabel,
ChunksAmountLabel,
LimitPriceLabel,
} from "./Labels";
import { SwitchVariant, Translations, TWAPTokenSelectProps } from "../types";
import { Box, Fade, FormControl, RadioGroup, Typography } from "@mui/material";
Expand Down Expand Up @@ -279,9 +282,9 @@ export const TokenSelect = ({
const token = isSrc ? srcToken : dstToken;

return (
<Box className={`${className} twap-token-select`}>
<div className={`${className} twap-token-select`} onClick={onClick} style={{ cursor: "pointer" }}>
{token ? (
<StyledRowFlex gap={5} style={{ cursor: "pointer" }} width="fit-content" onClick={onClick} className={`twap-token-selected`}>
<StyledRowFlex gap={5} style={{ cursor: "pointer" }} width="fit-content" className={`twap-token-selected`}>
{tokenSelectedUi ? (
<>{tokenSelectedUi}</>
) : (
Expand All @@ -300,7 +303,7 @@ export const TokenSelect = ({
onClick={onClick}
/>
)}
</Box>
</div>
);
};

Expand Down Expand Up @@ -486,11 +489,11 @@ export function TokenUSD({
decimalScale?: number;
}) {
const srcUSD = useSrcAmountUsdUi();
const srcLoading = useLoadingState().srcUsdLoading;
const { srcUsdLoading, dstUsdLoading } = useLoadingState();
const dstUSD = useDstAmountUsdUi();
const dstLoading = useLoadingState().dstUsdLoading;

const usd = isSrc ? srcUSD : dstUSD;
const isLoading = isSrc ? srcLoading : dstLoading;
const isLoading = isSrc ? srcUsdLoading : dstUsdLoading;

if (Number(usd) <= 0 && hideIfZero) return null;

Expand Down Expand Up @@ -881,15 +884,13 @@ export const OutputAddress = ({ className, translations: _translations, ellipsis
const StyledOutputAddress = styled(StyledColumnFlex)({});

export const OrderSummaryLimitPriceToggle = ({ translations: _translations }: { translations?: Translations }) => {
const { onInvert, limitPrice, leftToken, rightToken } = useLimitPriceV2();
const isLimitOrder = useTwapStore((store) => store.isLimitOrder);
const { leftToken, rightToken, price, onInvert } = usePriceDisplay();
const translations = useTwapContext()?.translations || _translations;

return isLimitOrder ? (
<TokenPriceCompare leftToken={leftToken} rightToken={rightToken} price={limitPrice?.original} toggleInverted={onInvert} />
) : (
<StyledText>{translations.none}</StyledText>
);
if (!isLimitOrder) return <>-</>;

return <TokenPriceCompare leftToken={leftToken} rightToken={rightToken} price={price} toggleInverted={onInvert} />;
};

export const OrderSummaryPriceCompare = () => {
Expand Down Expand Up @@ -1143,9 +1144,12 @@ export const CopyTokenAddress = ({ isSrc }: { isSrc: boolean }) => {

export const ResetLimitButton = ({ children }: { children?: ReactNode }) => {
const onReset = useLimitPriceV2().onReset;
const isLimitOrder = useTwapStore((s) => s.isLimitOrder);
const { isLimitOrder, srcAmountTyped } = useTwapStore((s) => ({
isLimitOrder: s.isLimitOrder,
srcAmountTyped: s.getSrcAmount().gt("0"),
}));

if (!isLimitOrder) return null;
if (!isLimitOrder || !srcAmountTyped) return null;

return (
<Tooltip text="Reset to default price">
Expand Down Expand Up @@ -1192,8 +1196,47 @@ export const TxSuccess = () => {
return <SuccessTxModal open={showSuccessModal} onClose={() => setShowSuccessModal(false)} />;
};

export const LimitInputV2 = () => {
export const LimitInputV2 = ({ className = "" }: { className?: string }) => {
const { onChange, limitPrice, isLoading } = useLimitPriceV2();
const srcAmount = useTwapStore((s) => s.getSrcAmount().toString());

if (BN(srcAmount || "0").isZero()) return null;

return <NumericInput className={className} loading={isLoading} placeholder={""} onChange={onChange} value={limitPrice?.toggled} />;
};

return <NumericInput loading={isLoading} placeholder={""} onChange={onChange} value={limitPrice?.toggled} />;
export const TradePrice = ({ className = "" }: { className?: string }) => {
const { srcToken, dstToken, srcAmount, isLimitOrder } = useTwapStore((s) => ({
srcToken: s.srcToken,
dstToken: s.dstToken,
srcAmount: s.getSrcAmount().toString(),
isLimitOrder: s.isLimitOrder,
}));
const dstAmountOut = useTwapContext().dstAmountOut;

const { limitPrice, inverted } = useLimitPriceV2();
const { marketPrice } = useMarketPriceV2(inverted);

const price = useFormatNumber({ value: isLimitOrder ? limitPrice?.toggled : marketPrice?.toggled, decimalScale: 3, disableDynamicDecimals: false });

if (!srcToken || !dstToken || BN(srcAmount || "0").isZero() || BN(dstAmountOut || "0").isZero()) {
return null;
}

const leftSymbol = inverted ? dstToken?.symbol : srcToken?.symbol;
const rightSymbol = inverted ? srcToken?.symbol : dstToken?.symbol;

return (
<StyledTradePrice className={className}>
<Label>Price</Label>
<Typography className="limit-price-text">
1 {leftSymbol} = {price} {rightSymbol}
</Typography>
</StyledTradePrice>
);
};

const StyledTradePrice = styled(StyledRowFlex)({
width: "100%",
justifyContent: "space-between",
});
Loading

0 comments on commit 5c5af6d

Please sign in to comment.