chore: more documentation

README.md

@@ -11,6 +11,7 @@
 - chore: animate select menu ([5e7b022](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/5e7b022))
 - chore: auto-detect Web3 call type ([15ae304](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/15ae304))
 - chore: begin work on profile details page ([e4283ef](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/e4283ef))
+- chore: card documentation ([4a4bf13](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/4a4bf13))
 - chore: document accordion ([2c0cd55](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/2c0cd55))
 - chore: document account settings popup ([955683b](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/955683b))
 - chore: expand subgraph ([31e87b2](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/31e87b2))

components/card.stories.js

@@ -93,7 +93,7 @@ const metadata = {
     },
     onClick: {
       type: "function",
-      description: "The button's onClick handler.",
+      description: "The card's onClick handler.",
       table: {
         type: {
           summary: "function",

components/checkbox.js

@@ -40,7 +40,11 @@ export default function Checkbox({ value, onChange, disabled, name, ...rest }) {
     config: { mass: 3, tension: 300 },
   });
   return (
-    <Box variant="forms.checkbox" {...rest}>
+    <Box
+      variant="forms.checkbox"
+      onClick={() => onChange({ target: { name, value: !checked } })}
+      {...rest}
+    >
       <Input
         ref={ref}
         sx={{

components/checkbox.stories.js

@@ -0,0 +1,93 @@
+import { useState } from "react";
+
+import Checkbox from "./checkbox";
+
+const metadata = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    value: {
+      type: { name: "boolean|string", required: true },
+      description: "The checkbox's value.",
+      table: {
+        type: {
+          summary: "boolean|string",
+        },
+      },
+      control: {
+        type: "radio",
+        options: [false, true, "mixed"],
+      },
+    },
+    onChange: {
+      type: { name: "function", required: true },
+      description: "The checkbox's onChange handler.",
+      table: {
+        type: {
+          summary: "function",
+        },
+      },
+    },
+    disabled: {
+      type: "boolean",
+      description: "The checkbox's disabled state.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    name: {
+      type: "string",
+      description: "The checkbox's name.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    sx: {
+      type: "object",
+      description: "Theme UI sx prop.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+    },
+    "...rest": {
+      type: "object",
+      description: "The checkbox's additional props.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+      control: null,
+    },
+  },
+};
+export default metadata;
+
+function Template({ value: _value, onChange: _onChange, ...args }) {
+  const [value, setValue] = useState(_value);
+  return (
+    <Checkbox
+      value={value}
+      onChange={(event) => {
+        _onChange(event);
+        setValue(event.target.value);
+      }}
+      {...args}
+    />
+  );
+}
+
+export const Checked = Template.bind();
+Checked.args = { value: true };
+
+export const Unchecked = Template.bind();
+Unchecked.args = { value: false };
+
+export const Mixed = Template.bind();
+Mixed.args = { value: "mixed" };

components/divider.stories.js

@@ -0,0 +1,35 @@
+import Divider from "./divider";
+
+const metadata = {
+  title: "Components/Divider",
+  component: Divider,
+  argTypes: {
+    sx: {
+      type: "object",
+      description: "Theme UI sx prop.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+    },
+    "...rest": {
+      type: "object",
+      description: "The divider's additional props.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+      control: null,
+    },
+  },
+};
+export default metadata;
+
+function Template(args) {
+  return <Divider {...args} />;
+}
+
+export const Default = Template.bind();
+Default.args = { sx: { width: 300 } };

components/evidence.js

@@ -99,7 +99,7 @@ export default function Evidence({
               marginBottom: 2,
               marginTop: -3,
               marginX: -4,
-              maxHeight: 618,
+              maxHeight: 650,
               overflowY: "scroll",
               paddingTop: 3,
               paddingX: 4,

components/evidence.stories.js

@@ -0,0 +1,161 @@
+import ArchonProvider, { createUseDataloaders } from "./archon-provider";
+import Evidence from "./evidence";
+import Web3Provider from "./web3-provider";
+
+import ProofOfHumanity from "subgraph/abis/proof-of-humanity";
+import { address } from "subgraph/config/kovan";
+
+const metadata = {
+  title: "Arbitration/Evidence",
+  component: Evidence,
+  argTypes: {
+    contract: {
+      type: { name: "string", required: true },
+      description: "The arbitrable contract name in the Web3 Provider.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    args: {
+      type: { name: "array", required: true },
+      description: "Arguments to pass to the submitEvidence function.",
+      table: {
+        type: {
+          summary: "array",
+        },
+      },
+    },
+    evidence: {
+      type: { name: "array", required: true },
+      description: "The list of evidence objects.",
+      table: {
+        type: {
+          summary: "array",
+        },
+      },
+    },
+    useEvidenceFile: {
+      type: { name: "function", required: true },
+      description: "Archon provider based evidence `dataloader` hook.",
+      table: {
+        type: {
+          summary: "function",
+        },
+      },
+    },
+  },
+};
+export default metadata;
+
+const contracts = [
+  {
+    name: "proofOfHumanity",
+    abi: ProofOfHumanity,
+    address: { kovan: address },
+  },
+];
+function Template(args) {
+  return (
+    <Web3Provider
+      infuraURL="wss://kovan.infura.io/ws/v3/dd555294ec53482f952f78d2d955c34d"
+      contracts={contracts}
+    >
+      <ArchonProvider>
+        <Evidence {...args} />
+      </ArchonProvider>
+    </Web3Provider>
+  );
+}
+
+const { getEvidenceFile: useEvidenceFile } = createUseDataloaders({
+  async getEvidenceFile(
+    {
+      archon: {
+        utils,
+        arbitrable: { ipfsGateway },
+      },
+    },
+    URI
+  ) {
+    const fetchFile = (_URI) =>
+      utils
+        .validateFileFromURI(ipfsGateway + _URI, {
+          preValidated: true,
+        })
+        .then((res) => res.file);
+    const file = await fetchFile(URI);
+    if (file.fileURI) {
+      const nestedFile = await fetchFile(file.fileURI);
+      file.fileURI = ipfsGateway + file.fileURI;
+      file.file = Object.keys(nestedFile).reduce((acc, key) => {
+        if (acc[key].startsWith("/ipfs/")) acc[key] = ipfsGateway + acc[key];
+        return acc;
+      }, nestedFile);
+    }
+    return file;
+  },
+});
+
+export const NoScroll = Template.bind();
+NoScroll.args = {
+  contract: "proofOfHumanity",
+  args: ["0xDb3ea8CbFd37D558eAcF8d0352bE3701352C1D9B"],
+  evidence: [
+    {
+      creationTime: 1600618084,
+      id: "0x1fccae975b215ef48287818baf62e875dab84510bb17b90390274426e6f3beb4",
+      URI: "/ipfs/QmNc8osXHsxkU3AJceKfDvKG6vgKBAuwKrjAXeF1LjLVpg/evidence.json",
+      sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a",
+    },
+    {
+      creationTime: 1600617960,
+      id: "0x464c831f8e842f33f6e020dcbe32bfe482270ba519a3af47eeaed44f2134ca94",
+      URI: "/ipfs/QmX7CwChSx5hoczvoLyY3EHvsvDpVWqrCkGc8iq9HRwJyC/evidence.json",
+      sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a",
+    },
+    {
+      creationTime: 1599596964,
+      id: "0x07bf8db105cb13b5437fdc28e614cc805a9d69d172edd99f42464960764eae0b",
+      URI:
+        "/ipfs/QmR5nGY21KnsPGx87FhG4czb3ueajWeSFEzpbQkZ9svtYD/registration.json",
+      sender: "0x4b93a94ca58594faf5f64948a26f3e195eb63b6e",
+    },
+  ],
+  useEvidenceFile,
+};
+
+export const Scroll = Template.bind();
+Scroll.args = {
+  contract: "proofOfHumanity",
+  args: ["0xDb3ea8CbFd37D558eAcF8d0352bE3701352C1D9B"],
+  evidence: [
+    {
+      creationTime: 1600618084,
+      id: "0x1fccae975b215ef48287818baf62e875dab84510bb17b90390274426e6f3beb5",
+      URI: "/ipfs/QmNc8osXHsxkU3AJceKfDvKG6vgKBAuwKrjAXeF1LjLVpg/evidence.json",
+      sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a",
+    },
+    {
+      creationTime: 1600618084,
+      id: "0x1fccae975b215ef48287818baf62e875dab84510bb17b90390274426e6f3beb4",
+      URI: "/ipfs/QmNc8osXHsxkU3AJceKfDvKG6vgKBAuwKrjAXeF1LjLVpg/evidence.json",
+      sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a",
+    },
+    {
+      creationTime: 1600617960,
+      id: "0x464c831f8e842f33f6e020dcbe32bfe482270ba519a3af47eeaed44f2134ca94",
+      URI: "/ipfs/QmX7CwChSx5hoczvoLyY3EHvsvDpVWqrCkGc8iq9HRwJyC/evidence.json",
+      sender: "0x6695dc16e6c3e1f0d62f30355d7848a3cb37517a",
+    },
+    {
+      creationTime: 1599596964,
+      id: "0x07bf8db105cb13b5437fdc28e614cc805a9d69d172edd99f42464960764eae0b",
+      URI:
+        "/ipfs/QmR5nGY21KnsPGx87FhG4czb3ueajWeSFEzpbQkZ9svtYD/registration.json",
+      sender: "0x4b93a94ca58594faf5f64948a26f3e195eb63b6e",
+    },
+  ],
+  useEvidenceFile,
+};