request changes

bancorprotocol · Aug 12, 2024 · 7a19959 · 7a19959
1 parent a021636
commit 7a19959
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 57 deletions.
diff --git a/src/components/strategies/common/TokenSelection.tsx b/src/components/strategies/common/TokenSelection.tsx
@@ -31,22 +31,20 @@ export const TokenSelection: FC<Props> = ({ base, quote }) => {
   const openTokenListModal = (type: 'base' | 'quote') => {
     const isBase = type === 'base';
     const onClick = (token: Token) => {
-      const params: { base?: string; quote?: string } = {};
+      const search: { base?: string; quote?: string } = {};
       tokenEvent(isBase, token);
 
       if (isBase) {
-        params.base = token.address;
-        if (quote) params.quote = quote?.address;
+        search.base = token.address;
+        if (quote) search.quote = quote?.address;
       } else {
-        if (base) params.base = base?.address;
-        params.quote = token.address;
+        if (base) search.base = base?.address;
+        search.quote = token.address;
       }
 
       navigate({
-        search: (search) => ({
-          ...search,
-          ...params,
-        }),
+        to: '/trade',
+        search,
         replace: true,
         resetScroll: false,
       });
@@ -67,8 +65,8 @@ export const TokenSelection: FC<Props> = ({ base, quote }) => {
         updatedQuote: base.symbol,
       });
       navigate({
-        search: (search) => ({
-          ...search,
+        to: '/trade',
+        search: () => ({
           base: quote.address,
           quote: base.address,
         }),

diff --git a/src/components/strategies/create/CreateOverlappingSummary.tsx b/src/components/strategies/create/CreateOverlappingSummary.tsx
@@ -1,6 +1,4 @@
-import { useSearch } from '@tanstack/react-router';
 import { MarketPriceIndication } from '../marketPriceIndication/MarketPriceIndication';
-import { TradeOverlappingSearch } from 'libs/routing/routes/trade';
 import { tokenAmount } from 'utils/helpers';
 import { TokenLogo } from 'components/common/imager/Imager';
 import { OverlappingOrder } from '../common/types';
@@ -20,55 +18,58 @@ interface Props {
 
 export const CreateOverlappingSummary: FC<Props> = (props) => {
   const { base, quote, order0, order1, spread } = props;
-  const search = useSearch({ strict: false }) as TradeOverlappingSearch;
   const { getFiatAsString } = useFiatCurrency(quote);
   const aboveMarket = isMinAboveMarket(order0);
   const belowMarket = isMaxBelowMarket(order1);
 
   const indicationProps = { base, quote, isRange: true, isOverlapping: true };
   return (
     <article className="rounded-8 text-12 grid gap-12 bg-black px-16 py-12">
-      <div>
-        <h4 className="font-weight-600">Min Price</h4>
-        <p className="font-weight-500 text-white/80">
-          {tokenAmount(search.min, quote)}
-        </p>
-        <MarketPriceIndication {...indicationProps} price={order0.min!} buy />
-      </div>
-      <div>
-        <h4 className="font-weight-600">Max Price</h4>
-        <p className="font-weight-500 text-white/80">
-          {tokenAmount(search.min, quote)}
-        </p>
-        <MarketPriceIndication {...indicationProps} price={order1.max!} />
+      <div className="grid grid-flow-col gap-20">
+        <div className="grid gap-4">
+          <h4 className="font-weight-600">Min Price</h4>
+          <p className="font-weight-500 text-white/80">
+            {tokenAmount(order0.min, quote)}
+          </p>
+          <MarketPriceIndication {...indicationProps} price={order0.min!} buy />
+        </div>
+        <div>
+          <h4 className="font-weight-600">Max Price</h4>
+          <p className="font-weight-500 text-white/80">
+            {tokenAmount(order1.max, quote)}
+          </p>
+          <MarketPriceIndication {...indicationProps} price={order1.max!} />
+        </div>
       </div>
       <div>
         <h4 className="font-weight-600">Fee Tier</h4>
         <p className="font-weight-500 text-white/80">{spread}%</p>
       </div>
-      <div>
-        <h4 className="font-weight-600 flex items-center gap-8">
-          <TokenLogo token={quote} size={16} />
-          {quote.symbol} Budget
-        </h4>
-        <p className="font-weight-500 text-white/80">
-          {tokenAmount(order0.budget, quote)}
-        </p>
-        <p className="break-all text-white/60">
-          {getFiatAsString(order0.budget)}
-        </p>
-      </div>
-      <div>
-        <h4 className="font-weight-600 flex items-center gap-8">
-          <TokenLogo token={base} size={16} />
-          {base.symbol} Budget
-        </h4>
-        <p className="font-weight-500 text-white/80">
-          {tokenAmount(order1.budget, quote)}
-        </p>
-        <p className="break-all text-white/60">
-          {getFiatAsString(order1.budget)}
-        </p>
+      <div className="grid grid-flow-col gap-20">
+        <div className="grid gap-4">
+          <h4 className="font-weight-600 flex items-center gap-4">
+            <TokenLogo token={quote} size={16} />
+            {quote.symbol} Budget
+          </h4>
+          <p className="font-weight-500 text-white/80">
+            {tokenAmount(order0.budget, quote)}
+          </p>
+          <p className="break-all text-white/60">
+            {getFiatAsString(order0.budget)}
+          </p>
+        </div>
+        <div>
+          <h4 className="font-weight-600 flex items-center gap-4">
+            <TokenLogo token={base} size={16} />
+            {base.symbol} Budget
+          </h4>
+          <p className="font-weight-500 text-white/80">
+            {tokenAmount(order1.budget, quote)}
+          </p>
+          <p className="break-all text-white/60">
+            {getFiatAsString(order1.budget)}
+          </p>
+        </div>
       </div>
       {(aboveMarket || belowMarket) && (
         <Warning>

diff --git a/src/components/strategies/create/CreateRecurringSummary.tsx b/src/components/strategies/create/CreateRecurringSummary.tsx
@@ -20,7 +20,7 @@ export const CreateRecurringSummary: FC<Props> = (props) => {
   const { getFiatAsString } = useFiatCurrency(quote);
 
   return (
-    <article className="rounded-8 grid gap-4 bg-black px-16 py-12">
+    <article className="rounded-8 text-12 grid gap-4 bg-black px-16 py-12">
       <h3
         className={cn(
           'text-14 font-weight-600',
@@ -30,32 +30,32 @@ export const CreateRecurringSummary: FC<Props> = (props) => {
         {buy ? 'Buy' : 'Sell'} Overview
       </h3>
       {isRange ? (
-        <>
-          <div className="text-12">
+        <div className="grid grid-flow-col gap-20">
+          <div className="grid gap-4">
             <h4 className="font-weight-600">Min Price</h4>
             <p className="font-weight-500 text-white/80">
               {tokenAmount(order.min, quote)}
             </p>
             <MarketPriceIndication {...indicationProps} price={order.min} />
           </div>
-          <div className="text-12">
+          <div className="grid gap-4">
             <h4 className="font-weight-600">Max Price</h4>
             <p className="font-weight-500 text-white/80">
               {tokenAmount(order.max, quote)}
             </p>
             <MarketPriceIndication {...indicationProps} price={order.max} />
           </div>
-        </>
+        </div>
       ) : (
-        <div className="text-12">
+        <div className="grid gap-4">
           <h4 className="font-weight-600">{buy ? 'Buy' : 'Sell'} Price</h4>
           <p className="font-weight-500 text-white/80">
             {tokenAmount(order.min, quote)}
           </p>
           <MarketPriceIndication {...indicationProps} price={order.min} />
         </div>
       )}
-      <div className="text-12">
+      <div className="grid gap-4">
         <h4 className="font-weight-600">Budget</h4>
         <p className="font-weight-500 text-white/80">
           {tokenAmount(order.budget, buy ? quote : base)}