Merge pull request #647 from PolymathNetwork/develop

VRTM

Author: FahdW

packages/new-polymath-ui/src/components/CardFeatureState/CardFeatureState.tsx

@@ -8,23 +8,27 @@ export interface CardFeatureStateProps {
   status: 'inactive' | 'idle' | 'warning';
   IconAsset: React.ComponentType<React.SVGAttributes<SVGElement>>;
   children: React.ReactNode;
+  style: Object,
+  maxWidth: Number,
 }
 
 export const CardFeatureState = ({
   status,
   IconAsset,
   children,
+  style,
+  maxWidth,
 }: CardFeatureStateProps) => {
   return (
     <sc.Wrapper
       status={status}
       rounded
       textAlign="center"
-      maxWidth={355}
+      maxWidth={maxWidth}
       ml="auto"
       p={0}
     >
-      <Box p={4}>
+      <Box style={style} p={4}>
         <Icon Asset={IconAsset} width={64} height={64} color={status} />
         {children}
       </Box>
@@ -34,4 +38,6 @@ export const CardFeatureState = ({
 
 CardFeatureState.defaultProps = {
   status: 'idle',
+  maxWidth: 355,
+  style: {},
 };

packages/new-polymath-ui/src/images/icons/24h.svg

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export const Svg24H = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width="1em" height="1em" viewBox="0 0 64 64" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M32 5.333c14.667 0 26.667 12 26.667 26.667 0 14.667-12 26.667-26.667 26.667-14.667 0-26.667-12-26.667-26.667 0-14.667 12-26.667 26.667-26.667zM32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M23.923 26.428v2.286h4.615V31h-4.615v6.857h6.923v-2.286H26.23v-2.285h4.616v-6.858h-6.923zM38.923 31v-4.572h-2.307V31h-1.154v-4.572h-2.308v6.858H36.616v4.571h2.307v-4.571h2.308V31h-2.308z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M45.75 26.199l-2.114.915a12.378 12.378 0 011.056 5.029c0 6.931-5.694 12.571-12.692 12.571s-12.692-5.64-12.692-12.571c0-6.932 5.694-12.572 12.692-12.572v2.286l5.77-3.428L32 15v2.286c-8.27 0-15 6.665-15 14.857S23.73 47 32 47c8.272 0 15-6.665 15-14.857a14.6 14.6 0 00-1.25-5.944z"
+      fill="currentColor"
+    />
+  </svg>
+);

packages/new-polymath-ui/src/images/icons/calendar-outline.svg

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export const SvgCalendarOutline = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width="1em" height="1em" viewBox="0 0 64 64" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19 19.555V48h27V19.555H19zm3.375 24.89V26.665h20.25v17.778h-20.25z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M25.85 23.573h-3.374v-7.032h3.375v7.032zm16.876 0H39.35v-7.032h3.375v7.032zM35.943 39.883v-1.521h-2.187v-8.406h-1.85l-2.848 1.678.675 1.366 2.281-1.351v6.713h-2.443v1.521h6.372z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M32 5.333c14.667 0 26.667 12 26.667 26.667 0 14.667-12 26.667-26.667 26.667-14.667 0-26.667-12-26.667-26.667 0-14.667 12-26.667 26.667-26.667zM32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z"
+      fill="currentColor"
+    />
+  </svg>
+);

packages/new-polymath-ui/src/images/icons/generated/24H.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export const SvgRestriction = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width="1em" height="1em" viewBox="0 0 64 64" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M32 5.333c14.667 0 26.667 12 26.667 26.667 0 14.667-12 26.667-26.667 26.667-14.667 0-26.667-12-26.667-26.667 0-14.667 12-26.667 26.667-26.667zM32 0C14.4 0 0 14.4 0 32s14.4 32 32 32 32-14.4 32-32S49.6 0 32 0z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M28.667 26.333c0-.736.597-1.333 1.333-1.333h4c.736 0 1.333.597 1.333 1.333v1.334H34v-1a.333.333 0 00-.333-.334h-3.334a.333.333 0 00-.333.334v1h-1.333v-1.334zm-4.667 12h16v-10H24v10z"
+      fill="currentColor"
+    />
+    <path
+      fill="currentColor"
+      d="M16 16h6v6h-6zM16 42h6v6h-6zM42 16h6v6h-6zM42 42h6v6h-6zM18 22h2v18h-2zM44 24h2v18h-2zM24 18h18v2H24zM22 44h19v2H22z"
+    />
+  </svg>
+);

packages/new-polymath-ui/src/images/icons/generated/CalendarOutline.tsx

@@ -28,3 +28,6 @@ export * from './generated/PlusPlain';
 export * from './generated/Token';
 export * from './generated/Warning';
 export * from './generated/Wallet';
+export * from './generated/24H';
+export * from './generated/CalendarOutline';
+export * from './generated/Restriction';

packages/new-polymath-ui/src/images/icons/generated/Restriction.tsx

@@ -24,6 +24,9 @@ import { SvgDelete } from './images/icons/generated/Delete';
 import { SvgGusd } from './images/icons/generated/gusd';
 import { SvgUsdc } from './images/icons/generated/usdc';
 import { SvgUsdt } from './images/icons/generated/usdt';
+import { Svg24H } from './images/icons/generated/24H';
+import { SvgCalendarOutline } from './images/icons/generated/CalendarOutline';
+import { SvgRestriction } from './images/icons/generated/Restriction';
 import { SvgPax } from './images/icons/generated/pax';
 
 export { Field, FastField };
@@ -119,6 +122,9 @@ export const icons = {
   SvgUsdc,
   SvgUsdt,
   SvgPax,
+  SvgCalendarOutline,
+  Svg24H,
+  SvgRestriction,
 };
 
 export { validator } from './validator';

packages/new-polymath-ui/src/images/icons/index.ts

@@ -0,0 +1,3 @@
+ETH Address,24h Start Date,24h End Date,24h Restriction Type,24h Allowed Tokens,Custom Start Date,Custom End Date,Custom Restriction Type,Custom Allowed Tokens,Rolling Period In Days
+0x1B2D2797A56c9eBa12aa821D643aB0dBa66C3772,1/1/2022,6/4/2024,0,1000,1/1/2022,6/4/2024,0,120,20
+0xd9f346Bf88cA2cb7e11B0106018DE80A0169764D,,,,,1/1/2022,6/4/2024,0,1000,10