Synthetixio · 0xjocke · Sep 2, 2022 · Sep 2, 2022 · Sep 2, 2022 · Sep 2, 2022
diff --git a/content/theme.ts b/content/theme.ts
@@ -1,5 +1,6 @@
 import { ChakraTheme, ComponentMultiStyleConfig, ComponentStyleConfig } from '@chakra-ui/react';
 import { theme as chakraTheme } from '@synthetixio/v3-theme';
+import merge from 'lodash/merge';
 
 const Progress: ComponentMultiStyleConfig = {
   parts: ['filledTrack', 'track'],
@@ -48,6 +49,32 @@ const Button: ComponentStyleConfig = {
         bgGradient: chakraTheme.gradients['green-cyan']['700'],
       },
     },
+    error: {
+      bg: 'error',
+    },
+    warning: {
+      bg: 'warning',
+    },
+
+    success: {
+      bg: 'success',
+    },
+    disabled: {
+      bg: 'gray.900',
+      color: 'gray.600',
+      opacity: 0.5,
+      _disabled: {
+        opacity: 0.5,
+      },
+      _hover: {
+        bg: 'gray.900',
+        opacity: 0.5,
+        _disabled: {
+          bg: 'gray.900',
+          opacity: 0.5,
+        },
+      },
+    },
   },
 };
 
@@ -110,21 +137,16 @@ const Menu: ComponentMultiStyleConfig = {
   },
 };
 
