Skip to content

Commit

Permalink
chore: add "Powered By Enso" tag to zaps
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xMasayoshi
0xMasayoshi committed Jan 3, 2025
1 parent 9f9c7db commit 6322c96
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 55 deletions.
121 changes: 66 additions & 55 deletions apps/web/src/ui/pool/ZapInfoCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
SkeletonBox,
classNames,
} from '@sushiswap/ui'
import { EnsoIcon } from '@sushiswap/ui/icons/EnsoIcon'
import { FC, useMemo } from 'react'
import { ZapResponse } from 'src/lib/hooks'
import {
Expand Down Expand Up @@ -45,60 +46,70 @@ export const ZapInfoCard: FC<ZapInfoCardProps> = ({
})

return (
<Collapsible open={Boolean(zapResponse)}>
<Card variant="outline">
<CardContent className="!pt-3 !pb-3 !px-5">
<div className="flex justify-between items-center gap-2">
<span className="font-medium">Price impact</span>
<span
className={classNames(
warningSeverityClassName(warningSeverity(priceImpact)),
'text-sm font-medium text-right',
)}
>
{priceImpact ? (
`${
priceImpact.lessThan(ZERO)
? '+'
: priceImpact.greaterThan(ZERO)
? '-'
: ''
}${Math.abs(Number(priceImpact.toFixed(2)))}%`
) : !zapResponse ? (
<SkeletonBox className="h-4 py-0.5 w-[40px]" />
) : (
'-'
)}
</span>
</div>
<div className="flex justify-between items-center gap-2">
<span className="font-medium">Route</span>
{pool ? (
<ZapRouteDialog
inputCurrency={inputCurrency}
pool={pool}
tokenRatios={tokenRatios}
>
<span className="underline font-medium">View Route</span>
</ZapRouteDialog>
) : (
<SkeletonBox className="h-4 py-0.5 w-[80px]" />
)}
</div>
<div className="flex justify-between items-center gap-2">
<span className="font-medium">Fee (0.25%)</span>
{typeof price !== 'undefined' &&
typeof zapResponse?.feeAmount?.[0] !== 'undefined' ? (
`$${(
(price * Number(zapResponse.feeAmount[0])) /
10 ** inputCurrency.decimals
).toFixed(5)}`
) : (
<SkeletonBox className="h-4 py-0.5 w-[80px]" />
)}
</div>
</CardContent>
</Card>
</Collapsible>
<>
{zapResponse ? (
<Collapsible open>
<Card variant="outline">
<CardContent className="!pt-3 !pb-3 !px-5">
<div className="flex justify-between items-center gap-2">
<span className="font-medium">Price impact</span>
<span
className={classNames(
warningSeverityClassName(warningSeverity(priceImpact)),
'text-sm font-medium text-right',
)}
>
{priceImpact ? (
`${
priceImpact.lessThan(ZERO)
? '+'
: priceImpact.greaterThan(ZERO)
? '-'
: ''
}${Math.abs(Number(priceImpact.toFixed(2)))}%`
) : !zapResponse ? (
<SkeletonBox className="h-4 py-0.5 w-[40px]" />
) : (
'-'
)}
</span>
</div>
<div className="flex justify-between items-center gap-2">
<span className="font-medium">Route</span>
{pool ? (
<ZapRouteDialog
inputCurrency={inputCurrency}
pool={pool}
tokenRatios={tokenRatios}
>
<span className="underline font-medium">View Route</span>
</ZapRouteDialog>
) : (
<SkeletonBox className="h-4 py-0.5 w-[80px]" />
)}
</div>
<div className="flex justify-between items-center gap-2">
<span className="font-medium">Fee (0.25%)</span>
{typeof price !== 'undefined' &&
typeof zapResponse?.feeAmount?.[0] !== 'undefined' ? (
`$${(
(price * Number(zapResponse.feeAmount[0])) /
10 ** inputCurrency.decimals
).toFixed(5)}`
) : (
<SkeletonBox className="h-4 py-0.5 w-[80px]" />
)}
</div>
</CardContent>
</Card>
</Collapsible>
) : null}
<div className="flex justify-center">
<span className="inline-flex items-center gap-2">
<span className="text-sm text-muted-foreground">Powered By</span>
<EnsoIcon height={18} width={72} />
</span>
</div>
</>
)
}
44 changes: 44 additions & 0 deletions packages/ui/src/icons/EnsoIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React, { useId } from 'react'

