Merge pull request #299 from trilitech/add-sender-to-delegation-type

Add sender to the Delegation type

.eslintrc

@@ -19,7 +19,8 @@
     "curly": ["error", "all"],
     "jest/no-focused-tests": "warn",
     "jest/no-identical-title": "warn",
-    "jest/valid-expect": "warn"
+    "jest/valid-expect": "warn",
+    "@typescript-eslint/await-thenable": "error"
   },
   "overrides": [
     {

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.test.tsx

@@ -18,7 +18,7 @@ describe("<ActionButton/>", () => {
         pendingApprovals={0}
         openSignModal={_ => {}}
         operation={pendingOps[0]}
-        account={mockMultisigAccount(0)}
+        sender={mockMultisigAccount(0)}
       />
     );
     expect(screen.getByTestId("multisig-signer-button")).toHaveTextContent("Execute");
@@ -32,7 +32,7 @@ describe("<ActionButton/>", () => {
         pendingApprovals={1}
         openSignModal={_ => {}}
         operation={pendingOps[0]}
-        account={mockMultisigAccount(0)}
+        sender={mockMultisigAccount(0)}
       />
     );
     expect(screen.getByTestId("multisig-signer-button")).toHaveTextContent("Approve");
@@ -47,7 +47,7 @@ describe("<ActionButton/>", () => {
         pendingApprovals={1}
         openSignModal={_ => {}}
         operation={operation}
-        account={mockMultisigAccount(0)}
+        sender={mockMultisigAccount(0)}
       />
     );
     expect(screen.getByTestId("multisig-signer-approved")).toHaveTextContent("Approved");
@@ -61,7 +61,7 @@ describe("<ActionButton/>", () => {
         pendingApprovals={1}
         openSignModal={_ => {}}
         operation={operation}
-        account={mockMultisigAccount(0)}
+        sender={mockMultisigAccount(0)}
       />
     );
     expect(screen.getByTestId("multisig-signer-approved-or-waiting")).toHaveTextContent("Approved");
@@ -74,7 +74,7 @@ describe("<ActionButton/>", () => {
         pendingApprovals={1}
         openSignModal={_ => {}}
         operation={pendingOps[0]}
-        account={mockMultisigAccount(0)}
+        sender={mockMultisigAccount(0)}
       />
     );
     expect(screen.getByTestId("multisig-signer-approved-or-waiting")).toHaveTextContent(

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.tsx

@@ -16,15 +16,9 @@ export const MultisigActionButton: React.FC<{
   signerAddress: ImplicitAddress;
   pendingApprovals: number;
   operation: MultisigOperation;
-  account: MultisigAccount;
+  sender: MultisigAccount;
   openSignModal: (params: ParamsWithFee) => void;
-}> = ({
-  signerAddress,
-  account: { address: multisigAddress },
-  operation,
-  pendingApprovals,
-  openSignModal,
-}) => {
+}> = ({ signerAddress, sender, operation, pendingApprovals, openSignModal }) => {
   const getImplicitAccount = useGetImplicitAccount();
   const network = useSelectedNetwork();
   const signer = getImplicitAccount(signerAddress.pkh);
@@ -64,7 +58,7 @@ export const MultisigActionButton: React.FC<{
     const { suggestedFeeMutez } = await estimateMultisigApproveOrExecute(
       {
         type: actionType,
-        contract: multisigAddress,
+        contract: sender.address,
         operationId: operation.id,
       },
       signer,
@@ -73,7 +67,7 @@ export const MultisigActionButton: React.FC<{
     openSignModal({
       type: actionType,
       operation: operation,
-      multisigAddress,
+      sender,
       signer,
       suggestedFeeMutez,
     });

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigDecodedOperationItem.test.tsx

@@ -16,7 +16,9 @@ beforeEach(() => {
 describe("<MultisigDecodedOperationItem/>", () => {
   it("displays delegate", () => {
     render(
-      <MultisigDecodedOperationItem operation={{ type: "delegation", recipient: undefined }} />
+      <MultisigDecodedOperationItem
+        operation={{ type: "delegation", sender: mockImplicitAddress(0), recipient: undefined }}
+      />
     );
 
     expect(screen.getByTestId("decoded-item-delegate")).toHaveTextContent("Undelegate");

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigDecodedOperations.tsx

@@ -10,13 +10,15 @@ import {
 } from "@chakra-ui/react";
 import { parseRawMichelson } from "../../../../multisig/decode/decodeLambda";
 import { UnrecognizedMichelsonError } from "../../../../multisig/decode/UnrecognizedMichelsonError";
+import { MultisigAccount } from "../../../../types/Account";
 import MultisigDecodedOperationItem from "./MultisigDecodedOperationItem";
 
 const MultisigDecodedOperations: React.FC<{
   rawActions: string;
-}> = ({ rawActions }) => {
+  sender: MultisigAccount;
+}> = ({ rawActions, sender }) => {
   try {
-    const operations = parseRawMichelson(rawActions);
+    const operations = parseRawMichelson(rawActions, sender);
     return (
       <Box>
         {operations.map((operation, i) => (

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigPendingAccordionItem.test.tsx

@@ -33,7 +33,7 @@ describe("<MultisigPendingCard/>", () => {
     render(
       <Accordion>
         <MultisigPendingAccordionItem
-          account={account}
+          sender={account}
           operation={{
             id: "1",
             bigmapId: 0,
@@ -51,7 +51,7 @@ describe("<MultisigPendingCard/>", () => {
     render(
       <Accordion>
         <MultisigPendingAccordionItem
-          account={mockMultisigAccount(0)}
+          sender={mockMultisigAccount(0)}
           operation={{
             id: "1",
             bigmapId: 0,
@@ -85,7 +85,7 @@ describe("<MultisigPendingCard/>", () => {
 
     render(
       <Accordion>
-        <MultisigPendingAccordionItem account={multisig} operation={executablePendingOp} />
+        <MultisigPendingAccordionItem sender={multisig} operation={executablePendingOp} />
       </Accordion>
     );
     const firstPendingOp = screen.getByTestId("multisig-pending-operation-" + pendingOps[0].id);
@@ -145,7 +145,7 @@ describe("<MultisigPendingCard/>", () => {
     const approvablePendingOp: MultisigOperation = { ...pendingOps[0], approvals: [] };
     render(
       <Accordion>
-        <MultisigPendingAccordionItem account={account} operation={approvablePendingOp} />
+        <MultisigPendingAccordionItem sender={account} operation={approvablePendingOp} />
       </Accordion>
     );
     const firstPendingOp = screen.getByTestId("multisig-pending-operation-" + pendingOps[0].id);

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigPendingAccordionItem.tsx

@@ -19,11 +19,11 @@ import colors from "../../../../style/colors";
 
 export const MultisigPendingAccordionItem: React.FC<{
   operation: MultisigOperation;
-  account: MultisigAccount;
-}> = ({ operation, account }) => {
+  sender: MultisigAccount;
+}> = ({ operation, sender }) => {
   const { modalElement, onOpen } = useModal(ApproveExecuteForm);
 
-  const { signers, threshold } = account;
+  const { signers, threshold } = sender;
   const pendingApprovals = Math.max(threshold - operation.approvals.length, 0);
   return (
     <Box
@@ -45,7 +45,7 @@ export const MultisigPendingAccordionItem: React.FC<{
         </h2>
         <AccordionPanel>
           <Flex marginY={2} justifyContent="space-between" alignItems="end">
-            <MultisigDecodedOperations rawActions={operation.rawActions} />
+            <MultisigDecodedOperations rawActions={operation.rawActions} sender={sender} />
             <Flex alignItems="center" mb="6">
               <Heading color={colors.gray[400]} size="sm" mr={1}>
                 Pending Approvals:
@@ -63,7 +63,7 @@ export const MultisigPendingAccordionItem: React.FC<{
                 signerAddress={signer}
                 pendingApprovals={pendingApprovals}
                 openSignModal={onOpen}
-                account={account}
+                sender={sender}
                 operation={operation}
               />
             ))}

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.test.tsx

@@ -20,7 +20,7 @@ describe("<MultisigSignerTile/>", () => {
         signerAddress={signer.address}
         pendingApprovals={0}
         operation={pendingOps[0]}
-        account={mockMultisigAccount(0)}
+        sender={mockMultisigAccount(0)}
         openSignModal={_ => {}}
       />
     );
@@ -33,7 +33,7 @@ describe("<MultisigSignerTile/>", () => {
         signerAddress={signer.address}
         pendingApprovals={1}
         operation={{ ...pendingOps[0], approvals: [signer.address] }}
-        account={mockMultisigAccount(0)}
+        sender={mockMultisigAccount(0)}
         openSignModal={_ => {}}
       />
     );
@@ -47,7 +47,7 @@ describe("<MultisigSignerTile/>", () => {
         signerAddress={mockImplicitAccount(1).address}
         pendingApprovals={1}
         operation={pendingOps[0]}
-        account={account}
+        sender={account}
         openSignModal={_ => {}}
       />
     );

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx

@@ -15,7 +15,7 @@ const MultisigSignerTile: React.FC<{
   signerAddress: ImplicitAddress;
   pendingApprovals: number;
   operation: MultisigOperation;
-  account: MultisigAccount;
+  sender: MultisigAccount;
   openSignModal: (params: ParamsWithFee) => void;
 }> = props => {
   const signer = props.signerAddress;

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/index.tsx

@@ -18,11 +18,7 @@ export const MultisigPendingAccordion: React.FC<{
     <Box w="100%">
       <Accordion allowMultiple={true} defaultIndex={range(pendingOperations.length)}>
         {pendingOperations.map(operation => (
-          <MultisigPendingAccordionItem
-            key={operation.id}
-            operation={operation}
-            account={account}
-          />
+          <MultisigPendingAccordionItem key={operation.id} operation={operation} sender={account} />
         ))}
       </Accordion>
     </Box>

src/components/ApproveExecuteForm/ApproveExecuteForm.tsx

@@ -15,12 +15,11 @@ const ApproveExecuteForm: React.FC<{ params: ParamsWithFee }> = ({ params }) =>
   if (history.currentStep.type === "submit") {
     return (
       <SubmitApproveOrExecuteForm
-        params={params}
+        {...params}
         network={network}
         onSuccess={hash => {
           history.goToStep({ type: "success", hash });
         }}
-        signerAccount={params.signer}
       />
     );
   }

src/components/ApproveExecuteForm/SubmitApproveExecute.tsx

@@ -12,7 +12,6 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import SignButton from "../sendForm/components/SignButton";
-import { ImplicitAccount } from "../../types/Account";
 import { ParamsWithFee } from "./types";
 import { prettyTezAmount } from "../../utils/format";
 import MultisigDecodedOperations from "../AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigDecodedOperations";
@@ -22,11 +21,9 @@ import { ApproveOrExecute } from "../../utils/tezos/types";
 import { TezosNetwork } from "../../types/TezosNetwork";
 import { TezosToolkit } from "@taquito/taquito";
 
-type Props = {
-  signerAccount: ImplicitAccount;
+type Props = ParamsWithFee & {
   onSuccess: (hash: string) => void;
   network: TezosNetwork;
-  params: ParamsWithFee;
 };
 
 const TITLE: Record<ApproveOrExecute, string> = {
@@ -37,18 +34,21 @@ const TITLE: Record<ApproveOrExecute, string> = {
 export const SubmitApproveOrExecuteForm: React.FC<Props> = ({
   network,
   onSuccess,
-  signerAccount,
-  params,
+  signer,
+  sender,
+  suggestedFeeMutez,
+  operation,
+  type: actionType,
 }) => {
   const toast = useToast();
 
   const approveOrExecute = async (tezosToolkit: TezosToolkit) => {
     try {
       const result = await approveOrExecuteMultisigOperation(
         {
-          contract: params.multisigAddress,
-          operationId: params.operation.id,
-          type: params.type,
+          contract: sender.address,
+          operationId: operation.id,
+          type: actionType,
         },
         tezosToolkit
       );
@@ -62,30 +62,30 @@ export const SubmitApproveOrExecuteForm: React.FC<Props> = ({
   return (
     <ModalContent bg="umami.gray.900">
       <ModalCloseButton />
-      <ModalHeader textAlign="center">{TITLE[params.type]}</ModalHeader>
+      <ModalHeader textAlign="center">{TITLE[actionType]}</ModalHeader>
       <ModalBody>
         <Text mt={2} color="text.dark" textAlign="center">
-          {TITLE[params.type]}
+          {TITLE[actionType]}
         </Text>
 
         <Flex my={4}>
           <Heading size="md" width={20}>
             Signer:
           </Heading>
-          <AccountSmallTile pkh={signerAccount.address.pkh} />
+          <AccountSmallTile pkh={signer.address.pkh} />
         </Flex>
-        <MultisigDecodedOperations rawActions={params.operation.rawActions} />
+        <MultisigDecodedOperations rawActions={operation.rawActions} sender={sender} />
 
         <Flex aria-label="fee" alignItems="center" justifyContent="space-between">
           <Heading size="sm" color="text.dark">
             Fee
           </Heading>
-          <Text size="sm">{prettyTezAmount(String(params.suggestedFeeMutez))}</Text>
+          <Text size="sm">{prettyTezAmount(String(suggestedFeeMutez))}</Text>
         </Flex>
       </ModalBody>
 
       <ModalFooter justifyContent="center">
-        <SignButton network={network} onSubmit={approveOrExecute} signerAccount={signerAccount} />
+        <SignButton network={network} onSubmit={approveOrExecute} signer={signer} />
       </ModalFooter>
     </ModalContent>
   );

src/components/ApproveExecuteForm/types.tsx

@@ -1,13 +1,12 @@
 import { ApproveOrExecute } from "../../utils/tezos/types";
 import { MultisigOperation } from "../../utils/multisig/types";
-import { ContractAddress } from "../../types/Address";
-import { ImplicitAccount } from "../../types/Account";
+import { ImplicitAccount, MultisigAccount } from "../../types/Account";
 
 export type ParamsWithFee = ApproveExecuteParams & { suggestedFeeMutez: number };
 
 export type ApproveExecuteParams = {
   type: ApproveOrExecute;
   operation: MultisigOperation;
   signer: ImplicitAccount;
-  multisigAddress: ContractAddress;
+  sender: MultisigAccount;
 };

src/components/CSVFileUploader/CSVFileUploadForm.tsx

@@ -16,7 +16,7 @@ import {
 import Papa, { ParseResult } from "papaparse";
 import { FormProvider, useForm } from "react-hook-form";
 import { ImplicitAccount } from "../../types/Account";
-import { RawOperation } from "../../types/RawOperation";
+import { Operation } from "../../types/Operation";
 import { useGetImplicitAccount } from "../../utils/hooks/accountHooks";
 import {
   useBatchIsSimulating,
@@ -58,7 +58,7 @@ const CSVFileUploadForm = ({ onClose }: { onClose: () => void }) => {
       throw new Error("Error loading csv file.");
     }
 
-    const operations: RawOperation[] = [];
+    const operations: Operation[] = [];
     for (let i = 0; i < rows.data.length; i++) {
       const row = rows.data[i];
       try {