style: modify card and button styles

packages/tradingpost/src/OrderSummary.tsx

@@ -0,0 +1,157 @@
+import { styled } from "@mui/material";
+import { Styles as TwapStyles, Components, store, hooks } from "@orbs-network/twap-ui";
+import { StyledMarketPriceContainer, StyledOrderSummary } from "./styles";
+import { MdArrowDownward } from "@react-icons/all-files/md/MdArrowDownward";
+import { useAdapterContext } from "./context";
+import { useCallback, useState } from "react";
+
+export const OrderSummary = ({ onSubmit, disabled, isLimitPanel }: { onSubmit: () => void; disabled?: boolean; isLimitPanel?: boolean }) => {
+  const Button = useAdapterContext().Button;
+  return (
+    <StyledOrderSummary gap={14}>
+      <TwapStyles.StyledColumnFlex gap={14}>
+        <StyledTokens>
+          <TokenDisplay isSrc={true} />
+          <StyledArrow />
+          <TokenDisplay />
+        </StyledTokens>
+        <Components.Base.Card>
+          <StyledSummaryDetails>
+            {isLimitPanel ? (
+              <>
+                <SummaryPrice />
+                <Components.OrderSummaryDetailsDeadline />
+                <Components.OrderSummaryDetailsOrderType />
+                <Components.OrderSummaryDetailsChunkSize />
+                <Components.OrderSummaryDetailsMinDstAmount />
+              </>
+            ) : (
+              <>
+                <SummaryPrice />
+                <Components.OrderSummaryDetailsDeadline />
+                <Components.OrderSummaryDetailsOrderType />
+                <Components.OrderSummaryDetailsChunkSize />
+                <Components.OrderSummaryDetailsTotalChunks />
+                <Components.OrderSummaryDetailsTradeInterval />
+                <Components.OrderSummaryDetailsMinDstAmount />
+              </>
+            )}
+          </StyledSummaryDetails>
+        </Components.Base.Card>
+        <Components.Base.Card>
+          <TwapStyles.StyledColumnFlex gap={10}>
+            <Components.DisclaimerText />
+          </TwapStyles.StyledColumnFlex>
+        </Components.Base.Card>
+      </TwapStyles.StyledColumnFlex>
+      <Components.Base.Card>
+        <TwapStyles.StyledColumnFlex gap={12}>
+          <Components.AcceptDisclaimer />
+          <Components.OutputAddress ellipsis={13} />
+        </TwapStyles.StyledColumnFlex>
+      </Components.Base.Card>
+      <StyledButtonContainer>
+        <Button disabled={disabled} onClick={onSubmit}>
+          Confirm Order
+        </Button>
+      </StyledButtonContainer>
+    </StyledOrderSummary>
+  );
+};
+
+const SummaryPrice = () => {
+  const { TradePrice: DappTradePrice } = useAdapterContext();
+  const [inverted, setInvert] = useState(false);
+  const { isLimitOrder, srcToken, dstToken } = store.useTwapStore((store) => ({
+    isLimitOrder: store.isLimitOrder,
+    srcToken: store.srcToken,
+    dstToken: store.dstToken,
+  }));
+  const { isLoading, getToggled } = hooks.useLimitPriceV2();
+  const { marketPrice } = hooks.useMarketPriceV2(inverted);
+  const price = isLimitOrder ? getToggled(inverted, true) : marketPrice?.original;
+  const value = hooks.useFormatNumber({ value: price || "", decimalScale: 5 });
+
+  const onInvert = useCallback(() => {
+    setInvert((prev) => !prev);
+  }, [setInvert]);
+
+  const leftSymbol = inverted ? dstToken?.symbol : srcToken?.symbol;
+  const rightSymbol = inverted ? srcToken?.symbol : dstToken?.symbol;
+
+  return (
+    <StyledMarketPriceContainer>
+      <Components.Base.Label>Price</Components.Base.Label>
+      <DappTradePrice onClick={onInvert} loading={isLoading} leftSymbol={leftSymbol} rightSymbol={rightSymbol} price={value} />
+    </StyledMarketPriceContainer>
+  );
+};
+
+const StyledButtonContainer = styled(TwapStyles.StyledRowFlex)({
+  width: "100%",
+  button: {
+    width: "100%",
+  },
+});
+
+const StyledSummaryDetails = styled(TwapStyles.StyledColumnFlex)({
+  gap: 9,
+  ".twap-token-logo": {
+    display: "none",
+  },
+  "@media(max-width: 700px)": {
+    gap: 6,
+  },
+});
+
+const TokenDisplay = ({ isSrc }: { isSrc?: boolean }) => {
+  const { token, srcAmount } = store.useTwapStore((store) => ({
+    token: isSrc ? store.srcToken : store.dstToken,
+    srcAmount: store.srcAmountUi,
+  }));
+  const dstAmount = hooks.useDstAmount().outAmount.ui;
+
+  const _amount = isSrc ? srcAmount : dstAmount;
+
+  const amount = hooks.useFormatNumber({ value: _amount, decimalScale: 3 });
+
+  return (
+    <StyledTokenDisplay>
+      <StyledTokenDisplayAmount>{amount}</StyledTokenDisplayAmount>
+      <StyledTokenDisplayRight>
+        <TwapStyles.StyledText>{token?.symbol}</TwapStyles.StyledText>
+        <Components.Base.TokenLogo logo={token?.logoUrl} />
+      </StyledTokenDisplayRight>
+    </StyledTokenDisplay>
+  );
+};
+
+const StyledTokens = styled(TwapStyles.StyledColumnFlex)({
+  gap: 12,
+  alignItems: "center",
+});
+
+const StyledArrow = styled(MdArrowDownward)({
+  width: 24,
+  height: 24,
+});
+
+const StyledTokenDisplayRight = styled(TwapStyles.StyledRowFlex)({
+  width: "auto",
+  p: {
+    fontSize: 14,
+  },
+  ".twap-token-logo": {
+    width: 24,
+    height: 24,
+  },
+});
+
+const StyledTokenDisplayAmount = styled(TwapStyles.StyledOneLineText)({
+  fontWeight: 600,
+  fontSize: 24,
+});
+const StyledTokenDisplay = styled(TwapStyles.StyledRowFlex)({
+  justifyContent: "space-between",
+  gap: 30,
+});

