Fix: add defi concept cards below the table #960
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import React from "react"; | ||
| import { BridgeIcon } from "./icons/bridge"; | ||
| import { SwapIcon } from "./icons/swap"; | ||
| import { ApyIcon } from "./icons/apy"; | ||
| import { AprIcon } from "./icons/apr"; | ||
| import { TvlIcon } from "./icons/tvl"; | ||
| import { ImpermanentLossIcon } from "./icons/impermanent-loss"; | ||
| import { CollateralIcon } from "./icons/collateral"; | ||
| import { LendBorrow } from "./icons/lend-borrow"; | ||
| import { SupplyIcon } from "./icons/supply"; | ||
| import { YieldFarmingIcon } from "./icons/yield-farming"; | ||
| import { StakeIcon } from "./icons/stake"; | ||
| import { ProvideLiquidityIcon } from "./icons/provide-liquidity"; | ||
|
|
||
| interface DefiConcept { | ||
| title: string; | ||
| description: string; | ||
| icon: JSX.Element; | ||
| } | ||
|
|
||
| export const DEFI_CONCEPTS: DefiConcept[] = [ | ||
| { | ||
| title: "Provide liquidity", | ||
| description: "Add token pairs to pools and earn fees from trades", | ||
| icon: <ProvideLiquidityIcon/>, | ||
| }, | ||
| { | ||
| title: "Stake", | ||
| description: "Lock tokens to earn passive rewards and voting rights", | ||
| icon: <StakeIcon/>, | ||
| }, | ||
| { | ||
| title: "Yield Farming", | ||
| description: "Earn additional tokens by participating in DeFi protocols", | ||
| icon: <YieldFarmingIcon/>, | ||
| }, | ||
| { | ||
| title: "Supply", | ||
| description: "Deposit assets into a protocol to earn yield", | ||
| icon: <SupplyIcon/>, | ||
| }, | ||
| { | ||
| title: "Lend & Borrow", | ||
| description: "Supply assets to earn interest or borrow against collateral", | ||
| icon: <LendBorrow/>, | ||
| }, | ||
| { | ||
| title: "Collateral", | ||
| description: "Assets deposited as security for borrowing", | ||
| icon: <CollateralIcon/>, | ||
| }, | ||
| { | ||
| title: "Impermanent Loss", | ||
| description: "Potential loss when providing liquidity compared to holding", | ||
| icon: <ImpermanentLossIcon/>, | ||
| }, | ||
| { | ||
| title: "TVL", | ||
| description: "Total value of assets deposited in a protocol", | ||
| icon: <TvlIcon/>, | ||
| }, | ||
| { | ||
| title: "APR", | ||
| description: "Simple interest rate earned over one year", | ||
| icon: <AprIcon/>, | ||
| }, | ||
| { | ||
| title: "APY", | ||
| description: "Compound interest rate earned over one year", | ||
| icon: <ApyIcon/>, | ||
| }, | ||
| { | ||
| title: "Swap", | ||
| description: "Exchange one token for another at market price", | ||
| icon: <SwapIcon/>, | ||
| }, | ||
| { | ||
| title: "Bridge", | ||
| description: "Transfer assets between different blockchains", | ||
| icon: <BridgeIcon/>, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| export const AprIcon = () => ( | ||
| <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-green-500/10"> | ||
| <svg | ||
| width="48" | ||
| height="48" | ||
| viewBox="0 0 48 48" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| aria-label="APR icon" | ||
| > | ||
| <rect | ||
| width="48" | ||
| height="48" | ||
| rx="24" | ||
| fill="white" | ||
| fill-opacity="0.04" | ||
| /> | ||
| <path | ||
| d="M16 28C16.8284 28 17.5 27.3284 17.5 26.5C17.5 25.6716 16.8284 25 16 25C15.1716 25 14.5 25.6716 14.5 26.5C14.5 27.3284 15.1716 28 16 28Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M20 29C20.8284 29 21.5 28.3284 21.5 27.5C21.5 26.6716 20.8284 26 20 26C19.1716 26 18.5 26.6716 18.5 27.5C18.5 28.3284 19.1716 29 20 29Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M24 25.5C24.8284 25.5 25.5 24.8284 25.5 24C25.5 23.1716 24.8284 22.5 24 22.5C23.1716 22.5 22.5 23.1716 22.5 24C22.5 24.8284 23.1716 25.5 24 25.5Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M28 28C28.8284 28 29.5 27.3284 29.5 26.5C29.5 25.6716 28.8284 25 28 25C27.1716 25 26.5 25.6716 26.5 26.5C26.5 27.3284 27.1716 28 28 28Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M32 22C32.8284 22 33.5 21.3284 33.5 20.5C33.5 19.6716 32.8284 19 32 19C31.1716 19 30.5 19.6716 30.5 20.5C30.5 21.3284 31.1716 22 32 22Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M31.1492 19.9492C30.0992 21.5492 28.4992 23.9492 27.6992 25.1492C27.0992 24.7992 26.1492 24.1492 24.4992 23.1492L23.8492 22.7492L19.6992 26.3992L16.1992 25.5492L15.6992 27.4992L20.1992 28.6492L24.0492 25.2992C25.3492 26.0992 26.9492 27.0992 27.2992 27.3492L27.5492 27.5992L27.9992 27.5492C28.5492 27.4992 28.5492 27.4992 32.7492 21.0992L31.1492 19.9492Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| export const ApyIcon = () => ( | ||
| <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-teal-500/10"> | ||
| <svg | ||
| width="48" | ||
| height="48" | ||
| viewBox="0 0 48 48" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| aria-label="APY icon" | ||
| > | ||
| <rect | ||
| width="48" | ||
| height="48" | ||
| rx="24" | ||
| fill="white" | ||
| fill-opacity="0.04" | ||
| /> | ||
| <g clip-path="url(#clip0_6356_2036)"> | ||
| <path | ||
| d="M16.168 32.5C16.9964 32.5 17.668 31.8284 17.668 31C17.668 30.1716 16.9964 29.5 16.168 29.5C15.3395 29.5 14.668 30.1716 14.668 31C14.668 31.8284 15.3395 32.5 16.168 32.5Z" | ||
| fill="#5CE3FE" | ||
| /> | ||
| <path | ||
| d="M20.168 33.5C20.9964 33.5 21.668 32.8284 21.668 32C21.668 31.1716 20.9964 30.5 20.168 30.5C19.3395 30.5 18.668 31.1716 18.668 32C18.668 32.8284 19.3395 33.5 20.168 33.5Z" | ||
| fill="#5CE3FE" | ||
| /> | ||
| <path | ||
| d="M24.168 30C24.9964 30 25.668 29.3284 25.668 28.5C25.668 27.6716 24.9964 27 24.168 27C23.3395 27 22.668 27.6716 22.668 28.5C22.668 29.3284 23.3395 30 24.168 30Z" | ||
| fill="#5CE3FE" | ||
| /> | ||
| <path | ||
| d="M28.168 31C28.9964 31 29.668 30.3284 29.668 29.5C29.668 28.6716 28.9964 28 28.168 28C27.3395 28 26.668 28.6716 26.668 29.5C26.668 30.3284 27.3395 31 28.168 31Z" | ||
| fill="#5CE3FE" | ||
| /> | ||
| <path | ||
| d="M32.168 29C32.9964 29 33.668 28.3284 33.668 27.5C33.668 26.6716 32.9964 26 32.168 26C31.3395 26 30.668 26.6716 30.668 27.5C30.668 28.3284 31.3395 29 32.168 29Z" | ||
| fill="#5CE3FE" | ||
| /> | ||
| <path | ||
| d="M31.718 26.5996L28.068 28.4496L23.918 27.3996L19.918 30.8996L16.418 30.0496L15.918 31.9496L20.418 33.0996L24.418 29.5996L28.268 30.5496L32.618 28.3996L31.718 26.5996Z" | ||
| fill="#5CE3FE" | ||
| /> | ||
| <path | ||
| d="M16.168 23.5C16.9964 23.5 17.668 22.8284 17.668 22C17.668 21.1716 16.9964 20.5 16.168 20.5C15.3395 20.5 14.668 21.1716 14.668 22C14.668 22.8284 15.3395 23.5 16.168 23.5Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M20.168 24.5C20.9964 24.5 21.668 23.8284 21.668 23C21.668 22.1716 20.9964 21.5 20.168 21.5C19.3395 21.5 18.668 22.1716 18.668 23C18.668 23.8284 19.3395 24.5 20.168 24.5Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M24.168 21C24.9964 21 25.668 20.3284 25.668 19.5C25.668 18.6716 24.9964 18 24.168 18C23.3395 18 22.668 18.6716 22.668 19.5C22.668 20.3284 23.3395 21 24.168 21Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M28.168 23.5C28.9964 23.5 29.668 22.8284 29.668 22C29.668 21.1716 28.9964 20.5 28.168 20.5C27.3395 20.5 26.668 21.1716 26.668 22C26.668 22.8284 27.3395 23.5 28.168 23.5Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M32.168 17.5C32.9964 17.5 33.668 16.8284 33.668 16C33.668 15.1716 32.9964 14.5 32.168 14.5C31.3395 14.5 30.668 15.1716 30.668 16C30.668 16.8284 31.3395 17.5 32.168 17.5Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| <path | ||
| d="M31.3172 15.4492C30.2672 17.0492 28.6672 19.4492 27.8672 20.6492C27.2672 20.2992 26.3172 19.6492 24.6672 18.6492L24.0172 18.2492L19.8672 21.8992L16.3672 21.0492L15.8672 22.9992L20.3672 24.1492L24.2172 20.7992C25.5172 21.5992 27.1172 22.5992 27.4672 22.8492L27.7172 23.0992L28.1672 23.0492C28.7172 22.9992 28.7172 22.9992 32.9172 16.5992L31.3172 15.4492Z" | ||
| fill="#6AFFAF" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_6356_2036"> | ||
| <rect | ||
| width="20" | ||
| height="20" | ||
| fill="white" | ||
| transform="translate(14 14)" | ||
| /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| export const BridgeIcon = () => ( | ||
| <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-yellow-500/10"> | ||
| <svg | ||
| width="48" | ||
| height="48" | ||
| viewBox="0 0 48 48" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| aria-label="Bridge icon" | ||
| > | ||
| <rect | ||
| width="48" | ||
| height="48" | ||
| rx="24" | ||
| fill="white" | ||
| fill-opacity="0.04" | ||
| /> | ||
| <path | ||
| d="M32.1251 26.1875H29.9376V22.7102C30.4722 23.21 31.0943 23.6072 31.7727 23.882C32.0032 23.9753 32.2613 23.9731 32.4903 23.8761C32.7192 23.779 32.9002 23.595 32.9934 23.3645C33.0867 23.1339 33.0845 22.8758 32.9874 22.6469C32.8904 22.418 32.7063 22.237 32.4758 22.1437C31.7242 21.8417 31.0805 21.321 30.628 20.6491C30.1755 19.9773 29.9349 19.1851 29.9376 18.375C29.9376 18.1264 29.8388 17.8879 29.663 17.7121C29.4871 17.5363 29.2487 17.4375 29.0001 17.4375C28.7514 17.4375 28.513 17.5363 28.3371 17.7121C28.1613 17.8879 28.0626 18.1264 28.0626 18.375C28.0626 19.4524 27.6345 20.4858 26.8727 21.2476C26.1108 22.0095 25.0775 22.4375 24.0001 22.4375C22.9226 22.4375 21.8893 22.0095 21.1274 21.2476C20.3656 20.4858 19.9376 19.4524 19.9376 18.375C19.9376 18.1264 19.8388 17.8879 19.663 17.7121C19.4871 17.5363 19.2487 17.4375 19.0001 17.4375C18.7514 17.4375 18.513 17.5363 18.3371 17.7121C18.1613 17.8879 18.0626 18.1264 18.0626 18.375C18.0648 19.1849 17.824 19.9768 17.3714 20.6484C16.9187 21.32 16.275 21.8403 15.5235 22.1422C15.293 22.2354 15.1089 22.4164 15.0119 22.6453C14.9148 22.8743 14.9127 23.1324 15.0059 23.3629C15.0992 23.5934 15.2801 23.7774 15.5091 23.8745C15.738 23.9716 15.9961 23.9737 16.2266 23.8805C16.905 23.6057 17.5271 23.2084 18.0618 22.7086V26.1875H15.8751C15.6264 26.1875 15.388 26.2863 15.2121 26.4621C15.0363 26.6379 14.9376 26.8764 14.9376 27.125C14.9376 27.3736 15.0363 27.6121 15.2121 27.7879C15.388 27.9637 15.6264 28.0625 15.8751 28.0625H18.0626V29.625C18.0626 29.8736 18.1613 30.1121 18.3371 30.2879C18.513 30.4637 18.7514 30.5625 19.0001 30.5625C19.2487 30.5625 19.4871 30.4637 19.663 30.2879C19.8388 30.1121 19.9376 29.8736 19.9376 29.625V28.0625H28.0626V29.625C28.0626 29.8736 28.1613 30.1121 28.3371 30.2879C28.513 30.4637 28.7514 30.5625 29.0001 30.5625C29.2487 30.5625 29.4871 30.4637 29.663 30.2879C29.8388 30.1121 29.9376 29.8736 29.9376 29.625V28.0625H32.1251C32.3737 28.0625 32.6121 27.9637 32.788 27.7879C32.9638 27.6121 33.0626 27.3736 33.0626 27.125C33.0626 26.8764 32.9638 26.6379 32.788 26.4621C32.6121 26.2863 32.3737 26.1875 32.1251 26.1875ZM24.9376 24.2383V26.1875H23.0626V24.2383C23.6836 24.3372 24.3165 24.3372 24.9376 24.2383ZM19.9376 22.7016C20.3136 23.0546 20.7337 23.3573 21.1876 23.6023V26.1875H19.9376V22.7016ZM26.8126 26.1875V23.6023C27.2664 23.3573 27.6866 23.0546 28.0626 22.7016V26.1875H26.8126Z" | ||
| fill="#FFFA6A" | ||
|
There was a problem hiding this comment. 💡 Codebase verification Based on the comprehensive search results, I can now generate the final response: Use design system color token for bridge icon The yellow color
Consider:
🔗 Analysis chainVerify color consistency with design system The yellow color ( The previous command failed because the file type wasn't recognized. Let's try a broader search for the color value and also look for any color-related definitions in the codebase to check if there's a design system or theme in place. Let's check the design system's color definitions and any other yellow color usage to verify if there's a consistent color token we should be using. Let's search without file type restrictions and also look specifically for icon-related color definitions to understand the color usage pattern in icons. 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Search for other occurrences of this color in the codebase
rg -i "#FFFA6A" --type=tsx --type=css
Length of output: 67 Script: #!/bin/bash
# Search for color hex value in all files, case-insensitive
rg -i "#FFFA6A"
# Search for potential color tokens or theme definitions
fd -e ts -e tsx -e js -e jsx . | xargs rg -i "yellow|color|theme|palette"
Length of output: 51896 Script: #!/bin/bash
# Search for color tokens or theme definitions specifically in tailwind config and theme files
cat tailwind.config.js
cat styles/theme.ts
# Search for yellow color variations in the codebase
rg -i "yellow|#FFFA|#FFE|#FFC" --type ts --type tsx
Length of output: 1147 Script: #!/bin/bash
# Search for yellow color variations without file type restriction
rg -i "yellow|#FFFA|#FFE|#FFC"
# Look for any icon-specific color definitions
fd -e tsx -e ts | xargs rg -i "icon.*color|fill.*#"
Length of output: 21010 |
||
| /> | ||
| </svg> | ||
| </div> | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| export const CollateralIcon = () =>( | ||
| <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-indigo-500/10"> | ||
| <svg | ||
| width="48" | ||
| height="48" | ||
| viewBox="0 0 48 48" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| role="img" | ||
| aria-label="Collateral icon" | ||
| > | ||
| <rect | ||
| width="48" | ||
| height="48" | ||
| rx="24" | ||
| fill="white" | ||
| fill-opacity="0.04" | ||
| /> | ||
| <g clip-path="url(#clip0_6356_1982)"> | ||
| <path | ||
| d="M23.632 14.1183C23.7385 14.0414 23.8665 14 23.9979 14C24.1292 14 24.2572 14.0414 24.3637 14.1183C24.8995 14.5049 26.1037 15.2116 27.6112 15.8191C29.1195 16.4274 30.8795 16.9166 32.5387 16.9166C32.7045 16.9166 32.8634 16.9824 32.9806 17.0996C33.0978 17.2169 33.1637 17.3758 33.1637 17.5416V24.0016C33.1637 26.5241 31.7445 28.8691 29.9654 30.6266C28.1879 32.3824 25.9429 33.6599 24.1045 33.9799L23.9979 33.9983L23.8904 33.9799C22.0529 33.6591 19.807 32.3824 18.0295 30.6266C16.2512 28.8691 14.832 26.5241 14.832 24.0016V17.5416C14.832 17.3758 14.8979 17.2169 15.0151 17.0996C15.1323 16.9824 15.2913 16.9166 15.457 16.9166C17.1162 16.9166 18.8762 16.4274 20.3854 15.8191C21.892 15.2108 23.0962 14.5041 23.632 14.1183Z" | ||
| fill="url(#paint0_radial_6356_1982)" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <radialGradient | ||
| id="paint0_radial_6356_1982" | ||
| cx="0" | ||
| cy="0" | ||
| r="1" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="translate(7.63037 2.75079) rotate(54) scale(47.894 42.5548)" | ||
| > | ||
| <stop offset="0.338" stop-color="#0FAFFF" /> | ||
| <stop offset="0.529" stop-color="#367AF2" /> | ||
| <stop offset="0.682" stop-color="#5750E2" /> | ||
| <stop offset="0.861" stop-color="#CC23D1" /> | ||
| </radialGradient> | ||
| <clipPath id="clip0_6356_1982"> | ||
| <rect | ||
| width="18.3333" | ||
| height="20" | ||
| fill="white" | ||
| transform="translate(14.832 14)" | ||
| /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,63 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| export const ImpermanentLossIcon =()=>( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-red-500/10"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion Add TypeScript types and improve component structure. The component declaration could be improved for better type safety and maintainability. Apply these changes: -export const ImpermanentLossIcon =()=>(
+import { FC } from 'react';
+
+export const ImpermanentLossIcon: FC = () => (Consider extracting the dimensions to constants or making them configurable via props: - <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-red-500/10">
+ <div className={`${size ?? 'w-12 h-12'} rounded-lg flex items-center justify-center bg-red-500/10`}> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <svg | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| width="48" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| height="48" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| viewBox="0 0 48 48" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| fill="none" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| xmlns="http://www.w3.org/2000/svg" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| role="img" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| aria-label="Impermanent Loss icon" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <rect | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| width="48" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| height="48" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rx="24" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| fill="white" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| fill-opacity="0.04" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion Use camelCase for SVG attributes in React. React expects SVG attributes to be in camelCase format. Apply this change: fill="white"
- fill-opacity="0.04"
+ fillOpacity="0.04"📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <g clip-path="url(#clip0_6356_1993)"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <path | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| d="M26.4481 17.2891C26.2812 16.9906 26.0377 16.742 25.7427 16.5689C25.4476 16.3959 25.1118 16.3047 24.7698 16.3047C24.4278 16.3047 24.0919 16.3959 23.7969 16.5689C23.5019 16.742 23.2584 16.9906 23.0914 17.2891L15.7797 30.3681C15.6161 30.6607 15.5319 30.9909 15.5353 31.326C15.5387 31.6612 15.6296 31.9896 15.799 32.2788C15.9685 32.5679 16.2106 32.8078 16.5013 32.9745C16.792 33.1413 17.1213 33.2292 17.4565 33.2295H32.0769C32.4122 33.2294 32.7417 33.1418 33.0326 32.9751C33.3236 32.8085 33.5659 32.5686 33.7355 32.2794C33.9052 31.9902 33.9962 31.6617 33.9997 31.3264C34.0032 30.9911 33.9189 30.6608 33.7553 30.3681L26.4481 17.2891Z" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| fill="url(#paint0_linear_6356_1993)" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <path | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| d="M25.9208 28.9982C25.9208 29.3042 25.7992 29.5977 25.5829 29.814C25.3665 30.0304 25.073 30.152 24.767 30.152C24.461 30.152 24.1676 30.0304 23.9512 29.814C23.7348 29.5977 23.6133 29.3042 23.6133 28.9982C23.6133 28.6922 23.7348 28.3988 23.9512 28.1824C24.1676 27.966 24.461 27.8444 24.767 27.8444C25.073 27.8444 25.3665 27.966 25.5829 28.1824C25.7992 28.3988 25.9208 28.6922 25.9208 28.9982ZM23.9979 25.5369V21.691C23.9979 21.4871 24.0789 21.2914 24.2232 21.1472C24.3674 21.0029 24.563 20.9219 24.767 20.9219C24.971 20.9219 25.1667 21.0029 25.3109 21.1472C25.4552 21.2914 25.5362 21.4871 25.5362 21.691V25.5369C25.5362 25.7409 25.4552 25.9366 25.3109 26.0808C25.1667 26.2251 24.971 26.3061 24.767 26.3061C24.563 26.3061 24.3674 26.2251 24.2232 26.0808C24.0789 25.9366 23.9979 25.7409 23.9979 25.5369Z" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| fill="url(#paint1_linear_6356_1993)" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </g> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <defs> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <linearGradient | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| id="paint0_linear_6356_1993" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| x1="18.4179" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| y1="13.6601" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| x2="28.9603" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| y2="35.5754" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| gradientUnits="userSpaceOnUse" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <stop stop-color="#FFCD0F" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <stop offset="1" stop-color="#FE8401" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </linearGradient> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <linearGradient | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| id="paint1_linear_6356_1993" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| x1="21.6903" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| y1="20.9219" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| x2="25.4839" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| y2="31.0365" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| gradientUnits="userSpaceOnUse" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <stop stop-color="#4A4A4A" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <stop offset="1" stop-color="#212121" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </linearGradient> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <clipPath id="clip0_6356_1993"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <rect | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| width="20" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| height="18.4602" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| fill="white" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transform="translate(14 14.7695)" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </clipPath> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </defs> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </svg> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion Improve SVG attribute naming and semantics. The SVG implementation needs some React-specific adjustments. Apply these changes: - <g clip-path="url(#clip0_6356_1993)">
+ <g clipPath="url(#impermanentLossClip)">
<path
d="M26.4481 17.2891C26.2812 16.9906 26.0377 16.742 25.7427 16.5689C25.4476 16.3959 25.1118 16.3047 24.7698 16.3047C24.4278 16.3047 24.0919 16.3959 23.7969 16.5689C23.5019 16.742 23.2584 16.9906 23.0914 17.2891L15.7797 30.3681C15.6161 30.6607 15.5319 30.9909 15.5353 31.326C15.5387 31.6612 15.6296 31.9896 15.799 32.2788C15.9685 32.5679 16.2106 32.8078 16.5013 32.9745C16.792 33.1413 17.1213 33.2292 17.4565 33.2295H32.0769C32.4122 33.2294 32.7417 33.1418 33.0326 32.9751C33.3236 32.8085 33.5659 32.5686 33.7355 32.2794C33.9052 31.9902 33.9962 31.6617 33.9997 31.3264C34.0032 30.9911 33.9189 30.6608 33.7553 30.3681L26.4481 17.2891Z"
fill="url(#paint0_linear_6356_1993)"
/>
<path
d="M25.9208 28.9982C25.9208 29.3042 25.7992 29.5977 25.5829 29.814C25.3665 30.0304 25.073 30.152 24.767 30.152C24.461 30.152 24.1676 30.0304 23.9512 29.814C23.7348 29.5977 23.6133 29.3042 23.6133 28.9982C23.6133 28.6922 23.7348 28.3988 23.9512 28.1824C24.1676 27.966 24.461 27.8444 24.767 27.8444C25.073 27.8444 25.3665 27.966 25.5829 28.1824C25.7992 28.3988 25.9208 28.6922 25.9208 28.9982ZM23.9979 25.5369V21.691C23.9979 21.4871 24.0789 21.2914 24.2232 21.1472C24.3674 21.0029 24.563 20.9219 24.767 20.9219C24.971 20.9219 25.1667 21.0029 25.3109 21.1472C25.4552 21.2914 25.5362 21.4871 25.5362 21.691V25.5369C25.5362 25.7409 25.4552 25.9366 25.3109 26.0808C25.1667 26.2251 24.971 26.3061 24.767 26.3061C24.563 26.3061 24.3674 26.2251 24.2232 26.0808C24.0789 25.9366 23.9979 25.7409 23.9979 25.5369Z"
fill="url(#paint1_linear_6356_1993)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_6356_1993"
x1="18.4179"
y1="13.6601"
x2="28.9603"
y2="35.5754"
gradientUnits="userSpaceOnUse"
>
- <stop stop-color="#FFCD0F" />
- <stop offset="1" stop-color="#FE8401" />
+ <stop stopColor="#FFCD0F" />
+ <stop offset="1" stopColor="#FE8401" />
</linearGradient>
<linearGradient
id="paint1_linear_6356_1993"
x1="21.6903"
y1="20.9219"
x2="25.4839"
y2="31.0365"
gradientUnits="userSpaceOnUse"
>
- <stop stop-color="#4A4A4A" />
- <stop offset="1" stop-color="#212121" />
+ <stop stopColor="#4A4A4A" />
+ <stop offset="1" stopColor="#212121" />
</linearGradient>
- <clipPath id="clip0_6356_1993">
+ <clipPath id="impermanentLossClip">📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Use camelCase for SVG attributes in React
React expects camelCase for attributes. Convert
fill-opacitytofillOpacity.📝 Committable suggestion