import { IconComponent } from '../types'

export const EnsoIcon: IconComponent = (props) => {
const id = useId()
return (
<svg
width="73"
height="19"
viewBox="0 0 73 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="dark:text-white text-black"
{...props}
>
<g clip-path={`url(#${id})`}>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.532 18.461c4.196 0 7.34-2.756 8.466-6.018.003-.01-.01-.015-.015-.006-1.515 3.25-4.547 5.502-8.45 5.502-4.146 0-8.03-3.175-8.03-8.029 0-4.182 3.25-7.655 7.021-7.655 3.174 0 5.377 1.942 5.377 3.323 0 .635-.41 1.083-1.045 1.083-1.457 0-2.017-2.614-4.78-2.614-2.8 0-5.19 2.689-5.19 5.863 0 4.108 3.248 6.796 6.497 6.796 1.27 0 1.975-.334 2.178-.448.008-.004.003-.017-.006-.014a6 6 0 0 1-1.724.238c-3.996 0-5.601-3.1-5.601-5.116 0-1.53.97-2.165 1.755-2.165 2.091 0 1.792 4.48 6.945 4.48 2.689 0 5.19-1.83 5.19-5.451C18.12 4.122 14.238.5 9.533.5 4.603.5.57 4.496.57 9.462c0 5.004 4.183 9 8.962 9"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M42.778 5.127h-4.072c-2.739 0-3.792 1.194-3.792 4.073v4.494s0 .14.14.14h2.037c.14 0 .14-.14.14-.14V7.796c0-1.826 1.053-2.107 2.036-2.107h2.95c.982 0 2.035.281 2.035 2.107v5.898s0 .14.14.14h2.177c.141 0 .141-.14.141-.14V9.2c0-2.879-1.194-4.073-3.932-4.073M56.259 9.2h-4.073c-1.123 0-2.036-.492-2.036-1.755 0-1.264.913-1.756 2.036-1.756h6.53c.422 0 .422 0 .422-.28 0-.282 0-.282-.422-.282h-8.215c-2.176 0-2.949.773-2.949 2.318 0 1.614.773 2.316 2.95 2.316h4.212c1.124 0 2.036.492 2.036 1.756s-.913 1.755-2.036 1.755h-6.53c-.421 0-.421 0-.421.281 0 .28 0 .28.421.28h8.075c1.755 0 3.09-.701 3.09-2.316S58.294 9.2 56.258 9.2M33.44 13.272h-5.828c-2.458 0-3.09-1.755-3.09-3.791s.632-3.792 3.09-3.792h5.828c.42 0 .42 0 .42-.28 0-.282 0-.282-.42-.282h-6.39c-2.457 0-4.985 1.194-4.985 4.354 0 2.949 2.317 4.353 4.845 4.353h6.53c.42 0 .42 0 .42-.281 0-.28 0-.28-.42-.28"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.44 9.2h-7.584c-.42 0-.42 0-.42.28 0 .281 0 .281.42.281h7.583c.422 0 .422 0 .422-.28 0-.281 0-.281-.422-.281m33.351 4.072h-1.263c-2.458 0-3.09-1.755-3.09-3.791s.632-3.792 3.09-3.792h1.264c2.457 0 3.09 1.756 3.09 3.792s-.633 3.791-3.09 3.791m.562-8.145h-2.387c-2.457 0-4.985 1.194-4.985 4.354 0 2.949 2.317 4.353 4.845 4.353h2.668c2.528 0 4.845-1.404 4.845-4.353 0-3.16-2.528-4.354-4.986-4.354"
fill="currentColor"
/>
</g>
<defs>
<clipPath>
<path fill="currentColor" d="M.57.5h71.859v18H.57z" />
</clipPath>
</defs>
</svg>
)
}

0 comments on commit 6322c96

Please sign in to comment.