feat: APP-183 attach signature to data post + APP-240

tailwind.css

@@ -31,7 +31,7 @@
  --warning-200: 255 231 173;
  --warning-100: 255 243 214;
 
- --error-400: 255 69 38;
+ --error-400: 222 69 38;
  --error-300: 230 115 92;
  --error-200: 242 181 168;
  --error-100: 248 218 212;

web-components/src/components/icons/DragIcon.tsx

@@ -28,7 +28,7 @@ export const DragIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <path
  d="M25 39L26 39L26 39L25 39ZM25 31L26 31L25 31ZM25 23L26 23L25 23ZM22 39C22 38.4477 22.4477 38 23 38L23 36C21.3431 36 20 37.3431 20 39L22 39ZM23 40C22.4477 40 22 39.5523 22 39L20 39C20 40.6569 21.3431 42 23 42L23 40ZM24 39C24 39.5523 23.5523 40 23 40L23 42C24.6569 42 26 40.6569 26 39L24 39ZM23 38C23.5523 38 24 38.4477 24 39L26 39C26 37.3431 24.6569 36 23 36L23 38ZM29 39C29 38.4477 29.4477 38 30 38L30 36C28.3431 36 27 37.3431 27 39L29 39ZM30 40C29.4477 40 29 39.5523 29 39L27 39C27 40.6569 28.3431 42 30 42L30 40ZM31 39C31 39.5523 30.5523 40 30 40L30 42C31.6569 42 33 40.6569 33 39L31 39ZM30 38C30.5523 38 31 38.4477 31 39L33 39C33 37.3431 31.6569 36 30 36L30 38ZM23 28C21.3431 28 20 29.3431 20 31L22 31C22 30.4477 22.4477 30 23 30L23 28ZM26 31C26 29.3431 24.6569 28 23 28L23 30C23.5523 30 24 30.4477 24 31L26 31ZM23 34C24.6569 34 26 32.6569 26 31L24 31C24 31.5523 23.5523 32 23 32L23 34ZM20 31C20 32.6569 21.3431 34 23 34L23 32C22.4477 32 22 31.5523 22 31L20 31ZM29 31C29 30.4477 29.4477 30 30 30L30 28C28.3431 28 27 29.3431 27 31L29 31ZM30 32C29.4477 32 29 31.5523 29 31L27 31C27 32.6569 28.3431 34 30 34L30 32ZM31 31C31 31.5523 30.5523 32 30 32L30 34C31.6569 34 33 32.6569 33 31L31 31ZM30 30C30.5523 30 31 30.4477 31 31L33 31C33 29.3431 31.6569 28 30 28L30 30ZM23 20C21.3431 20 20 21.3431 20 23L22 23C22 22.4477 22.4477 22 23 22L23 20ZM26 23C26 21.3431 24.6569 20 23 20L23 22C23.5523 22 24 22.4477 24 23L26 23ZM23 26C24.6569 26 26 24.6569 26 23L24 23C24 23.5523 23.5523 24 23 24L23 26ZM20 23C20 24.6569 21.3431 26 23 26L23 24C22.4477 24 22 23.5523 22 23L20 23ZM29 23C29 22.4477 29.4477 22 30 22L30 20C28.3431 20 27 21.3431 27 23L29 23ZM30 24C29.4477 24 29 23.5523 29 23L27 23C27 24.6569 28.3431 26 30 26L30 24ZM31 23C31 23.5523 30.5523 24 30 24L30 26C31.6569 26 33 24.6569 33 23L31 23ZM30 22C30.5523 22 31 22.4477 31 23L33 23C33 21.3431 31.6569 20 30 20L30 22Z"
  fill="black"
- fill-opacity="0.2"
+ fillOpacity="0.2"
  mask="url(#path-1-outside-1_4480_31992)"
  />
  </g>

web-components/src/components/icons/GreenPinIcon.tsx

