Add Staking Assets Table

hemilabs · Jan 22, 2025 · e325182 · e325182
1 parent 8b7237f
commit e325182
Show file tree

Hide file tree

Showing 38 changed files with 896 additions and 3 deletions.
diff --git a/webapp/app/[locale]/stake/_components/icons/diamondPoints.tsx b/webapp/app/[locale]/stake/_components/icons/diamondPoints.tsx
@@ -0,0 +1,40 @@
+import { ComponentProps } from 'react'
+
+export const DiamondPointsIcon = (props: ComponentProps<'svg'>) => (
+  <svg
+    fill="none"
+    height={16}
+    width={16}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m6.813 12.353-1.225-.31-.451 1.782 1.225.31.451-1.782Z"
+      fill="#664AED"
+    />
+    <path
+      d="m8.937 12.889-1.226-.31-.451 1.781 1.225.31.452-1.781ZM11.642 2.193l-1.226-.31-.451 1.782 1.225.31.452-1.782Z"
+      fill="#146AF4"
+    />
+    <path
+      d="m9.526 1.65-1.225-.31-.451 1.782 1.225.31.451-1.782Z"
+      fill="#664AED"
+    />
+    <path
+      d="m9.507 13.04-6.33-1.606.38-1.505 6.33 1.606c.543.14 1.085-.163 1.21-.667.124-.504-.21-1.024-.753-1.164l-3.955-1 .38-1.505 3.955 1c1.427.365 2.32 1.746 1.978 3.072-.341 1.326-1.776 2.125-3.203 1.76l.008.008Z"
+      fill="#9077ED"
+    />
+    <path
+      d="m9.074 3.438-2.068-.524-2.26 8.925 2.068.523 2.26-8.924Z"
+      fill="#664AED"
+    />
+    <path
+      d="m9.733 8.751-3.955-1 .38-1.505 3.955 1c.543.14 1.086-.162 1.21-.666.124-.504-.209-1.024-.752-1.164L5.049 4.02l.38-1.504 5.522 1.396c1.427.364 2.32 1.745 1.978 3.071-.341 1.326-1.776 2.125-3.203 1.76l.007.008Z"
+      fill="#9FF7EC"
+    />
+    <path
+      d="M9.064 3.434 6.997 2.91l-.433 1.707 2.068.523.432-1.706Z"
+      fill="#664AED"
+    />
+  </svg>
+)
diff --git a/webapp/app/[locale]/stake/_components/icons/hemiPoints.tsx b/webapp/app/[locale]/stake/_components/icons/hemiPoints.tsx
@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react'
+
+export const HemiPointsIcon = (props: ComponentProps<'svg'>) => (
+  <svg
+    fill="none"
+    height={16}
+    width={16}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9.538.002a.15.15 0 0 0-.174.124L8.37 5.862h-.742L6.636.126a.15.15 0 0 0-.174-.124C2.936.698.232 3.756.01 7.494c0 .005-.01.163-.01.242v.262c0 3.965 2.78 7.265 6.467 7.995a.15.15 0 0 0 .174-.124l.993-5.736h.741l.989 5.741a.15.15 0 0 0 .174.124c3.527-.7 6.225-3.759 6.452-7.497 0-.005.01-.163.01-.242v-.261C16.005 4.032 13.224.732 9.538.002Z"
+      fill="#fff"
+    />
+  </svg>
+)
diff --git a/webapp/app/[locale]/stake/_components/icons/points.tsx b/webapp/app/[locale]/stake/_components/icons/points.tsx
@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react'
+
+export const PointsIcon = (props: ComponentProps<'svg'>) => (
+  <svg
+    fill="none"
+    height={16}
+    width={16}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g fill="#CE6533">
+      <path d="M1.33 3.971a.484.484 0 0 1 .112-.51L3.26 1.647a.484.484 0 0 1 .509-.112l3.873 1.423a.242.242 0 0 1 .158.227v.848a.242.242 0 0 1-.07.17l-.943.943a.241.241 0 0 1-.255.056l-1.04-.384-1.143-.421a.12.12 0 0 0-.156.155l.806 2.183a.242.242 0 0 1-.056.255l-.838.838a.242.242 0 0 0 0 .342l.842.842a.241.241 0 0 1 .056.255l-.805 2.183a.12.12 0 0 0 .155.155l2.184-.805a.242.242 0 0 1 .254.056l.938.938c.046.045.071.107.071.17v.85a.242.242 0 0 1-.158.226l-3.868 1.427a.484.484 0 0 1-.51-.112l-1.816-1.816a.483.483 0 0 1-.112-.51l1.422-3.855a.484.484 0 0 0 0-.335L1.331 3.971ZM14.67 12.028a.484.484 0 0 1-.112.51l-1.816 1.816a.484.484 0 0 1-.51.112L8.36 13.043a.242.242 0 0 1-.159-.227v-.848c0-.064.026-.125.071-.17l.943-.943a.241.241 0 0 1 .254-.056l1.04.384 1.144.421a.12.12 0 0 0 .155-.155l-.805-2.183a.242.242 0 0 1 .056-.255l.838-.838a.242.242 0 0 0 0-.342l-.843-.842a.241.241 0 0 1-.056-.255l.806-2.183a.12.12 0 0 0-.155-.156l-2.184.806a.242.242 0 0 1-.255-.056l-.938-.938a.242.242 0 0 1-.07-.171v-.848c0-.101.062-.192.157-.227l3.869-1.427a.484.484 0 0 1 .51.112l1.816 1.816a.483.483 0 0 1 .111.51l-1.422 3.855a.482.482 0 0 0 0 .335l1.427 3.867Z" />
+    </g>
+  </svg>
+)
diff --git a/webapp/app/[locale]/stake/_components/icons/solvXpPoints.tsx b/webapp/app/[locale]/stake/_components/icons/solvXpPoints.tsx
diff --git a/webapp/app/[locale]/stake/_components/icons/stakeAndEarnPointsGraph.tsx b/webapp/app/[locale]/stake/_components/icons/stakeAndEarnPointsGraph.tsx
@@ -0,0 +1,64 @@
+import { ComponentProps } from 'react'
+
+export const StakeAndEarnPointsGraphIcon = (props: ComponentProps<'svg'>) => (
+  <svg
+    fill="none"
+    height={320}
+    width={320}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M258.289 181.216c.662-.028 1.297-.028 1.931-.056v-4.027c0 1.489-.635 2.869-1.931 4.083ZM6.703 219.34v-3.586a9.793 9.793 0 0 0 0 3.586ZM205.214 117.086v24.828L183.697 129.5l21.517-12.414ZM184.604 105.146l-5.986 3.449-9.628 5.572v-36.8c.028 9.683 4.772 18.566 14.207 26.621.441.386.938.772 1.407 1.158Z"
+      fill="#FFD4BB"
+      fillOpacity={0.16}
+      stroke="#FF6C15"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+    />
+    <path
+      d="M311.998 111.93v1.103c.11-.358.11-.717 0-1.103Z"
+      stroke="#FF6C15"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.759}
+    />
+    <path
+      d="M312.003 111.905v1.103c-.082.304-.248.58-.496.828-.497.607-1.269 1.076-2.29 1.49-15.393 6.676-32.662 10.262-51.834 10.731-14.069.331-27.145-1.187-39.283-4.58a49.458 49.458 0 0 1-2.179-.607 114.323 114.323 0 0 1-10.704-3.806L183.7 129.477l21.517 12.414 9.352 5.407 13.269 7.641 28 16.166c2.924 1.683 4.386 3.669 4.386 5.959v.055c0 1.489-.635 2.869-1.931 4.083-.635.634-1.434 1.213-2.4 1.765l-20.469 11.835c-5.627 3.255-12.469 4.855-20.524 4.855-1.986 0-3.917-.111-5.765-.331-5.6-.607-10.511-2.152-14.759-4.607L79.838 128.595l-29.71-17.159c-5.683-3.255-8.524-7.228-8.552-11.862 0-4.662 2.786-8.607 8.413-11.862l20.47-11.807c2.896-1.683 6.317-2.51 10.262-2.51 3.945 0 7.365.855 10.29 2.538l72.109 41.627 5.904-3.393 9.628-5.572 5.986-3.449c-.469-.386-.966-.772-1.407-1.158-9.435-8.055-14.179-16.938-14.234-26.62 0-.773.027-1.546.082-2.346.773-11.062 6.98-21.02 18.566-29.903.69-.58 1.545-1.02 2.565-1.324 1.021-.304 2.124-.387 3.338-.304 1.186.11 2.317.248 3.338.47 1.021.192 1.876.578 2.566 1.185 13.241 10.4 19.476 21.876 18.676 34.428-.579 9.324-5.186 17.627-13.821 24.91-2.979 2.538-6.455 4.938-10.4 7.228a91.554 91.554 0 0 1 11.917-5.766 96.035 96.035 0 0 1 12.304-4.055c9.6-2.565 20.082-3.945 31.448-4.165 21.738-.47 41.6 3.117 59.614 10.758 1.048.414 1.71.911 2.069 1.49.358.607.607 1.241.772 1.931h-.028Z"
+      fill="#FFD4BB"
+      fillOpacity={0.16}
+      stroke="#FF6C15"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+    />
+    <path
+      d="M218.094 79.586v22.317a95.969 95.969 0 0 0-12.303 4.055 91.505 91.505 0 0 0-11.918 5.766c3.945-2.29 7.421-4.69 10.4-7.228 8.635-7.282 13.242-15.586 13.821-24.91ZM178.952 197.688l-47.034 16.193-10.372 3.558c-.855.276-1.711.552-2.566.773-5.048 1.407-10.345 1.931-15.917 1.572-6.51-.414-12.166-2.014-16.993-4.772l-51.283-29.6-19.807-11.448c-4.8-2.787-7.559-6.042-8.276-9.794-.69-3.779.662-7.338 4.055-10.675l30.787-29.821 3.448-3.338 22.041 12.717 111.917 64.635ZM311.505 169.023c-.497.607-1.269 1.076-2.29 1.49-14.621 6.345-30.952 9.904-48.993 10.648v-4.082c0-2.29-1.462-4.276-4.386-5.959l-28-16.166-13.269-7.641-9.352-5.407v-24.827a114.614 114.614 0 0 0 10.704 3.807c.717.22 1.434.413 2.179.606 12.138 3.394 25.214 4.911 39.283 4.58 19.172-.469 36.441-4.055 51.834-10.731 1.021-.414 1.793-.883 2.29-1.49.248-.248.414-.524.496-.828v54.069c.193.69.028 1.352-.496 1.931Z"
+      fill="#FFD4BB"
+      fillOpacity={0.16}
+      stroke="#FF6C15"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+    />
+    <path
+      d="M178.953 197.681v55.173l-57.406 19.751c-5.821 1.959-11.972 2.759-18.483 2.345-6.51-.414-12.166-2.013-16.993-4.772L14.98 229.13c-4.8-2.787-7.559-6.042-8.276-9.794v-55.172c.717 3.752 3.476 7.007 8.276 9.793l19.807 11.448 51.283 29.6c4.827 2.759 10.483 4.359 16.993 4.773 5.573.358 10.869-.166 15.917-1.573.855-.22 1.711-.496 2.566-.772l10.372-3.559 47.034-16.193Z"
+      fill="#FFD4BB"
+      fillOpacity={0.16}
+      stroke="#FF6C15"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+    />
+    <path
+      d="M260.219 181.158v51.09c.027 2.262-1.407 4.248-4.331 5.903l-20.469 11.835c-5.628 3.255-12.47 4.855-20.525 4.855-8.027-.027-14.896-1.655-20.551-4.938l-15.394-8.883v-43.338L67.032 133.048l-22.04-12.717-3.449 3.338V99.586c.028 4.634 2.868 8.607 8.551 11.862l29.71 17.159 114.539 66.124c4.248 2.455 9.158 4 14.758 4.607 1.849.22 3.779.331 5.766.331 8.055 0 14.897-1.6 20.524-4.855l20.469-11.835c.965-.552 1.765-1.131 2.4-1.765.662-.028 1.297-.028 1.931-.056h.028Z"
+      fill="#FFD4BB"
+      fillOpacity={0.16}
+      stroke="#FF6C15"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+    />
+  </svg>
+)
diff --git a/webapp/app/[locale]/stake/_components/rewardTag.tsx b/webapp/app/[locale]/stake/_components/rewardTag.tsx
@@ -0,0 +1,77 @@
+import { DiamondPointsIcon } from '../../stake/_components/icons/diamondPoints'
+import { HemiPointsIcon } from '../../stake/_components/icons/hemiPoints'
+import { PointsIcon } from '../../stake/_components/icons/points'
+import { SolvXpPointsIcon } from '../../stake/_components/icons/solvXpPoints'
+
+type Props = {
+  label: string
+  value?: string | number
+  icon: React.ReactNode
+  backgroundColor?: string
+  style?: React.CSSProperties
+  textColor?: string
+}
+
+const RewardTag = ({
+  label,
+  value,
+  icon,
+  backgroundColor = 'bg-orange-500',
+  style,
+  textColor = 'text-white',
+}: Props) => (
+  <div
+    className={`inline-flex items-center rounded-full px-2 py-1 ${backgroundColor} ${textColor}`}
+    style={style}
+  >
+    <div className="mr-2 flex items-center">{icon}</div>
+    <span className="mr-1 font-normal">{label}</span>
+    {value && (
+      <>
+        <div className="mr-1 h-3 border-l border-neutral-200" />
+        <span className="text-orange-950">{value}</span>
+      </>
+    )}
+  </div>
+)
+
+export const HemiTag = ({ value }: { value: number }) => (
+  <RewardTag
+    backgroundColor="bg-orange-500"
+    icon={<HemiPointsIcon className="h-4 w-4" />}
+    label="Points"
+    textColor="text-white"
+    value={value}
+  />
+)
+
+export const SolvXpTag = () => (
+  <RewardTag
+    backgroundColor="bg-purple-900/70"
+    icon={<SolvXpPointsIcon className="h-4 w-4" />}
+    label="Solv XP"
+    textColor="text-white"
+  />
+)
+
+export const PointsTag = () => (
+  <RewardTag
+    backgroundColor="bg-neutral-950"
+    icon={<PointsIcon className="h-4 w-4" />}
+    label="Points"
+    textColor="text-white"
+  />
+)
+
+export const DiamondTag = () => (
+  <RewardTag
+    backgroundColor="bg-neutral-950"
+    icon={<DiamondPointsIcon className="h-4 w-4" />}
+    label="Diamond"
+    style={{
+      background:
+        'linear-gradient(311deg, rgba(63, 176, 255, 0.56) 34.84%, rgba(146, 54, 234, 0.56) 89%, rgba(242, 154, 107, 0.56) 128.42%)',
+    }}
+    textColor="text-white"
+  />
+)