Feat/split and merge (#1185)

* Add split and merge functionality to plasmic and add component logic.

contracts/test/mock/MockERC1155.sol

@@ -1,10 +1,10 @@
 // SPDX-License-Identifier: MIT
 pragma solidity >=0.8.7;
 
-import { ERC1155 } from "solmate/src/tokens/ERC1155.sol";
+import {ERC1155} from "solmate/src/tokens/ERC1155.sol";
 
 // LooksRare unopinionated libraries
-import { IERC2981 } from "@looksrare/contracts-libs/contracts/interfaces/generic/IERC2981.sol";
+import {IERC2981} from "@looksrare/contracts-libs/contracts/interfaces/generic/IERC2981.sol";
 
 contract MockERC1155 is ERC1155 {
     function batchMint(address to, uint256[] memory tokenIds, uint256[] memory amounts) public {

contracts/test/mock/MockERC1155SupportsNoInterface.sol

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 pragma solidity >=0.8.7;
 
-import { MockERC1155 } from "./MockERC1155.sol";
+import {MockERC1155} from "./MockERC1155.sol";
 
 contract MockERC1155SupportsNoInterface is MockERC1155 {
     function supportsInterface(bytes4) public view virtual override returns (bool) {

contracts/test/mock/MockERC1155WithoutAnyBalanceOf.sol

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 pragma solidity >=0.8.7;
 
-import { ERC1155 } from "@openzeppelin/contracts/token/ERC1155/ERC1155.sol";
+import {ERC1155} from "@openzeppelin/contracts/token/ERC1155/ERC1155.sol";
 
 /**
  * @dev This contract has to inherit from OZ instead of Solmate because

contracts/test/mock/MockERC1155WithoutBalanceOfBatch.sol

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 pragma solidity >=0.8.7;
 
-import { MockERC1155 } from "./MockERC1155.sol";
+import {MockERC1155} from "./MockERC1155.sol";
 
 contract MockERC1155WithoutBalanceOfBatch is MockERC1155 {
     function balanceOfBatch(address[] calldata, uint256[] calldata) public pure override returns (uint256[] memory) {

contracts/test/mock/MockERC1155WithoutIsApprovedForAll.sol

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 pragma solidity >=0.8.7;
 
-import { ERC1155 } from "@openzeppelin/contracts/token/ERC1155/ERC1155.sol";
+import {ERC1155} from "@openzeppelin/contracts/token/ERC1155/ERC1155.sol";
 
 /**
  * @dev This contract has to inherit from OZ instead of Solmate because

contracts/test/mock/MockERC20.sol

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 pragma solidity >=0.8.7;
 
-import { ERC20 } from "solmate/src/tokens/ERC20.sol";
+import {ERC20} from "solmate/src/tokens/ERC20.sol";
 
 contract MockERC20 is ERC20("MockERC20", "MockERC20", 18) {
     function mint(address to, uint256 amount) public {

contracts/test/mock/MockERC721.sol

@@ -1,8 +1,8 @@
 // SPDX-License-Identifier: MIT
 pragma solidity >=0.8.7;
 
-import { ERC721 } from "solmate/src/tokens/ERC721.sol";
-import { IERC165 } from "@looksrare/contracts-libs/contracts/interfaces/generic/IERC165.sol";
+import {ERC721} from "solmate/src/tokens/ERC721.sol";
+import {IERC165} from "@looksrare/contracts-libs/contracts/interfaces/generic/IERC165.sol";
 
 contract MockERC721 is ERC721("MockERC721", "MockERC721") {
     function mint(address to, uint256 tokenId) public {

contracts/test/mock/MockERC721SupportsNoInterface.sol

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 pragma solidity >=0.8.7;
 
-import { MockERC721 } from "./MockERC721.sol";
+import {MockERC721} from "./MockERC721.sol";
 
 contract MockERC721SupportsNoInterface is MockERC721 {
     function supportsInterface(bytes4) public view virtual override returns (bool) {

contracts/test/mock/MockERC721WithRoyalties.sol

@@ -1,11 +1,11 @@
 // SPDX-License-Identifier: MIT
 pragma solidity 0.8.17;
 
-import { IERC165, IERC2981 } from "@looksrare/contracts-libs/contracts/interfaces/generic/IERC2981.sol";
-import { MockERC721 } from "./MockERC721.sol";
+import {IERC165, IERC2981} from "@looksrare/contracts-libs/contracts/interfaces/generic/IERC2981.sol";
+import {MockERC721} from "./MockERC721.sol";
 
 // Constants
-import { ONE_HUNDRED_PERCENT_IN_BP } from "@hypercerts/marketplace/constants/NumericConstants.sol";
+import {ONE_HUNDRED_PERCENT_IN_BP} from "@hypercerts/marketplace/constants/NumericConstants.sol";
 
 /**
  * @dev This contract allows adding a royalty basis points higher than 10,000, which
@@ -25,19 +25,19 @@ contract MockERC721WithRoyalties is MockERC721, IERC2981 {
         DEFAULT_ROYALTY_FEE = _royaltyFee;
     }
 
-    function addCustomRoyaltyInformationForTokenId(
-        uint256 tokenId,
-        address royaltyRecipient,
-        uint256 royaltyFee
-    ) external {
+    function addCustomRoyaltyInformationForTokenId(uint256 tokenId, address royaltyRecipient, uint256 royaltyFee)
+        external
+    {
         _royaltyRecipientForTokenId[tokenId] = royaltyRecipient;
         _royaltyFeeForTokenId[tokenId] = royaltyFee;
     }
 
-    function royaltyInfo(
-        uint256 tokenId,
-        uint256 salePrice
-    ) external view override returns (address royaltyRecipient, uint256 royaltyAmount) {
+    function royaltyInfo(uint256 tokenId, uint256 salePrice)
+        external
+        view
+        override
+        returns (address royaltyRecipient, uint256 royaltyAmount)
+    {
         royaltyRecipient = _royaltyRecipientForTokenId[tokenId] == address(0)
             ? DEFAULT_ROYALTY_RECIPIENT
             : _royaltyRecipientForTokenId[tokenId];

contracts/test/mock/MockRoyaltyFeeRegistry.sol

@@ -2,13 +2,13 @@
 pragma solidity 0.8.17;
 
 // LooksRare unopinionated libraries
-import { OwnableTwoSteps } from "@looksrare/contracts-libs/contracts/OwnableTwoSteps.sol";
+import {OwnableTwoSteps} from "@looksrare/contracts-libs/contracts/OwnableTwoSteps.sol";
 
 // Royalty Fee Registry interface
-import { IRoyaltyFeeRegistry } from "@hypercerts/marketplace/interfaces/IRoyaltyFeeRegistry.sol";
+import {IRoyaltyFeeRegistry} from "@hypercerts/marketplace/interfaces/IRoyaltyFeeRegistry.sol";
 
 // Constants
-import { ONE_HUNDRED_PERCENT_IN_BP } from "@hypercerts/marketplace/constants/NumericConstants.sol";
+import {ONE_HUNDRED_PERCENT_IN_BP} from "@hypercerts/marketplace/constants/NumericConstants.sol";
 
 /**
  * @title MockRoyaltyFeeRegistry
@@ -36,7 +36,7 @@ contract MockRoyaltyFeeRegistry is IRoyaltyFeeRegistry, OwnableTwoSteps {
      * @param _royaltyFeeLimit new royalty fee limit (500 = 5%, 1,000 = 10%)
      */
     constructor(address _owner, uint256 _royaltyFeeLimit) OwnableTwoSteps(_owner) {
-        require(_royaltyFeeLimit <= 9_500, "Owner: Royalty fee limit too high");
+        require(_royaltyFeeLimit <= 9500, "Owner: Royalty fee limit too high");
         royaltyFeeLimit = _royaltyFeeLimit;
     }
 
@@ -45,7 +45,7 @@ contract MockRoyaltyFeeRegistry is IRoyaltyFeeRegistry, OwnableTwoSteps {
      * @param _royaltyFeeLimit new royalty fee limit (500 = 5%, 1,000 = 10%)
      */
     function updateRoyaltyFeeLimit(uint256 _royaltyFeeLimit) external onlyOwner {
-        require(_royaltyFeeLimit <= 9_500, "Owner: Royalty fee limit too high");
+        require(_royaltyFeeLimit <= 9500, "Owner: Royalty fee limit too high");
         royaltyFeeLimit = _royaltyFeeLimit;
 
         emit NewRoyaltyFeeLimit(_royaltyFeeLimit);
@@ -58,14 +58,12 @@ contract MockRoyaltyFeeRegistry is IRoyaltyFeeRegistry, OwnableTwoSteps {
      * @param receiver receiver for the royalty fee
      * @param fee fee (500 = 5%, 1,000 = 10%)
      */
-    function updateRoyaltyInfoForCollection(
-        address collection,
-        address setter,
-        address receiver,
-        uint256 fee
-    ) external onlyOwner {
+    function updateRoyaltyInfoForCollection(address collection, address setter, address receiver, uint256 fee)
+        external
+        onlyOwner
+    {
         require(fee <= royaltyFeeLimit, "Registry: Royalty fee too high");
-        _royaltyFeeInfoCollection[collection] = FeeInfo({ setter: setter, receiver: receiver, fee: fee });
+        _royaltyFeeInfoCollection[collection] = FeeInfo({setter: setter, receiver: receiver, fee: fee});
 
         emit RoyaltyFeeUpdate(collection, setter, receiver, fee);
     }

contracts/test/mock/MockSmartWallet.sol

@@ -54,7 +54,7 @@ contract MockSmartWallet {
     }
 
     function execute(address dest, uint256 value, bytes calldata calldata_) public onlyOwner {
-        (bool success, bytes memory result) = dest.call{ value: value }(calldata_);
+        (bool success, bytes memory result) = dest.call{value: value}(calldata_);
 
         if (!success) {
             assembly {

frontend/components/merge-all-claim-fractions-button.tsx

@@ -1,5 +1,16 @@
 import React from "react";
-import { Button } from "@mui/material";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { useMergeFractionUnits } from "../hooks/mergeFractionUnits";
+import { toast } from "react-toastify";
+import { useHypercertClient } from "../hooks/hypercerts-client";
+import { useAccountLowerCase } from "../hooks/account";
 
 interface Props {
   claimId: string;
@@ -14,13 +25,84 @@ export function MergeAllClaimFractionsButton({
   className,
   disabled,
 }: Props) {
+  const [open, setOpen] = React.useState(false);
+  const { write, readOnly, txPending } = useMergeFractionUnits({});
+  const { client, isLoading } = useHypercertClient();
+  const { address } = useAccountLowerCase();
+
   const onClick = async () => {
     console.log("Merging all claim fractions", claimId);
+    setOpen(false);
+    if (readOnly) {
+      toast("Please connect your wallet to merge all claim fractions");
+      return;
+    }
+
+    if (isLoading) {
+      toast("Please wait for the client to be ready");
+      return;
+    }
+
+    if (!client) {
+      toast("Please connect your wallet to merge all claim fractions");
+      return;
+    }
+
+    if (!address) {
+      toast("Please connect your wallet to merge all claim fractions");
+      return;
+    }
+
+    const fractionUnits = await client.indexer.fractionsByClaim(claimId);
+    console.log("Fraction units", fractionUnits);
+
+    const myFractions = fractionUnits.claimTokens.filter(
+      (fraction) => fraction.owner === address,
+    );
+
+    console.log("address", address);
+    console.log("My fractions", myFractions);
+
+    if (!myFractions.length) {
+      toast("No fractions to merge");
+      return;
+    }
+
+    await write(myFractions.map((fraction) => fraction.tokenID));
   };
 
+  const isDisabled = disabled || txPending || readOnly || isLoading;
+
   return (
-    <Button disabled={disabled} className={className} onClick={onClick}>
-      {text}
-    </Button>
+    <>
+      <Button
+        disabled={isDisabled}
+        className={className}
+        onClick={() => setOpen(true)}
+      >
+        {text}
+      </Button>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">
+          {"Merge all your fractions for this hypercert?"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            This action cannot be reversed
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>Disagree</Button>
+          <Button onClick={onClick} autoFocus>
+            Agree
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
   );
 }

frontend/components/split-fraction-button.tsx

@@ -1,4 +1,24 @@
-import { Button } from "@mui/material";
+import { Box, Button, Input, Modal, Typography } from "@mui/material";
+import React, { useState } from "react";
+import { FieldArray, Form, Formik } from "formik";
+import { useFractionById } from "../hooks/fractions";
+import { PlusIcon } from "primereact/icons/plus";
+import { Delete } from "@mui/icons-material";
+import { useSplitFractionUnits } from "../hooks/splitClaimUnits";
+import { toast } from "react-toastify";
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "background.paper",
+  boxShadow: 24,
+  pt: 2,
+  px: 4,
+  pb: 3,
+};
 
 interface Props {
   fractionId: string;
@@ -12,13 +32,157 @@ export function SplitFractionButton({
   className,
   disabled,
 }: Props) {
-  const onClick = async () => {
-    console.log("Splitting fraction", fractionId);
-  };
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const { write, readOnly, txPending } = useSplitFractionUnits({
+    onComplete: () => {
+      toast("Splitting fraction completed");
+      handleClose();
+    },
+  });
+
+  const { data, isLoading } = useFractionById(fractionId);
+
+  console.log(data, isLoading);
+
+  if (isLoading || !data?.claimToken) {
+    return null;
+  }
+
+  const totalValue = parseInt(data.claimToken.units, 10);
+
+  const _disabled = txPending || readOnly || isLoading || disabled;
 
   return (
-    <Button className={className} disabled={disabled} onClick={onClick}>
-      {text}
-    </Button>
+    <>
+      <Button className={className} disabled={disabled} onClick={handleOpen}>
+        {text}
+      </Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={{ ...style, width: 400 }}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Split up your fraction
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2, mb: 2 }}>
+            Make sure the total value of the fractions is equal to the original
+          </Typography>
+          <Formik
+            initialValues={{ units: [totalValue] }}
+            validate={(values) => {
+              if (!values.units.length) {
+                return { units: "Required" };
+              }
+              const totalValueInForm = values.units.reduce(
+                (sum, value) => sum + value,
+                0,
+              );
+
+              if (totalValueInForm !== totalValue) {
+                return {
+                  units: "Total value must be equal to the original value",
+                };
+              }
+            }}
+            onSubmit={async (values) => {
+              const tokenId = data.claimToken?.tokenID;
+              if (!tokenId) {
+                return;
+              }
+              await write(
+                BigInt(tokenId),
+                values.units.map((x) => BigInt(x)),
+              );
+            }}
+          >
+            {({ values, errors, setFieldValue, isValid, isSubmitting }) => {
+              const isDisabled = _disabled || isSubmitting;
+              return (
+                <Form>
+                  <FieldArray
+                    name="units"
+                    render={(arrayHelpers) => (
+                      <div>
+                        {values.units && values.units.length > 0 ? (
+                          values.units.map((unit, index) => (
+                            <div
+                              key={index}
+                              style={{
+                                display: "flex",
+                                marginBottom: "1rem",
+                              }}
+                            >
+                              {/*<Field name={} />*/}
+                              <Input
+                                sx={{ mr: 1 }}
+                                value={unit}
+                                name={`units.${index}`}
+                                disabled={isDisabled}
+                                onChange={(e) =>
+                                  setFieldValue(
+                                    `units.${index}`,
+                                    isNaN(parseInt(e.target.value))
+                                      ? 0
+                                      : parseInt(e.target.value),
+                                  )
+                                }
+                              />
+
+                              <Button
+                                sx={{ mr: 1 }}
+                                variant="contained"
+                                disabled={isDisabled}
+                                startIcon={<Delete />}
+                                onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
+                              >
+                                Delete
+                              </Button>
+
+                              <Button
+                                variant="contained"
+                                disabled={isDisabled}
+                                onClick={() =>
+                                  arrayHelpers.insert(index + 1, 0)
+                                } // remove a friend from the list
+                                startIcon={<PlusIcon />}
+                              >
+                                Add
+                              </Button>
+                            </div>
+                          ))
+                        ) : (
+                          <Button
+                            disabled={isDisabled}
+                            type="button"
+                            onClick={() => arrayHelpers.push("")}
+                          >
+                            Add a fraction
+                          </Button>
+                        )}
+                        {errors.units && (
+                          <div className="error">{errors.units as string}</div>
+                        )}
+
+                        <div>
+                          <Button disabled={!isValid} type="submit">
+                            Submit
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  />
+                </Form>
+              );
+            }}
+          </Formik>
+        </Box>
+      </Modal>
+    </>
   );
 }

frontend/hooks/fractions.ts

@@ -18,11 +18,10 @@ export const useFractionsByClaim = (claimId: string) => {
     client: { indexer },
   } = useHypercertClient();
 
-  return (
-    useQuery(["graph", "fractions", "claim", claimId], () =>
-      indexer.fractionsByClaim(claimId),
-    ),
-    { enabled: !!claimId, refetchInterval: 5000 }
+  return useQuery(
+    ["graph", "fractions", "claim", claimId],
+    () => indexer.fractionsByClaim(claimId),
+    { enabled: !!claimId, refetchInterval: 5000 },
   );
 };
 
@@ -34,6 +33,6 @@ export const useFractionById = (fractionId: string) => {
   return useQuery(
     ["graph", "fractions", fractionId],
     () => indexer.fractionById(fractionId),
-    { enabled: !!fractionId, refetchInterval: 5000 },
+    { enabled: !!fractionId },
   );
 };

frontend/hooks/mergeFractionUnits.ts

@@ -45,7 +45,7 @@ export const useMergeFractionUnits = ({
         console.error(receipt);
       }
       if (receipt?.status === "success") {
-        toast(mintInteractionLabels.toastSuccess, { type: "success" });
+        toast("Fractions successfully merged", { type: "success" });
 
         setStep("complete");
         onComplete?.();
@@ -66,6 +66,7 @@ export const useMergeFractionUnits = ({
       showModal({ stepDescriptions });
       setStep("preparing");
       await initializeWrite(ids);
+      window.location.reload();
     },
     txPending,
     readOnly: isLoading || !client || client.readonly,

frontend/hooks/splitClaimUnits.ts

@@ -15,8 +15,7 @@ export const useSplitFractionUnits = ({
   const { client, isLoading } = useHypercertClient();
 
   const stepDescriptions = {
-    preparing: "Preparing to merge fraction values",
-    merging: "Splitting fraction units on-chain",
+    splitting: "Splitting fraction units on-chain",
     waiting: "Awaiting confirmation",
     complete: "Done splitting",
   };
@@ -26,20 +25,20 @@ export const useSplitFractionUnits = ({
 
   const publicClient = client.config.publicClient;
 
-  const initializeWrite = async (id: bigint, fractions: bigint[]) => {
+  const initializeWrite = async (fractionId: bigint, fractions: bigint[]) => {
+    showModal({ stepDescriptions });
     setStep("splitting");
     try {
       setTxPending(true);
 
-      const hash = await client.splitFractionUnits(id, fractions);
+      const hash = await client.splitFractionUnits(fractionId, fractions);
 
+      setStep("waiting");
       const receipt = await publicClient?.waitForTransactionReceipt({
         confirmations: 3,
         hash: hash,
       });
 
-      setStep("waiting");
-
       if (receipt?.status === "reverted") {
         toast("Splitting failed", {
           type: "error",
@@ -65,9 +64,8 @@ export const useSplitFractionUnits = ({
 
   return {
     write: async (id: bigint, fractions: bigint[]) => {
-      showModal({ stepDescriptions });
-      setStep("preparing");
       await initializeWrite(id, fractions);
+      window.location.reload();
     },
     txPending,
     readOnly: isLoading || !client || client.readonly,

frontend/package.json

@@ -25,7 +25,7 @@
     "@graphprotocol/client-cli": "^2.2.16",
     "@hypercerts-org/contracts": "0.9.0",
     "@hypercerts-org/observabletreemap": "workspace: *",
-    "@hypercerts-org/sdk": "1.0.0-alpha.8",
+    "@hypercerts-org/sdk": "1.0.0-alpha.9",
     "@mui/icons-material": "^5.11.9",
     "@mui/material": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.12",

frontend/plasmic-init.ts

@@ -683,7 +683,7 @@ PLASMIC.registerComponent(MergeAllClaimFractionsButton, {
     disabled: "boolean",
     text: {
       type: "string",
-      defaultValue: "Split",
+      defaultValue: "Merge",
       helpText: "Text to display on button",
     },
   },