packages/tradingpost/src/TradingPostOrders.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { styled } from "@mui/material";
+import { hooks, OrdersPortal, SelectedOrders, store } from "@orbs-network/twap-ui";
+import { StyledOrders, StyledOrdersHeader, StyledOrdersTab, StyledOrdersTabs } from "./styles";
+import { Styles } from "@orbs-network/twap-ui";
+
+export default function PancakeOrders() {
+  return (
+    <OrdersPortal>
+      <StyledOrders>
+        <StyledOrdersHeader>
+          <Tabs />
+        </StyledOrdersHeader>
+        <StyledBody>
+          <SelectedOrders />
+        </StyledBody>
+      </StyledOrders>
+    </OrdersPortal>
+  );
+}
+
+const StyledBody = styled(Styles.StyledColumnFlex)({
+  padding: "15px 20px 20px 20px",
+  alignItems: "center",
+  gap: 15,
+});
+
+const Tabs = () => {
+  const { tab, setTab } = store.useOrdersStore();
+
+  const tabs = hooks.useOrdersTabs();
+  const selectedTab = React.useMemo(() => {
+    return Object.keys(tabs)[tab as any];
+  }, [tabs, tab]);
+
+  const onSelect = (index: number) => {
+    setTab(index);
+  };
+
+  return (
+    <StyledOrdersTabs>
+      {Object.keys(tabs).map((key, index) => {
+        return (
+          <StyledOrdersTab selected={key === selectedTab ? 1 : 0} key={key} onClick={() => onSelect(index)}>
+            {key}
+          </StyledOrdersTab>
+        );
+      })}
+    </StyledOrdersTabs>
+  );
+};

