routing diagram fixes

jediswaplabs · Feb 14, 2024 · 0ec03c0 · 0ec03c0
1 parent 648a563
commit 0ec03c0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/src/components/RoutingDiagram/RoutingDiagram.tsx b/src/components/RoutingDiagram/RoutingDiagram.tsx
@@ -22,9 +22,15 @@ const Wrapper = styled(Box)`
   width: 100%;
 `
 
+const WrapperLabel = styled(Box)`
+  align-items: center;
+  width: 100%;
+  display: flex;
+`
+
 const RouteContainerRow = styled(Row)`
   display: grid;
-  grid-template-columns: 24px 1fr 24px;
+  grid-template-columns: 84px 1fr 24px;
 `
 
 const RouteRow = styled(Row)`
@@ -40,6 +46,14 @@ const PoolBadge = styled(Badge)`
   padding: 4px 4px;
 `
 
+const PoolBadgeWhite = styled(Badge)`
+  display: flex;
+  color: white;
+  font-size: 12px;
+  background: #323c5c;
+  margin-left: 4px;
+`
+
 const DottedLine = styled.div`
   display: flex;
   align-items: center;
@@ -98,7 +112,14 @@ export default function RoutingDiagram({
     <Wrapper>
       {routes.map((entry, index) => (
         <RouteContainerRow key={index}>
-          <CurrencyLogo currency={tokenIn} size="20px" />
+          {index === 0 && (
+            <WrapperLabel>
+              <CurrencyLogo currency={tokenIn} size="20px" />
+              <PoolBadgeWhite>
+                {routes?.[0].type} <BadgeText style={{ fontWeight: 300, marginLeft: '4px' }}>100%</BadgeText>
+              </PoolBadgeWhite>
+            </WrapperLabel>
+          )}
           <Route entry={entry} />
           <CurrencyLogo currency={tokenOut} size="20px" />
         </RouteContainerRow>

diff --git a/src/components/swap/SwapRoute.tsx b/src/components/swap/SwapRoute.tsx
@@ -69,7 +69,7 @@ export function SwapRoute({ trade }: { trade: ClassicTrade }) {
     <Column gap="md">
       <RowFixed gap="xs">
         <StyledLabelIcon />
-        <LabelText fontWeight={700}>Auto Routing {routes?.[0].type}</LabelText>
+        <LabelText fontWeight={700}>Auto Routing</LabelText>
       </RowFixed>
       <RoutingDiagram routes={routes} currencyIn={inputAmount.currency} currencyOut={outputAmount.currency} />
       <ThemedText.Caption color="neutral2">

diff --git a/src/utils/getRoutingDiagramEntries.ts b/src/utils/getRoutingDiagramEntries.ts
@@ -8,7 +8,7 @@ export interface RoutingDiagramEntry {
   percent: Percent
   path: [Currency, Currency, FeeAmount][]
   protocol: Protocol
-  type: 'V2' | 'V3'
+  type: 'V1' | 'V2'
 }
 
 const V2_DEFAULT_FEE_TIER = 3000
@@ -41,7 +41,7 @@ export default function getRoutingDiagramEntries(trade: ClassicTrade): RoutingDi
         percent,
         path,
         protocol,
-        type: 'V3',
+        type: 'V2',
       }
     })
   } else {
@@ -67,7 +67,7 @@ export default function getRoutingDiagramEntries(trade: ClassicTrade): RoutingDi
         percent,
         path,
         protocol,
-        type: 'V2',
+        type: 'V1',
       },
     ]
   }