working on pangolin

orbs-network · Aug 27, 2023 · 628d9cc · 628d9cc
1 parent 0b9b667
commit 628d9cc
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 31 deletions.
diff --git a/packages/dapp-example/src/Pangolin.tsx b/packages/dapp-example/src/Pangolin.tsx
@@ -1,5 +1,5 @@
 import { TWAP } from "@orbs-network/twap-ui-pangolin";
-import { Popup, TokensList } from "./Components";
+import { Popup, TokensList, UISelector } from "./Components";
 import { StyledModalContent, StyledPangolin, StyledPangolinBox, StyledPangolinDaasBox, StyledPangolinLayout } from "./styles";
 import _ from "lodash";
 import { erc20s, zeroAddress, erc20sData } from "@defi.org/web3-candies";
@@ -10,7 +10,8 @@ import { Dapp } from "./Components";
 import { useConnectWallet, useNetwork, useTheme } from "./hooks";
 import { pangolinDarkTheme, pangolinLightTheme } from "./themes";
 import Web3 from "web3";
-import { TokenListItem } from "./types";
+import { SelectorOption, TokenListItem } from "./types";
+import { useState } from "react";
 
 interface TokenSelectModalProps {
   isOpen: boolean;
@@ -97,7 +98,7 @@ const TokenSelectModal = ({ isOpen, onClose, onCurrencySelect }: TokenSelectModa
 };
 const logo = "https://s2.coinmarketcap.com/static/img/coins/64x64/8422.png";
 
-const TWAPComponent = ({ partnerDaas }: { partnerDaas?: string }) => {
+const TWAPComponent = ({ partnerDaas, limit }: { partnerDaas?: string; limit?: boolean }) => {
   const { account, library: provider, chainId } = useWeb3React();
   const { data: dappTokens } = useDappTokens();
   const { isDarkTheme } = useTheme();
@@ -118,18 +119,21 @@ const TWAPComponent = ({ partnerDaas }: { partnerDaas?: string }) => {
       connectedChainId={chainId}
       theme={isDarkTheme ? pangolinDarkTheme : pangolinLightTheme}
       partnerDaas={partnerDaas}
+      limit={limit}
     />
   );
 };
 
 const PangolinComponent = () => {
   const { isDarkTheme } = useTheme();
+  const [selected, setSelected] = useState(SelectorOption.TWAP);
 
   return (
     <StyledPangolin isDarkMode={isDarkTheme ? 1 : 0}>
       <StyledPangolinLayout name={config.name}>
+        <UISelector limit={true} select={setSelected} selected={selected} />
         <StyledPangolinBox>
-          <TWAPComponent />
+          <TWAPComponent limit={selected === SelectorOption.LIMIT} />
         </StyledPangolinBox>
       </StyledPangolinLayout>
     </StyledPangolin>

diff --git a/packages/lib/src/components/base/SwipeContainer.tsx b/packages/lib/src/components/base/SwipeContainer.tsx
@@ -4,9 +4,9 @@ import { ReactNode } from "react";
 import Icon from "./Icon";
 import { GrClose } from "react-icons/gr";
 
-const SwipeContainer = ({ show, children, close }: { show: boolean; children: ReactNode; close: () => void }) => {
+const SwipeContainer = ({ show, children, close, className }: { show: boolean; children: ReactNode; close: () => void; className?: string }) => {
   return (
-    <Slide direction="left" in={show} className="twap-swipe-container">
+    <Slide direction="left" in={show} className={`twap-swipe-container ${className}`}>
       <StyledSwipeContainer>
         <button onClick={close} className="twap-close">
           <Icon icon={<GrClose style={{ width: 20, height: 20 }} />} />

diff --git a/packages/pangolin/src/index.tsx b/packages/pangolin/src/index.tsx
@@ -1,5 +1,5 @@
 import { GlobalStyles } from "@mui/material";
-import { Components, hooks, Translations, TwapAdapter, useTwapContext, Styles as TwapStyles, TWAPTokenSelectProps, TWAPProps, OrdersPanel } from "@orbs-network/twap-ui";
+import { Components, hooks, Translations, TwapAdapter, useTwapContext, Styles as TwapStyles, TWAPTokenSelectProps, TWAPProps, OrdersPanel, store } from "@orbs-network/twap-ui";
 import { memo, useCallback, useState, createContext, ReactNode, useContext } from "react";
 import translations from "./i18n/en.json";
 import * as AdapterStyles from "./styles";
@@ -13,6 +13,13 @@ import Web3 from "web3";
 import { configureStyles } from "./styles";
 import { isNativeAddress } from "@defi.org/web3-candies";
 
+const storeOverride = {
+  isLimitOrder: true,
+  chunks: 1,
+  customDuration: { resolution: store.TimeResolution.Days, amount: 7 },
+  customFillDelay: { resolution: store.TimeResolution.Minutes, amount: 2 },
+};
+
 interface PangolinTWAPProps extends TWAPProps {
   theme: any;
   partnerDaas?: string;
@@ -93,6 +100,7 @@ const TWAP = memo((props: PangolinTWAPProps) => {
         <TwapAdapter
           connect={memoizedConnect}
           config={config}
+          storeOverride={props.limit ? storeOverride : undefined}
           maxFeePerGas={props.maxFeePerGas}
           priorityFeePerGas={props.priorityFeePerGas}
           translations={translations as Translations}
@@ -108,18 +116,8 @@ const TWAP = memo((props: PangolinTWAPProps) => {
           <GlobalStyles styles={globalStyles as any} />
           <AdapterContextProvider twapProps={props}>
             <div className="twap-container">
-              <TokenPanel isSrcToken={true} />
-              <Components.ChangeTokensOrder />
-              <TokenPanel isSrcToken={false} />
-              <LimitPrice />
-              <TradeSize />
-              <TradeInterval />
-              <MaxDuration />
-              <ShowOrderHistory />
-              <Components.SubmitButton />
-              <OrderSummary />
               <OrdersComponent />
-              <Components.PoweredBy />
+              {props.limit ? <LimitPanel /> : <TWAPPanel />}
             </div>
           </AdapterContextProvider>
         </TwapAdapter>
@@ -128,6 +126,50 @@ const TWAP = memo((props: PangolinTWAPProps) => {
   );
 });
 
+const TWAPPanel = () => {
+  return (
+    <>
+      <TokenPanel isSrcToken={true} />
+      <Components.ChangeTokensOrder />
+      <TokenPanel isSrcToken={false} />
+      <LimitPrice />
+      <TradeSize />
+      <TradeInterval />
+      <MaxDuration />
+      <ShowOrderHistory />
+      <Components.SubmitButton />
+      <OrderSummary>
+        <Components.OrderSummaryDetails />
+      </OrderSummary>
+
+      <Components.PoweredBy />
+    </>
+  );
+};
+
+const LimitPanel = () => {
+  return (
+    <>
+      <TokenPanel isSrcToken={true} />
+      <Components.ChangeTokensOrder />
+      <TokenPanel />
+      <ShowOrderHistory />
+      <LimitPrice limit={true} />
+
+      <Components.SubmitButton />
+      <OrderSummary>
+        <TwapStyles.StyledColumnFlex>
+          <Components.OrderSummaryDetailsDeadline />
+          <Components.OrderSummaryDetailsOrderType />
+          <Components.OrderSummaryDetailsChunkSize />
+          <Components.OrderSummaryDetailsMinDstAmount />
+        </TwapStyles.StyledColumnFlex>
+      </OrderSummary>
+      <Components.PoweredBy />
+    </>
+  );
+};
+
 const buttons = [
   { text: "25%", value: 0.25 },
   { text: "50%", value: 0.5 },
@@ -168,13 +210,13 @@ const TradeSize = () => {
   );
 };
 
-const LimitPrice = () => {
+const LimitPrice = ({ limit }: { limit?: boolean }) => {
   return (
     <Components.Base.Card className="twap-limit-price">
       <TwapStyles.StyledColumnFlex>
         <TwapStyles.StyledRowFlex justifyContent="space-between">
           <Components.Labels.LimitPriceLabel />
-          <Components.LimitPriceToggle />
+          {!limit && <Components.LimitPriceToggle />}
         </TwapStyles.StyledRowFlex>
         <Components.LimitPriceInput placeholder="0" />
       </TwapStyles.StyledColumnFlex>
@@ -216,7 +258,7 @@ const ModifiedTokenSelectModal = (props: TWAPTokenSelectProps) => {
 
 const memoizedTokenSelect = memo(ModifiedTokenSelectModal);
 
-const TokenSelect = ({ open, onClose, isSrcToken }: { open: boolean; onClose: () => void; isSrcToken: boolean }) => {
+const TokenSelect = ({ open, onClose, isSrcToken }: { open: boolean; onClose: () => void; isSrcToken?: boolean }) => {
   const { onSrcTokenSelected, onDstTokenSelected } = useAdapterContext();
 
   return (
@@ -232,7 +274,7 @@ const TokenSelect = ({ open, onClose, isSrcToken }: { open: boolean; onClose: ()
   );
 };
 
-const TokenPanel = ({ isSrcToken }: { isSrcToken: boolean }) => {
+const TokenPanel = ({ isSrcToken }: { isSrcToken?: boolean }) => {
   const [tokenListOpen, setTokenListOpen] = useState(false);
   const translations = useTwapContext().translations;
   const marketPrice = hooks.useMarketPrice().marketPrice;
@@ -272,7 +314,7 @@ const TokenPanel = ({ isSrcToken }: { isSrcToken: boolean }) => {
   );
 };
 
-const OrderSummary = () => {
+const OrderSummary = ({ children }: { children: ReactNode }) => {
   return (
     <Components.OrderSummarySwipeContainer>
       <TwapStyles.StyledColumnFlex gap={14}>
@@ -287,6 +329,7 @@ const OrderSummary = () => {
           <Components.Base.Card>
             <Components.OrderSummaryDetails />
           </Components.Base.Card>
+          <Components.Base.Card>{children}</Components.Base.Card>
           <Components.Base.Card>
             <TwapStyles.StyledColumnFlex gap={10}>
               <Components.DisclaimerText />
@@ -327,12 +370,14 @@ const ShowOrderHistory = () => {
 const OrdersComponent = () => {
   const args = useAdapterContext();
   return (
-    <Components.Base.SwipeContainer show={args.showOrders} close={args.toggleOrders}>
+    <AdapterStyles.StyledOrdersContainer show={args.showOrders} close={args.toggleOrders}>
       <AdapterStyles.StyledOrders>
         <OrdersPanel noPortal={true} />
       </AdapterStyles.StyledOrders>
-    </Components.Base.SwipeContainer>
+    </AdapterStyles.StyledOrdersContainer>
   );
 };
 
-export { TWAP };
+const memoizedTWAP = memo(TWAP);
+
+export { memoizedTWAP as TWAP };
diff --git a/packages/pangolin/src/styles.ts b/packages/pangolin/src/styles.ts
@@ -8,6 +8,10 @@ interface PangolinStyles extends StylesConfig {
   labelColor: string;
 }
 
+export const StyledOrdersContainer = styled(Components.Base.SwipeContainer)({
+  zIndex: 99
+});
+
 const parseTheme = (theme: any): PangolinStyles => {
   const isDarkMode = theme.textInput.backgroundColor !== "#FFFFFF";
 
@@ -300,7 +304,6 @@ export const configureStyles = (theme: any) => {
       position: "relative",
       display: "flex",
       gap: 12,
-      minHeight: 900,
       flexDirection: "column",
       width: "100%",
       background: styles.containerBackground,
@@ -398,6 +401,7 @@ export const configureStyles = (theme: any) => {
       color: `black!important`,
       fontWeight: 500,
       minHeight: "unset",
+      border:'unset'
     },
     ".twap-button-disabled": {
       background: "rgb(229, 229, 229)",

diff --git a/packages/spookyswap/src/index.tsx b/packages/spookyswap/src/index.tsx
@@ -85,7 +85,7 @@ const OrderSummary = ({ children }: { children: ReactNode }) => {
 };
 
 const ModifiedTokenSelectModal = (props: TWAPTokenSelectProps) => {
-  const { TokenSelectModal, dappTokens } = useAdapterContext();
+  const { TokenSelectModal, dappTokens, account, connectedChainId } = useAdapterContext();
   const { srcToken, dstToken } = store.useTwapStore();
 
   const selectedCurrency = useMemo(() => {
@@ -107,6 +107,8 @@ const ModifiedTokenSelectModal = (props: TWAPTokenSelectProps) => {
       onCurrencySelect={props.onSelect}
       isOpen={props.isOpen}
       onDismiss={props.onClose}
+      account={account}
+      chainId={connectedChainId}
     />
   );
 };

diff --git a/packages/spookyswap/src/styles.ts b/packages/spookyswap/src/styles.ts
@@ -416,8 +416,16 @@ export const StyledOrderSummaryModal = styled(Components.OrderSummaryModalContai
     },
   },
   ".twap-modal-content": {
-    paddingTop: "50!important",
-    paddingBottom: "50!important",
+    paddingTop: "50px!important",
+    paddingBottom: "50px!important",
+    ".twap-token-name": {
+      fontSize: 14,
+    },
+    ".twap-order-summary-details-item-right": {
+      "*": {
+        fontSize: 14,
+      },
+    },
     "& a": {
       fontWeight: 500,
       textDecoration: "underline",
@@ -441,8 +449,11 @@ export const configureStyles = (theme: Theme) => {
   return {
     ".twap-modal": {
       color: styles.textColor,
-      fontFamily: "Red Hat Display",
+      "*": {
+        fontFamily: "Red Hat Display",
+      },
       ".twap-modal-content": {
+        fontFamily: "Red Hat Display",
         background: styles.containerBackground,
         overflow: "auto",
         borderRadius: "10px",