packages/tradingpost/src/components.tsx

@@ -0,0 +1,53 @@
+import { Components, hooks, store } from "@orbs-network/twap-ui";
+import { useAdapterContext } from "./context";
+import BN from "bignumber.js";
+import { StyledMarketPriceContainer } from "./styles";
+import { styled } from "@mui/material";
+import { useMemo } from "react";
+
+export function Price() {
+  const { TradePrice: DappTradePrice } = useAdapterContext();
+  const { srcToken, dstToken, srcAmount, isLimitOrder } = store.useTwapStore((s) => ({
+    srcToken: s.srcToken,
+    dstToken: s.dstToken,
+    srcAmount: s.getSrcAmount().toString(),
+    isLimitOrder: s.isLimitOrder,
+  }));
+
+  const { limitPrice, isLoading, inverted } = hooks.useLimitPriceV2();
+  const { marketPrice } = hooks.useMarketPriceV2(inverted);
+
+  const price = hooks.useFormatNumber({ value: isLimitOrder ? limitPrice?.toggled : marketPrice?.toggled, decimalScale: 3, disableDynamicDecimals: false });
+
+  if (!DappTradePrice) {
+    return <Components.OrderSummaryLimitPrice />;
+  }
+
+  if (!srcToken || !dstToken || BN(srcAmount || "0").isZero()) {
+    return null;
+  }
+
+  const leftSymbol = inverted ? dstToken?.symbol : srcToken?.symbol;
+  const rightSymbol = inverted ? srcToken?.symbol : dstToken?.symbol;
+
+  return (
+    <StyledMarketPriceContainer>
+      <div style={{ opacity: isLoading ? 0 : 1 }}>
+        <DappTradePrice leftSymbol={leftSymbol} rightSymbol={rightSymbol} price={price} />
+      </div>
+      <StyledLoader loading={isLoading ? 1 : 0} />
+      <Components.Base.Label>$3.05 $8.72</Components.Base.Label>
+    </StyledMarketPriceContainer>
+  );
+}
+
+const StyledLoader = styled(Components.Base.Loader)<{ loading: number }>(({ loading }) => ({
+  position: "absolute",
+  width: "30%!important",
+  height: "15px!important",
+  top: "50%",
+  transform: "translateY(-50%)",
+  right: 0,
+  display: loading ? "block" : ("none" as const),
+  posinterEvents: "none",
+}));

packages/tradingpost/src/context.ts

@@ -0,0 +1,27 @@
+import { TWAPProps } from "@orbs-network/twap-ui";
+import { createContext, FC, JSXElementConstructor, useContext } from "react";
+
+export interface AdapterProps extends TWAPProps {
+  dappTokens?: { [key: string]: any };
+  isDarkTheme?: boolean;
+  ConnectButton: JSXElementConstructor<any>;
+  useTokenModal: any;
+  nativeToken: any;
+  connector?: any;
+  isMobile?: boolean;
+  useTooltip: any;
+  Button: any;
+  ApproveModalContent?: any;
+  SwapTransactionErrorContent?: any;
+  SwapPendingModalContent?: any;
+  SwapTransactionReceiptModalContent?: any;
+  AddToWallet?: any;
+  TradePrice?: any;
+  TradePriceToggle: FC<{ onClick: () => void; loading: boolean }>;
+}
+
+const AdapterContext = createContext({} as AdapterProps);
+
+export const AdapterContextProvider = AdapterContext.Provider;
+
+export const useAdapterContext = () => useContext(AdapterContext);

packages/tradingpost/src/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "enterAmount": "Enter an amount",
+  "tradeSizeMustBeEqual": "Trade size must be equal to at least 50 USD"
+}