glifio · Schwartz10 · Sep 20, 2021 · Sep 3, 2021 · Sep 4, 2021 · Sep 4, 2021
diff --git a/MsigProvider/__mocks__/index.tsx b/MsigProvider/__mocks__/index.tsx
@@ -0,0 +1,72 @@
+import { FilecoinNumber } from '@glif/filecoin-number'
+import { createContext, ReactNode, Dispatch, useContext } from 'react'
+import { SWRConfig } from 'swr'
+import { MsigActorState } from '../../MsigProvider/types'
+
+export const MULTISIG_ACTOR_ADDRESS =
+  'f2m4f2dv7m35skytoqzsyrh5wqz3kxxfflxsha5za'
+export const MULTISIG_SIGNER_ADDRESS =
+  'f1nq5k2mps5umtebdovlyo7y6a3ywc7u4tobtuo3a'
+
+const MsigProviderContextMock = createContext<
+  MsigActorState & {
+    setMsigActor: null | Dispatch<string | null>
+  } & { loading: boolean }
+>({
+  Address: MULTISIG_ACTOR_ADDRESS,
+  ActorCode: 'fil/5/multisig',
+  Balance: new FilecoinNumber('1', 'fil'),
+  AvailableBalance: new FilecoinNumber('1', 'fil'),
+  Signers: [
+    {
+      account: MULTISIG_SIGNER_ADDRESS,
+      id: 't01234'
+    }
+  ],
+  InitialBalance: new FilecoinNumber('1', 'fil'),
+  NextTxnID: 0,
+  NumApprovalsThreshold: 1,
+  StartEpoch: 0,
+  UnlockDuration: 0,
+  errors: {
+    notMsigActor: false,
+    connectedWalletNotMsigSigner: false,
+    actorNotFound: true,
+    unhandledError: ''
+  },
+  loading: false,
+  setMsigActor: null
+})
+
+export const MsigProviderWrapper = ({ children }: { children: ReactNode }) => {
+  return (
+    <SWRConfig value={{ dedupingInterval: 0 }}>
+      <MsigProviderContextMock.Provider
+        value={{
+          Address: 'f2m4f2dv7m35skytoqzsyrh5wqz3kxxfflxsha5za',
+          ActorCode: 'fil/5/multisig',
+          Balance: new FilecoinNumber('1', 'fil'),
+          AvailableBalance: new FilecoinNumber('1', 'fil'),
+          Signers: [],
+          InitialBalance: new FilecoinNumber('1', 'fil'),
+          NextTxnID: 0,
+          NumApprovalsThreshold: 1,
+          StartEpoch: 0,
+          UnlockDuration: 0,
+          errors: {
+            notMsigActor: false,
+            connectedWalletNotMsigSigner: false,
+            actorNotFound: true,
+            unhandledError: ''
+          },
+          loading: false,
+          setMsigActor: () => {}
+        }}
+      >
+        {children}
+      </MsigProviderContextMock.Provider>
+    </SWRConfig>
+  )
+}
+
+export const useMsig = () => useContext(MsigProviderContextMock)
diff --git a/MsigProvider/index.tsx b/MsigProvider/index.tsx
@@ -15,6 +15,11 @@ const MsigProviderContext = createContext<
   setMsigActor: null
 })
 