-export const stakingTheme: Partial<ChakraTheme> = {
-  ...chakraTheme,
+export const stakingTheme: Partial<ChakraTheme> = merge(chakraTheme, {
   colors: {
     ...chakraTheme.colors,
     error: chakraTheme.colors.red['400'],
     success: chakraTheme.colors.green['500'],
     warning: chakraTheme.colors.orange['500'],
   },
   components: {
-    ...chakraTheme.components,
     Progress,
-    Button: {
-      ...chakraTheme.components.Button,
-      ...Button,
-    },
+    Button,
     Menu,
     Text,
   },
@@ -165,4 +187,4 @@ export const stakingTheme: Partial<ChakraTheme> = {
       },
     },
   },
-};
+});
diff --git a/v2-components/icons/CollectIcon/CollectIcon.tsx b/v2-components/icons/CollectIcon/CollectIcon.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { IconProps, Icon } from '@chakra-ui/react';
+
+interface CollectIconProps extends IconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+export const CollectIcon = ({
+  width = 32,
+  height = 32,
+  color = '#2ED9FF',
+  ...props
+}: CollectIconProps) => (
+  <Icon
+    width={`${width}px`}
+    height={`${height}px`}
+    fill="none"
+    viewBox={`0 0 ${width} ${height}`}
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 3.313c-7.007 0-12.688 5.68-12.688 12.688 0 7.007 5.68 12.687 12.688 12.687 7.007 0 12.688-5.68 12.688-12.688 0-7.007-5.68-12.687-12.688-12.687ZM.687 16.001C.688 7.543 7.543.687 16 .687S31.313 7.544 31.313 16c0 8.457-6.856 15.313-15.313 15.313S.687 24.457.687 16Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.418 13.225c.01-.49.15-.689.244-.784.124-.125.364-.26.808-.33.926-.148 2.178.067 3.212.339l1.269.334.668-2.538-1.269-.335c-1.09-.287-2.793-.631-4.292-.393-.768.122-1.608.417-2.26 1.075-.68.685-1.006 1.612-1.006 2.69v.05l.004.05c.095 1.247.837 2.076 1.607 2.622.706.5 1.58.863 2.287 1.158l.08.032c.798.333 1.39.59 1.801.89.362.265.398.425.398.566 0 .549-.162.766-.288.88-.17.154-.487.303-1.029.37-1.104.138-2.538-.132-3.594-.415l-1.268-.34-.679 2.536 1.268.34c1.116.298 2.963.688 4.598.484.827-.103 1.742-.374 2.465-1.027.764-.692 1.152-1.665 1.152-2.828 0-1.268-.71-2.125-1.472-2.684-.694-.508-1.575-.875-2.284-1.17l-.059-.025c-.797-.332-1.413-.594-1.859-.91-.378-.268-.478-.463-.502-.637Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 20.594c.725 0 1.313.588 1.313 1.313v3.281h-2.625v-3.281c0-.725.587-1.313 1.312-1.313Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.313 6.813v3.281a1.312 1.312 0 1 1-2.625 0V6.813h2.624Z"
+      fill={color}
+    />
+  </Icon>
+);
diff --git a/v2-components/icons/MaintainIcon/MaintainIcon.tsx b/v2-components/icons/MaintainIcon/MaintainIcon.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { IconProps, Icon } from '@chakra-ui/react';
+
+interface MaintainIconProps extends IconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+export const MaintainIcon = ({
+  width = 28,
+  height = 36,
+  color = '#FF9A54',
+
+  ...props
+}: MaintainIconProps) => (
+  <Icon
+    width={`${width}px`}
+    height={`${height}px`}
+    fill="none"
+    viewBox={`0 0 ${width} ${height}`}
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m14.903 15.297-.904-.856-.902.857a16.31 16.31 0 0 0-5.044 10.734l-.003.044v.044c0 1.816.612 3.357 1.735 4.442 1.115 1.076 2.62 1.595 4.215 1.595 1.58 0 3.087-.492 4.21-1.548 1.138-1.069 1.758-2.598 1.758-4.42v-.04l-.003-.042a16.31 16.31 0 0 0-5.062-10.81Zm-4.228 10.865a13.685 13.685 0 0 1 3.326-8.018 13.686 13.686 0 0 1 3.342 8.086c-.01 1.183-.401 1.97-.93 2.466-.547.515-1.367.836-2.413.836-1.03 0-1.843-.33-2.391-.859-.533-.514-.925-1.323-.934-2.51Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m14 .759-5.454 8.18L4.86 5.255l-.797 1.685c-.57 1.207-3.28 7.966-3.37 14.514-.044 3.281.566 6.704 2.639 9.327C5.45 33.459 8.9 35.062 14 35.062c5.101 0 8.552-1.61 10.67-4.296 2.071-2.629 2.681-6.06 2.636-9.345-.088-6.557-2.796-13.317-3.378-14.5l-.81-1.646-3.664 3.665L14 .759Zm0 4.732 5.046 7.57 3.237-3.238c.924 2.51 2.338 7.165 2.399 11.633.04 3.006-.534 5.73-2.074 7.685-1.495 1.896-4.085 3.296-8.608 3.296-4.525 0-7.115-1.395-8.609-3.285-1.539-1.947-2.113-4.663-2.073-7.663.061-4.465 1.478-9.126 2.406-11.659l3.23 3.23L14 5.491Z"
+      fill={color}
+    />
+  </Icon>
+);
diff --git a/v2-components/icons/StakeIcon/StakeIcon.tsx b/v2-components/icons/StakeIcon/StakeIcon.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { IconProps, Icon } from '@chakra-ui/react';
+
+interface StakeIconProps extends IconProps {
+  width?: number;
+  height?: number;
+  fromColor?: string;
+  toColor?: string;
+}
+export const StakeIcon = ({
+  width = 32,
+  height = 32,
+  fromColor = '#34EDB3',
+  toColor = '#00D1FF',
+  ...props
+}: StakeIconProps) => (
+  <Icon
+    width={`${width}px`}
+    height={`${height}px`}
+    fill="none"
+    viewBox={`0 0 ${width} ${height}`}
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.793.688a2.256 2.256 0 0 0-2.256 2.256v4.744H2.49A2.256 2.256 0 0 0 .235 9.944v5.113a2.256 2.256 0 0 0 2.256 2.256h3.612v4.377a2.256 2.256 0 0 0-2.17 2.254v5.113a2.256 2.256 0 0 0 2.256 2.256h21.15a2.256 2.256 0 0 0 2.257-2.256v-4.746a2.256 2.256 0 0 0 2.17-2.254v-5.113a2.256 2.256 0 0 0-2.256-2.256h-3.613v-4.375h3.047a2.256 2.256 0 0 0 2.255-2.256V2.944A2.256 2.256 0 0 0 28.943.688H7.794Zm.369 7V3.313h20.412v4.375H8.162ZM2.86 10.313v4.375h20.413v-4.375H2.86Zm5.868 11.375v-4.375H29.14v4.375H8.728Zm-2.17 7v-4.375H26.97v4.375H6.558Z"
+      fill="url(#a)"
+    />
+    <defs>
+      <linearGradient
+        id="a"
+        x1={1.095}
+        y1={31.313}
+        x2={37.686}
+        y2={20.225}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor={fromColor} />
+        <stop offset={1} stopColor={toColor} />
+      </linearGradient>
+    </defs>
+  </Icon>
+);
diff --git a/v2-components/main-action-card/MainActionCard.stories.tsx b/v2-components/main-action-card/MainActionCard.stories.tsx
@@ -0,0 +1,21 @@
+import { MainActionCard } from './MainActionCard';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+  title: 'MainActionCard',
+  component: MainActionCard,
+} as ComponentMeta<typeof MainActionCard>;
+
+const Template: ComponentStory<typeof MainActionCard> = (props) => <MainActionCard {...props} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  targetCratioPercentage: 400,
+  liquidationCratioPercentage: 150,
+  currentCRatioPercentage: 440,
+  epoch: '07:14:55',
+  isFlagged: false,
+  isStaking: true,
+  hasClaimed: false,
+};