@@ -8,7 +8,7 @@ export const GreenPinIcon = (props: React.SVGProps<SVGSVGElement>) => (
  rx="9.99124"
  ry="3.57954"
  fill="#D2D5D9"
- fill-opacity="0.3"
+ fillOpacity="0.3"
  />
  <path
  d="M36.2263 17.9297C36.2263 32.3673 20.7011 43.3452 18.5003 44.8289C18.3383 44.9381 18.1458 44.9381 17.9838 44.8289C15.783 43.3452 0.257812 32.3674 0.257812 17.9297C0.257812 8.02739 8.30962 0 18.242 0C28.1744 0 36.2263 8.02739 36.2263 17.9297Z"

web-components/src/components/icons/PrivateFile.tsx

@@ -18,7 +18,7 @@ export const PrivateFile = (props: React.SVGProps<SVGSVGElement>) => (
  </g>
  <defs>
  <clipPath id="clip0_2339_7111">
- <rect width="24" height="24" fill="white" fill-opacity="0" />
+ <rect width="24" height="24" fill="white" fillOpacity="0" />
  </clipPath>
  </defs>
  </svg>

web-components/src/components/icons/TrashIcon.tsx

@@ -4,14 +4,14 @@ function TrashIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
  return (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
  <path
- fill-rule="evenodd"
- clip-rule="evenodd"
+ fillRule="evenodd"
+ clipRule="evenodd"
  d="M13 3L10 3C10 2.44772 10.4477 2 11 2H12C12.5523 2 13 2.44772 13 3ZM8 3H3.25C3.11193 3 3 3.11193 3 3.25V4.75C3 4.88807 3.11193 5 3.25 5L14.75 5L19.75 5C19.8881 5 20 4.88807 20 4.75V3.25C20 3.11193 19.8881 3 19.75 3H15C15 1.34315 13.6569 0 12 0H11C9.34315 0 8 1.34315 8 3ZM6 21V8H17V21C17 21.5523 16.5523 22 16 22H7C6.44772 22 6 21.5523 6 21ZM4 6.25C4 6.11193 4.11193 6 4.25 6H18.75C18.8881 6 19 6.11193 19 6.25V21C19 22.6569 17.6569 24 16 24H7C5.34315 24 4 22.6569 4 21V6.25ZM8.25 10C8.11193 10 8 10.1119 8 10.25V19.75C8 19.8881 8.11193 20 8.25 20H8.75C8.88807 20 9 19.8881 9 19.75V10.25C9 10.1119 8.88807 10 8.75 10H8.25ZM12 19.75V10.25C12 10.1119 11.8881 10 11.75 10H11.25C11.1119 10 11 10.1119 11 10.25V19.75C11 19.8881 11.1119 20 11.25 20H11.75C11.8881 20 12 19.8881 12 19.75ZM14 19.75V10.25C14 10.1119 14.1119 10 14.25 10H14.75C14.8881 10 15 10.1119 15 10.25V19.75C15 19.8881 14.8881 20 14.75 20H14.25C14.1119 20 14 19.8881 14 19.75Z"
  fill="currentColor"
  />
  <path
- fill-rule="evenodd"
- clip-rule="evenodd"
+ fillRule="evenodd"
+ clipRule="evenodd"
  d="M8 3H3.25C3.11193 3 3 3.11193 3 3.25V4.75C3 4.88807 3.11193 5 3.25 5L19.75 5C19.8881 5 20 4.88807 20 4.75V3.25C20 3.11193 19.8881 3 19.75 3H15C15 1.34315 13.6569 0 12 0H11C9.34315 0 8 1.34315 8 3ZM13 3L10 3C10 2.44772 10.4477 2 11 2H12C12.5523 2 13 2.44772 13 3Z"
  fill="currentColor"
  />
@@ -28,8 +28,8 @@ function TrashIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
  fill="currentColor"
  />
  <path
- fill-rule="evenodd"
- clip-rule="evenodd"
+ fillRule="evenodd"
+ clipRule="evenodd"
  d="M4 6.25C4 6.11193 4.11193 6 4.25 6H18.75C18.8881 6 19 6.11193 19 6.25V21C19 22.6569 17.6569 24 16 24H7C5.34315 24 4 22.6569 4 21V6.25ZM6 21V8H17V21C17 21.5523 16.5523 22 16 22H7C6.44772 22 6 21.5523 6 21Z"
  fill="currentColor"
  />

web-components/src/components/inputs/new/ReorderFields/ReorderFields.tsx

@@ -51,11 +51,10 @@ export const ReorderFields = <T extends { id: string }>({
  >
  {fields.map((field, index) => {
  const isLast = index === fields.length - 1;
-
  const fieldElement = getFieldElement(field, index);
 
  return isLast ? (
- fieldElement
+ <div key={field.id}>{fieldElement}</div>
  ) : (
  <Reorder.Item className="relative" key={field.id} value={field}>
  {fieldElement}

web-components/src/components/modal/TxModal.CardItemValue.tsx

@@ -1,5 +1,4 @@
-import { Box } from '@mui/material';
-
+import { TextButton } from '../buttons/TextButton';
 import { CollapseList } from '../organisms/CollapseList/CollapseList';
 import { Subtitle } from '../typography';
 import { ItemValue, LinkComponentProp } from './TxModal';
@@ -16,32 +15,43 @@ export const CardItemValue = ({
  linkComponent: LinkComponent,
 }: CardItemValueProps): JSX.Element => {
  return (
- <Subtitle
- key={value.name}
- size="lg"
- mobileSize="sm"
- color={color || 'info.dark'}
- sx={{
- display: 'flex',
- alignItems: 'flex-end',
- }}
- >
- {value.icon && value.icon}
- {value.url ? (
- <LinkComponent
- sx={{
- color: 'secondary.main',
- }}
- href={value.url}
- target={value.url.startsWith('/') ? '_self' : '_blank'}
+ <div className="flex items-baseline">
+ {value.label && (
+ <TextButton
+ textSize="sm"
+ className="font-extrabold text-grey-400 hover:text-grey-400 pr-3"
  >
- {value.name}
- </LinkComponent>
- ) : (
- <>{value.name}</>
+ {value.label}:
+ </TextButton>
  )}
- {value.children && value.children}
- </Subtitle>
+ <Subtitle
+ className={value.className}
+ key={value.name}
+ size={value.size || 'lg'}
+ mobileSize={value.mobileSize || 'sm'}
+ color={color || 'info.dark'}
+ sx={{
+ display: 'flex',
+ alignItems: 'flex-end',
+ }}
+ >
+ {value.icon && value.icon}
+ {value.url ? (
+ <LinkComponent
+ sx={{
+ color: 'secondary.main',
+ }}
+ href={value.url}
+ target={value.url.startsWith('/') ? '_self' : '_blank'}
+ >
+ {value.name}
+ </LinkComponent>
+ ) : (
+ <>{value.name}</>
+ )}
+ {value.children && value.children}
+ </Subtitle>
+ </div>
  );
 };
 

web-components/src/components/modal/TxModal.tsx

@@ -13,6 +13,7 @@ import Modal, { RegenModalProps } from '../modal';
 import ShareSection from '../share-section';
 import { SocialItems } from '../share-section/ShareSection.types';
 import { Body, Label, Title } from '../typography';
+import { TextSize } from '../typography/sizing';
 import { CardItemValue, CardItemValueList } from './TxModal.CardItemValue';
 
 const useStyles = makeStyles()(theme => ({
@@ -30,10 +31,14 @@ const useStyles = makeStyles()(theme => ({
 }));
 
 export interface ItemValue {
- name: string | number;
+ label?: string;
+ name?: string | number;
  url?: string;
  icon?: ReactNode;
  children?: ReactNode;
+ size?: TextSize;
+ mobileSize?: TextSize;
+ className?: string;
 }
 
 export interface Item {
@@ -165,7 +170,7 @@ const TxModal: React.FC<React.PropsWithChildren<TxModalProps>> = ({
  ))}
  {txHash && (
  <CardItem
- label="hash"
+ label="blockchain record"
  value={{ name: truncate(txHash), url: txHashUrl }}
  linkComponent={linkComponent}
  />

web-marketplace/package.json

@@ -24,7 +24,7 @@
  "@mui/material": "^5.10.10",
  "@mui/styles": "^5.10.10",
  "@rdfjs/parser-jsonld": "^2.1.0",
- "@regen-network/api": "0.6.0",
+ "@regen-network/api": "0.7.1",
  "@sentry/react": "^7.53.0",
  "@sentry/tracing": "^7.53.0",
  "@stripe/react-stripe-js": "^2.7.3",

web-marketplace/src/components/organisms/ConnectWalletFlow/hooks/useConnectWalletToAccount.tsx

@@ -102,7 +102,7 @@ export const useConnectWalletToAccount = ({
  setAddressUsedWithEmailModalOpen(true);
  break;
  default:
- throw Error(response.error);
+ throw new Error(response.error);
  }
  }
  }

web-marketplace/src/components/organisms/ConnectWalletFlow/hooks/useMergeAccounts.tsx

@@ -62,7 +62,7 @@ export const useMergeAccounts = ({
  });
 
  if (response.error) {
- throw Error(response.error);
+ throw new Error(response.error);
  }
  }
  } catch (e) {

web-marketplace/src/components/organisms/PostFlow/PostFlow.SignModal.schema.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const signModalSchema = z.object({
+ verified: z.boolean().refine(value => !!value),
+});
+
+export type SignModalSchemaType = z.infer<typeof signModalSchema>;

web-marketplace/src/components/organisms/PostFlow/PostFlow.SignModal.tsx

@@ -0,0 +1,113 @@
+import { useFormState, useWatch } from 'react-hook-form';
+import { Trans } from '@lingui/macro';
+import { ContentHash_Graph } from '@regen-network/api/lib/generated/regen/data/v1/types';
+import { useQuery } from '@tanstack/react-query';
+
+import ContainedButton from 'web-components/src/components/buttons/ContainedButton';
+import { TextButton } from 'web-components/src/components/buttons/TextButton';
+import Card from 'web-components/src/components/cards/Card';
+import CheckboxLabel from 'web-components/src/components/inputs/new/CheckboxLabel/CheckboxLabel';
+import Modal, { RegenModalProps } from 'web-components/src/components/modal';
+import {
+ Body,
+ Subtitle,
+ Title,
+} from 'web-components/src/components/typography';
+
+import { useLedger } from 'ledger';
+import { convertIRIToHashQuery } from 'lib/queries/react-query/data/convertIRIToHashQuery/convertIRIToHashQuery';
+
+import Form from 'components/molecules/Form/Form';
+import { useZodForm } from 'components/molecules/Form/hook/useZodForm';
+
+import { signModalSchema } from './PostFlow.SignModal.schema';
+
+type SignModalProps = {
+ iri?: string;
+ handleSign: (contentHash: ContentHash_Graph) => Promise<void>;
+} & RegenModalProps;
+
+export const SignModal = ({
+ iri,
+ onClose,
+ open,
+ handleSign,
+}: SignModalProps) => {
+ const form = useZodForm({
+ schema: signModalSchema,
+ defaultValues: {
+ verified: false,
+ },
+ mode: 'onBlur',
+ });
+ const { isValid } = useFormState({
+ control: form.control,
+ });
+ const verified = useWatch({
+ control: form.control,
+ name: 'verified',
+ });
+ const { dataClient } = useLedger();
+ const { data } = useQuery(
+ convertIRIToHashQuery({
+ client: dataClient,
+ request: { iri },
+ enabled: !!dataClient && !!iri,
+ }),
+ );
+
+ return (
+ <Modal onClose={onClose} open={open}>
+ <Form
+ form={form}
+ onSubmit={() =>
+ data?.contentHash?.graph && handleSign(data?.contentHash?.graph)
+ }
+ >
+ <Title variant="h4" align="center">
+ <Trans>Attach a signature</Trans>
+ </Title>
+ <Card className="p-50 mt-50 mb-30">
+ <Body
+ size="lg"
+ className="font-bold text-grey-700 after:font-normal after:content-['(optional)'] after:text-grey-400 after:ml-[4px] after:text-sm sm:after:text-base"
+ >
+ <Trans>Sign this post</Trans>
+ </Body>
+ <Body size="sm" className="pt-3 pb-10">
+ <Trans>
+ This is comparable to signing a legal document and implies you
+ believe the contents are accurate.
+ </Trans>
+ </Body>
+ <CheckboxLabel
+ checked={verified}
+ label={
+ <Subtitle className="text-grey-500">
+ <Trans>
+ I verify this data is accurate to the best of my knowledge
+ </Trans>
+ </Subtitle>
+ }
+ {...form.register('verified')}
+ />
+ </Card>
+ <div className="flex gap-40 justify-end">
+ <TextButton
+ textSize="sm"
+ className="text-grey-400 hover:text-grey-300"
+ onClick={onClose}
+ >
+ <Trans>skip this step</Trans>
+ </TextButton>
+ <ContainedButton
+ type="submit"
+ disabled={!isValid || !data?.contentHash?.graph}
+ >
+ <Trans>sign</Trans>
+ </ContainedButton>
+ </div>
+ </Form>
+ </Modal>
+ );
+};

web-marketplace/src/components/organisms/PostFlow/PostFlow.constants.ts

@@ -1,3 +1,5 @@
+import { msg } from '@lingui/macro';
+
 export const basePostContent = {
  '@type': 'ProjectPost',
  '@context': {
@@ -39,8 +41,10 @@ export const basePostContent = {
  },
 };
 
-export const POST_CREATED = 'Congrats! You successfully created this post.';
-export const VIEW_ALL_POSTS = 'view all posts';
-export const FILE_NAMES = 'file name(s)';
+export const POST_CREATED = msg`Congrats! You successfully created this post.`;
+export const VIEW_POST = msg`view post`;
+export const FILE_NAMES = msg`file name(s)`;
 export const PROJECT = 'project';
-export const HASH = 'hash';
+export const BLOCKCHAIN_RECORD = msg`blockchain record`;
+export const POST_CREATED_SIGNING_FAILED = msg`You successfully created this post but signing failed.`;
+export const CREATE_DATA_POST = msg`Create Data Post`;