(Fix) Delete the correct owner during Safe creation (#2084)

* fix owner lookup by index number

* fix tests for `calculateValuesAfterRemoving`

src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx

@@ -4,9 +4,10 @@ import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
 import CheckCircle from '@material-ui/icons/CheckCircle'
 import * as React from 'react'
-import { styles } from './style'
 import styled from 'styled-components'
 
+import { styles } from './style'
+import { padOwnerIndex } from 'src/routes/open/utils/padOwnerIndex'
 import QRIcon from 'src/assets/icons/qrcode.svg'
 import trash from 'src/assets/icons/trash.svg'
 import { ScanQRModal } from 'src/components/ScanQRModal'
@@ -88,7 +89,7 @@ export const calculateValuesAfterRemoving = (index: number, values: Record<strin
         return newValues
       }
 
-      const ownerToRemove = new RegExp(`owner${index}(Name|Address)`)
+      const ownerToRemove = new RegExp(`owner${padOwnerIndex(index)}(Name|Address)`)
 
       if (ownerToRemove.test(key)) {
         // skip, doing anything with the removed field
@@ -101,7 +102,7 @@ export const calculateValuesAfterRemoving = (index: number, values: Record<strin
 
       if (Number(ownerOrder) > index) {
         // reduce by one the order of the owner
-        newValues[`owner${Number(ownerOrder) - 1}${ownerField}`] = values[key]
+        newValues[`owner${padOwnerIndex(Number(ownerOrder) - 1)}${ownerField}`] = values[key]
       } else {
         // previous owners to the deleted row
         newValues[key] = values[key]

src/routes/open/components/SafeOwnersConfirmationsForm/tests/calculateValuesAfterRemoving.test.ts

@@ -5,10 +5,10 @@ describe('calculateValuesAfterRemoving', () => {
     // Given
     const formContent = {
       name: 'My Safe',
-      owner0Name: 'Owner 0',
-      owner0Address: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
-      owner1Name: 'Owner 1',
-      owner1Address: '0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0',
+      owner0000Name: 'Owner 0',
+      owner0000Address: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
+      owner0001Name: 'Owner 1',
+      owner0001Address: '0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0',
     }
 
     // When
@@ -17,8 +17,8 @@ describe('calculateValuesAfterRemoving', () => {
     // Then
     expect(newFormContent).toStrictEqual({
       name: 'My Safe',
-      owner0Name: 'Owner 0',
-      owner0Address: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
+      owner0000Name: 'Owner 0',
+      owner0000Address: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
     })
   })
 
@@ -26,12 +26,12 @@ describe('calculateValuesAfterRemoving', () => {
     // Given
     const formContent = {
       name: 'My Safe',
-      owner0Name: 'Owner 0',
-      owner0Address: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
-      owner1Name: 'Owner 1',
-      owner1Address: '0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0',
-      owner2Name: 'Owner 2',
-      owner2Address: '0x22d491Bde2303f2f43325b2108D26f1eAbA1e32b',
+      owner0000Name: 'Owner 0',
+      owner0000Address: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
+      owner0001Name: 'Owner 1',
+      owner0001Address: '0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0',
+      owner0002Name: 'Owner 2',
+      owner0002Address: '0x22d491Bde2303f2f43325b2108D26f1eAbA1e32b',
     }
 
     // When
@@ -40,10 +40,10 @@ describe('calculateValuesAfterRemoving', () => {
     // Then
     expect(newFormContent).toStrictEqual({
       name: 'My Safe',
-      owner0Name: 'Owner 0',
-      owner0Address: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
-      owner1Name: 'Owner 2',
-      owner1Address: '0x22d491Bde2303f2f43325b2108D26f1eAbA1e32b',
+      owner0000Name: 'Owner 0',
+      owner0000Address: '0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1',
+      owner0001Name: 'Owner 2',
+      owner0001Address: '0x22d491Bde2303f2f43325b2108D26f1eAbA1e32b',
     })
   })
 })

src/routes/open/components/fields.ts

@@ -1,4 +1,5 @@
 import { LoadFormValues } from 'src/routes/load/container/Load'
+import { padOwnerIndex } from 'src/routes/open/utils/padOwnerIndex'
 import { CreateSafeValues } from 'src/routes/open/utils/safeDataExtractor'
 
 export const FIELD_NAME = 'name'
@@ -7,8 +8,8 @@ export const FIELD_OWNERS = 'owners'
 export const FIELD_SAFE_NAME = 'safeName'
 export const FIELD_CREATION_PROXY_SALT = 'safeCreationSalt'
 
-export const getOwnerNameBy = (index: number): string => `owner${index.toString().padStart(4, '0')}Name`
-export const getOwnerAddressBy = (index: number): string => `owner${index.toString().padStart(4, '0')}Address`
+export const getOwnerNameBy = (index: number): string => `owner${padOwnerIndex(index)}Name`
+export const getOwnerAddressBy = (index: number): string => `owner${padOwnerIndex(index)}Address`
 
 export const getNumOwnersFrom = (values: CreateSafeValues | LoadFormValues): number => {
   const accounts = Object.keys(values)

src/routes/open/utils/padOwnerIndex.ts

@@ -0,0 +1,3 @@
+export const padOwnerIndex = (index: number | string): string => {
+  return index.toString().padStart(4, '0')
+}