SecureSECO · Hidde-Heijnen · Jun 13, 2023 · Jun 11, 2023 · Jun 11, 2023 · Jun 11, 2023
diff --git a/.storybook/main.cjs b/.storybook/main.cjs
@@ -4,24 +4,19 @@
 
 const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-styling',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-styling', '@storybook/addon-mdx-gfm'],
   framework: {
     name: '@storybook/react-vite',
-    options: {},
+    options: {}
   },
   features: {
-    storyStoreV7: true,
+    storyStoreV7: true
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: 'tag'
   },
   core: {
-    disableTelemetry: true,
-  },
+    disableTelemetry: true
+  }
 };
-module.exports = config;
+module.exports = config;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,13 +17,14 @@
   },
   "dependencies": {
     "@aragon/sdk-client": "^1.4.0",
-    "@plopmenz/diamond-governance-sdk": "^0.2.0",
+    "@plopmenz/diamond-governance-sdk": "^0.2.1",
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-collapsible": "^1.0.2",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-label": "^2.0.1",
+    "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-progress": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.1.2",
     "@radix-ui/react-select": "^1.2.1",
@@ -66,15 +67,16 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-essentials": "^7.0.20",
+    "@storybook/addon-interactions": "^7.0.20",
+    "@storybook/addon-links": "^7.0.20",
+    "@storybook/addon-mdx-gfm": "^7.0.20",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-styling": "^1.0.8",
-    "@storybook/blocks": "^7.0.18",
+    "@storybook/addon-styling": "^1.3.0",
+    "@storybook/blocks": "^7.0.20",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-vite": "^7.0.18",
+    "@storybook/react": "^7.0.20",
+    "@storybook/react-vite": "^7.0.20",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
     "@types/dompurify": "^3.0.2",
@@ -97,7 +99,7 @@
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.2.8",
     "prop-types": "^15.8.1",
-    "storybook": "^7.0.18",
+    "storybook": "^7.0.20",
     "tailwindcss": "^3.3.2",
     "tailwindcss-animate": "^1.0.5",
     "ts-jest": "^29.1.0",

diff --git a/src/components/icons/DAI.stories.tsx b/src/components/icons/DAI.stories.tsx
@@ -0,0 +1,17 @@
+import DAI from '@/src/components/icons/DAI';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: DAI,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof DAI>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    className: 'w-5 h-5',
+  },
+};
diff --git a/src/components/icons/DAI.tsx b/src/components/icons/DAI.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+const SVGComponent = (props: React.BaseHTMLAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    xmlSpace="preserve"
+    width="100%"
+    height="100%"
+    shapeRendering="geometricPrecision"
+    textRendering="geometricPrecision"
+    imageRendering="optimizeQuality"
+    fillRule="evenodd"
+    clipRule="evenodd"
+    viewBox="0 0 444.44 444.44"
+    {...props}
+  >
+    <g id="Layer_x0020_1">
+      <metadata id="CorelCorpID_0Corel-Layer" />
+      <path
+        fill="#F5AC37"
+        fillRule="nonzero"
+        d="M222.22 0c122.74,0 222.22,99.5 222.22,222.22 0,122.74 -99.48,222.22 -222.22,222.22 -122.72,0 -222.22,-99.49 -222.22,-222.22 0,-122.72 99.5,-222.22 222.22,-222.22z"
+      />
+      <path
+        fill="#FEFEFD"
+        fillRule="nonzero"
+        d="M230.41 237.91l84.44 0c1.8,0 2.65,0 2.78,-2.36 0.69,-8.59 0.69,-17.23 0,-25.83 0,-1.67 -0.83,-2.36 -2.64,-2.36l-168.05 0c-2.08,0 -2.64,0.69 -2.64,2.64l0 24.72c0,3.19 0,3.19 3.33,3.19l82.78 0zm77.79 -59.44c0.24,-0.63 0.24,-1.32 0,-1.94 -1.41,-3.07 -3.08,-6 -5.02,-8.75 -2.92,-4.7 -6.36,-9.03 -10.28,-12.92 -1.85,-2.35 -3.99,-4.46 -6.39,-6.25 -12.02,-10.23 -26.31,-17.47 -41.67,-21.11 -7.75,-1.74 -15.67,-2.57 -23.61,-2.5l-74.58 0c-2.08,0 -2.36,0.83 -2.36,2.64l0 49.3c0,2.08 0,2.64 2.64,2.64l160.27 0c0,0 1.39,-0.28 1.67,-1.11l-0.68 0zm0 88.33c-2.36,-0.26 -4.74,-0.26 -7.1,0l-154.02 0c-2.08,0 -2.78,0 -2.78,2.78l0 48.2c0,2.22 0,2.78 2.78,2.78l71.11 0c3.4,0.26 6.8,0.02 10.13,-0.69 10.32,-0.74 20.47,-2.98 30.15,-6.67 3.52,-1.22 6.92,-2.81 10.13,-4.72l0.97 0c16.67,-8.67 30.21,-22.29 38.75,-39.01 0,0 0.97,-2.1 -0.12,-2.65zm-191.81 78.75l0 -0.83 0 -32.36 0 -10.97 0 -32.64c0,-1.81 0,-2.08 -2.22,-2.08l-30.14 0c-1.67,0 -2.36,0 -2.36,-2.22l0 -26.39 32.22 0c1.8,0 2.5,0 2.5,-2.36l0 -26.11c0,-1.67 0,-2.08 -2.22,-2.08l-30.14 0c-1.67,0 -2.36,0 -2.36,-2.22l0 -24.44c0,-1.53 0,-1.94 2.22,-1.94l29.86 0c2.08,0 2.64,0 2.64,-2.64l0 -74.86c0,-2.22 0,-2.78 2.78,-2.78l104.16 0c7.56,0.3 15.07,1.13 22.5,2.5 15.31,2.83 30.02,8.3 43.47,16.11 8.92,5.25 17.13,11.59 24.44,18.89 5.5,5.71 10.46,11.89 14.86,18.47 4.37,6.67 8,13.8 10.85,21.25 0.35,1.94 2.21,3.25 4.15,2.92l24.86 0c3.19,0 3.19,0 3.33,3.06l0 22.78c0,2.22 -0.83,2.78 -3.06,2.78l-19.17 0c-1.94,0 -2.5,0 -2.36,2.5 0.76,8.46 0.76,16.95 0,25.41 0,2.36 0,2.64 2.65,2.64l21.93 0c0.97,1.25 0,2.5 0,3.76 0.14,1.61 0.14,3.24 0,4.85l0 16.81c0,2.36 -0.69,3.06 -2.78,3.06l-26.25 0c-1.83,-0.35 -3.61,0.82 -4.03,2.64 -6.25,16.25 -16.25,30.82 -29.17,42.5 -4.72,4.25 -9.68,8.25 -14.86,11.94 -5.56,3.2 -10.97,6.53 -16.67,9.17 -10.49,4.72 -21.49,8.2 -32.78,10.41 -10.72,1.92 -21.59,2.79 -32.5,2.64l-96.39 0 0 -0.14z"
+      />
+    </g>
+  </svg>
+);
+export default SVGComponent;
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -15,7 +15,7 @@ const Layout = ({ children }: { children?: ReactNode }) => {
   return (
     <div className="flex min-h-full w-full justify-center bg-background pb-20 text-foreground">
       <div className="w-full max-w-7xl px-2 sm:px-4 md:px-10 lg:px-6">
-        <div className="mb-10 flex w-full items-center justify-center">
+        <div className="mb-4 flex w-full items-center justify-center">
           <Navbar />
         </div>
 

diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
@@ -342,7 +342,7 @@ const NavItemCollectionPage = ({
           location.pathname == page.url
             ? 'bg-primary text-primary-foreground'
             : 'bg-popover-foreground/5 group-hover:bg-popover group-hover:text-primary',
-          'mt-1 flex h-11 w-11 flex-none items-center justify-center rounded-lg transition-colors duration-200'
+          'flex h-11 w-11 flex-none items-center justify-center rounded-lg transition-colors duration-200'
         )}
       >
         <page.icon className="h-6 w-6" aria-hidden="true" />

diff --git a/src/components/ui/ConditionalButton.tsx b/src/components/ui/ConditionalButton.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { Button, ButtonProps } from '@/src/components/ui/Button';
 import { TOKENS } from '@/src/lib/constants/tokens';
+import { cn } from '@/src/lib/utils';
 import { useWeb3Modal } from '@web3modal/react';
 import { HiOutlineExclamationCircle } from 'react-icons/hi2';
 
@@ -19,16 +20,17 @@ export type ConditionalWarning = {
 
 export interface ConditionalButtonProps extends ButtonProps {
   conditions: ConditionalWarning[];
+  flex?: 'flex-row' | 'flex-col' | 'flex-row-reverse' | 'flex-col-reverse';
 }
 
 export const ConditionalButton = React.forwardRef<
   HTMLButtonElement,
   ConditionalButtonProps
->(({ conditions, disabled, ...props }, ref) => {
+>(({ conditions, disabled, flex = 'flex-row', ...props }, ref) => {
   const condition = conditions.find((x) => x.when);
   const someConditional = condition !== undefined;
   return (
-    <div className="flex flex-row items-center gap-x-2">
+    <div className={cn('flex  items-center gap-x-2', flex)}>
       <Button ref={ref} disabled={disabled || someConditional} {...props} />
       {someConditional && condition.content}
     </div>
@@ -84,3 +86,7 @@ export const ConnectWalletWarning = ({ action }: WarningWithActionProps) => {
 export const InsufficientRepWarning = ({ action }: WarningWithActionProps) => (
   <Warning> {`Insufficient ${TOKENS.rep.symbol} ${action}`} </Warning>
 );
+
+export const InsufficientGasWarning = () => (
+  <Warning> {'Insufficient gas'} </Warning>
+);
diff --git a/src/components/ui/ErrorWrapper.tsx b/src/components/ui/ErrorWrapper.tsx
@@ -10,6 +10,23 @@ import React from 'react';
 import { cn } from '@/src/lib/utils';
 import { FieldError } from 'react-hook-form';
 
+export const ErrorText = ({ error, name }: ErrorWrapperProps) =>
+  error ? (
+    <span className="text-destructive first-letter:capitalize">
+      {error?.type == 'required'
+        ? `${name} is required`
+        : error?.type == 'minLength'
+        ? `${name} is too short`
+        : error?.type == 'maxLength'
+        ? `${name} is too long`
+        : error?.type == 'pattern'
+        ? error?.message ?? `${name} is invalid`
+        : error?.message ?? `${name} is invalid`}
+    </span>
+  ) : (
+    <></>
+  );
+
 /**
  * ErrorWrapperProps interface represents the props for the ErrorWrapper component.
  * @property {FieldError | undefined} error - An optional error object from 'react-hook-form' to manage input validation.
@@ -36,19 +53,7 @@ export const ErrorWrapper = React.forwardRef<HTMLDivElement, ErrorWrapperProps>(
         ref={ref}
       >
         {children}
-        {error && (
-          <span className="text-destructive first-letter:capitalize">
-            {error?.type == 'required'
-              ? `${name} is required`
-              : error?.type == 'minLength'
-              ? `${name} is too short`
-              : error?.type == 'maxLength'
-              ? `${name} is too long`
-              : error?.type == 'pattern'
-              ? error?.message ?? `${name} is invalid`
-              : error?.message ?? `${name} is invalid`}
-          </span>
-        )}
+        <ErrorText name={name} error={error} />
       </div>
     );
   }

diff --git a/src/components/ui/Popover.stories.tsx b/src/components/ui/Popover.stories.tsx
@@ -0,0 +1,97 @@
+/**
+ * This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course.
+ * © Copyright Utrecht University (Department of Information and Computing Sciences)
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import necessary components
+import { Button } from '@/src/components/ui/Button';
+import { Input } from '@/src/components/ui/Input';
+import { Label } from '@/src/components/ui/Label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/src/components/ui/Popover';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HiCog6Tooth } from 'react-icons/hi2';
+
+// Meta data for the story
+const meta: Meta<typeof Popover> = {
+  title: 'UI/Popover', // Where it will be located in the storybook hierarchy
+  component: Popover,
+};
+
+export default meta;
+
+type PopoverStory = StoryObj<typeof Popover>;
+
+// The contents of the popover, separated out for clarity
+const PopoverContents = () => (
+  <div className="grid gap-4">
+    <div className="space-y-2">
+      <h4 className="font-medium leading-none">Dimensions</h4>
+      <p className="text-sm text-muted-foreground">
+        Set the dimensions for the layer.
+      </p>
+    </div>
+    <div className="grid gap-4">
+      <div className="space-y-2">
+        <h4 className="font-medium leading-none">Dimensions</h4>
+        <p className="text-sm text-muted-foreground">
+          Set the dimensions for the layer.
+        </p>
+      </div>
+      <div className="grid gap-2">
+        <div className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="width">Width</Label>
+          <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+        </div>
+        <div className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="maxWidth">Max. width</Label>
+          <Input
+            id="maxWidth"
+            defaultValue="300px"
+            className="col-span-2 h-8"
+          />
+        </div>
+        <div className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="height">Height</Label>
+          <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
+        </div>
+        <div className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="maxHeight">Max. height</Label>
+          <Input
+            id="maxHeight"
+            defaultValue="none"
+            className="col-span-2 h-8"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+// The story definition
+export const PopoverExample: PopoverStory = {
+  args: {
+    children: (
+      <>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className="w-10 rounded-full p-0"
+            type="button"
+          >
+            <span className="sr-only">Swap settings</span>
+            <HiCog6Tooth className="h-5 w-5 shrink-0" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80">
+          <PopoverContents />
+        </PopoverContent>
+      </>
+    ),
+  },
+};
diff --git a/src/components/ui/Popover.tsx b/src/components/ui/Popover.tsx
@@ -0,0 +1,35 @@
+/**
+ * This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course.
+ * © Copyright Utrecht University (Department of Information and Computing Sciences)
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as React from 'react';
+import { cn } from '@/src/lib/utils';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/src/components/ui/TokenAmount.tsx b/src/components/ui/TokenAmount.tsx
@@ -17,6 +17,7 @@ interface TokenAmountProps extends React.HTMLAttributes<HTMLSpanElement> {
   symbol?: string;
   sign?: string;
   displayDecimals?: number;
+  showSmallAmounts?: boolean;
 }
 
 /**
@@ -37,6 +38,7 @@ const TokenAmount = ({
   displayDecimals,
   symbol = '',
   sign = '',
+  showSmallAmounts,
   ...props
 }: TokenAmountProps) => {
   return (
@@ -47,6 +49,7 @@ const TokenAmount = ({
         tokenDecimals,
         displayDecimals,
         valueAsFloat: amountFloat,
+        showSmallAmounts,
       })}
       &nbsp;
       {symbol}

diff --git a/src/components/verification/OneTimeRewardCard.stories.tsx b/src/components/verification/OneTimeRewardCard.stories.tsx
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    reward: BigNumber.from('0x4563918244F40000'),
+    reward: [BigNumber.from('0x4563918244F40000'), BigNumber.from(5).pow(18)],
     claimReward() {
       return Promise.resolve({} as any);
     },