+export type MsigProviderContextType = MsigActorState & {
+  setMsigActor: null | Dispatch<string | null>
+  loading: boolean
+}
+
 export const MsigProviderWrapper = ({ children }: { children: ReactNode }) => {
   const wallet = useWallet()
   const [msigActor, setMsigActor] = useState(null)

diff --git a/MsigProvider/types.ts b/MsigProvider/types.ts
@@ -7,6 +7,11 @@ export interface MsigActorErrors {
   unhandledError: string
 }
 
+export interface Signer {
+  id: string
+  account: string
+}
+
 export interface MsigActorState {
   Address: string | null
   ActorCode: string
@@ -17,7 +22,7 @@ export interface MsigActorState {
   NumApprovalsThreshold: number
   StartEpoch: number
   UnlockDuration: number
-  Signers: { id: string; account: string }[]
+  Signers: Signer[]
   errors: MsigActorErrors
 }
 

diff --git a/components/Msig/ChangeOwner/index.jsx → components/Msig/AddRmSigners/AddSigner.jsx b/components/Msig/ChangeOwner/index.jsx → components/Msig/AddRmSigners/AddSigner.jsx
@@ -1,61 +1,68 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { BigNumber } from '@glif/filecoin-number'
+import React, { useCallback, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import dayjs from 'dayjs'
 import { Message } from '@glif/filecoin-message'
 import { validateAddressString } from '@glif/filecoin-address'
+import { BigNumber } from '@glif/filecoin-number'
+import { useRouter } from 'next/router'
+import { Box, Button, ButtonClose, Form, Card } from '@glif/react-components'
 
 import { useWalletProvider } from '../../../WalletProvider'
 import useWallet from '../../../WalletProvider/useWallet'
-import {
-  Box,
-  Button,
-  ButtonClose,
-  StepHeader,
-  Input,
-  Form,
-  Card
-} from '../../Shared'
-import {
-  ADDRESS_PROPTYPE,
-  FILECOIN_NUMBER_PROP
-} from '../../../customPropTypes'
-import { CardHeader, ChangeOwnerHeaderText } from '../Shared'
-import Preface from './Preface'
+import { useMsig } from '../../../MsigProvider'
+import { CardHeader, AddRmSignerHeader } from '../Shared'
+import Preface from './Prefaces'
 import { useWasm } from '../../../lib/WasmLoader'
 import ErrorCard from '../../Wallet/Send/ErrorCard'
 import ConfirmationCard from '../../Wallet/Send/ConfirmationCard'
-import { LEDGER, PROPOSE, emptyGasInfo } from '../../../constants'
+import {
+  LEDGER,
+  PROPOSE,
+  emptyGasInfo,
+  MSIG_METHOD,
+  PAGE
+} from '../../../constants'
 import CustomizeFee from '../../Wallet/Send/CustomizeFee'
 import {
   reportLedgerConfigError,
   hasLedgerError
 } from '../../../utils/ledger/reportLedgerConfigError'
 import reportError from '../../../utils/reportError'
 import toLowerCaseMsgFields from '../../../utils/toLowerCaseMsgFields'
+import { navigate } from '../../../utils/urlParams'
 import { confirmMessage } from '../../../store/actions'
+import { AddSignerInput } from './SignerInput'
 
-const ChangeOwner = ({ address, balance, close }) => {
+const AddSigner = () => {
   const { ledger, connectLedger, resetLedgerState } = useWalletProvider()
+  const { Address: address, AvailableBalance: balance } = useMsig()
   const wallet = useWallet()
   const dispatch = useDispatch()
   const { serializeParams } = useWasm()
   const [step, setStep] = useState(1)
   const [attemptingTx, setAttemptingTx] = useState(false)
-  const [toAddress, setToAddress] = useState('')
-  const [toAddressError, setToAddressError] = useState('')
+  const [signerAddress, setSignerAddress] = useState('')
+  const [signerAddressError, setSignerAddressError] = useState('')
   const [uncaughtError, setUncaughtError] = useState('')
   const [fetchingTxDetails, setFetchingTxDetails] = useState(false)
   const [mPoolPushing, setMPoolPushing] = useState(false)
   const [gasError, setGasError] = useState('')
   const [gasInfo, setGasInfo] = useState(emptyGasInfo)
   const [frozen, setFrozen] = useState(false)
+  const router = useRouter()
+
+  const onClose = useCallback(() => {
+    navigate(router, { pageUrl: PAGE.MSIG_ADMIN })
+  }, [router])
+
+  const onComplete = useCallback(() => {
+    navigate(router, { pageUrl: PAGE.MSIG_HISTORY })
+  }, [router])
 
   const constructMsg = (nonce = 0) => {
     const innerParams = {
-      to: toAddress,
-      from: wallet.address
+      signer: signerAddress,
+      increase: false
     }
 
     const serializedInnerParams = Buffer.from(
@@ -66,7 +73,7 @@ const ChangeOwner = ({ address, balance, close }) => {
     const outerParams = {
       to: address,
       value: '0',
-      method: 7,
+      method: MSIG_METHOD.ADD_SIGNER,
       params: serializedInnerParams
     }
 
@@ -79,15 +86,15 @@ const ChangeOwner = ({ address, balance, close }) => {
       to: address,
       from: wallet.address,
       value: '0',
-      method: 2,
+      method: MSIG_METHOD.PROPOSE,
       nonce,
       params: serializedOuterParams,
       gasFeeCap: gasInfo.gasFeeCap.toAttoFil(),
       gasLimit: new BigNumber(gasInfo.gasLimit.toAttoFil()).toNumber(),
       gasPremium: gasInfo.gasPremium.toAttoFil()
     })
 
-    return { message, params: { ...innerParams, params: outerParams } }
+    return { message, params: { ...outerParams, params: { ...innerParams } } }
   }
 
   const sendMsg = async () => {
@@ -127,9 +134,9 @@ const ChangeOwner = ({ address, balance, close }) => {
     e.preventDefault()
     if (step === 1) {
       setStep(2)
-    } else if (step === 2 && !validateAddressString(toAddress)) {
-      setToAddressError('Invalid to address')
-    } else if (step === 2 && validateAddressString(toAddress)) {
+    } else if (step === 2 && !validateAddressString(signerAddress)) {
+      setSignerAddressError('Invalid address')
+    } else if (step === 2 && validateAddressString(signerAddress)) {
       setStep(3)
     } else if (step === 3) {
       setAttemptingTx(true)
@@ -138,7 +145,7 @@ const ChangeOwner = ({ address, balance, close }) => {
         setAttemptingTx(false)
         if (msg) {
           dispatch(confirmMessage(toLowerCaseMsgFields(msg)))
-          close()
+          onComplete()
         }
       } catch (err) {
         if (err.message.includes('19')) {
@@ -200,7 +207,7 @@ const ChangeOwner = ({ address, balance, close }) => {
           setAttemptingTx(false)
           setUncaughtError('')
           resetLedgerState()
-          close()
+          onClose()
         }}
       />
       <Form onSubmit={onSubmit}>
@@ -211,7 +218,6 @@ const ChangeOwner = ({ address, balance, close }) => {
           display='flex'
           flexDirection='column'
           justifyContent='flex-start'
-          flexGrow='1'
         >
           <Box>
             {hasLedgerError({ ...ledger, otherError: uncaughtError }) && (
@@ -250,16 +256,13 @@ const ChangeOwner = ({ address, balance, close }) => {
                   my={2}
                   backgroundColor='blue.muted700'
                 >
-                  <StepHeader
-                    title='Change Ownership'
-                    currentStep={step}
-                    totalSteps={4}
-                    glyphAcronym='Ch'
+                  <AddRmSignerHeader
+                    step={step}
+                    method={MSIG_METHOD.ADD_SIGNER}
                   />
-                  <ChangeOwnerHeaderText step={step} />
                 </Card>
               )}
-            {step === 1 && <Preface />}
+            {step === 1 && <Preface method={MSIG_METHOD.ADD_SIGNER} />}
             <Box boxShadow={2} borderRadius={4}>
               {step > 1 && (
                 <>
@@ -270,45 +273,41 @@ const ChangeOwner = ({ address, balance, close }) => {
                     signerBalance={wallet.balance}
                   />
                   <Box width='100%' p={3} border={0} bg='background.screen'>
-                    <Input.Address
-                      label='New owner'
-                      value={toAddress}
-                      onChange={e => setToAddress(e.target.value)}
-                      error={toAddressError}
-                      disabled={step === 3}
-                      onFocus={() => {
-                        if (toAddressError) setToAddressError('')
-                      }}
+                    <AddSignerInput
+                      signerAddress={signerAddress}
+                      setSignerAddress={setSignerAddress}
+                      signerAddressError={signerAddressError}
+                      setSignerAddressError={setSignerAddressError}
+                      step={step}
                     />
                   </Box>
-                  {step > 2 && (
-                    <Box
-                      display='flex'
-                      flexDirection='row'
-                      justifyContent='space-between'
-                      width='100%'
-                      p={3}
-                      border={0}
-                      bg='background.screen'
-                    >
-                      <CustomizeFee
-                        message={constructMsg().message.toLotusType()}
-                        gasInfo={gasInfo}
-                        setGasInfo={setGasInfo}
-                        setFrozen={setFrozen}
-                        setError={setGasError}
-                        error={gasError}
-                        feeMustBeLessThanThisAmount={wallet.balance}
-                      />
-                    </Box>
-                  )}
                 </>
               )}
+              {step > 2 && (
+                <Box
+                  display='flex'
+                  flexDirection='row'
+                  justifyContent='space-between'
+                  width='100%'
+                  p={3}
+                  border={0}
+                  bg='background.screen'
+                >
+                  <CustomizeFee
+                    message={constructMsg().message.toLotusType()}
+                    gasInfo={gasInfo}
+                    setGasInfo={setGasInfo}
+                    setFrozen={setFrozen}
+                    setError={setGasError}
+                    error={gasError}
+                    feeMustBeLessThanThisAmount={wallet.balance}
+                  />
+                </Box>
+              )}
             </Box>
           </Box>
           <Box
             display='flex'
-            flex='1'
             flexDirection='row'
             justifyContent='space-between'
             alignItems='flex-end'
@@ -317,7 +316,7 @@ const ChangeOwner = ({ address, balance, close }) => {
             width='100%'
             minWidth={11}
             maxHeight={12}
-            my={3}
+            py={4}
           >
             <Button
               title='Back'
@@ -328,7 +327,7 @@ const ChangeOwner = ({ address, balance, close }) => {
                 setGasError('')
                 resetLedgerState()
                 if (step === 1) {
-                  close()
+                  onClose()
                 } else {
                   setStep(step - 1)
                 }
@@ -348,10 +347,4 @@ const ChangeOwner = ({ address, balance, close }) => {
   )
 }
 
-ChangeOwner.propTypes = {
-  address: ADDRESS_PROPTYPE,
-  balance: FILECOIN_NUMBER_PROP,
-  close: PropTypes.func.isRequired
-}
-
-export default ChangeOwner
+export default AddSigner