Remove React Fragments

src/components/Header/component/CircleDot.jsx

@@ -77,7 +77,7 @@ const KeyRing = ({
   const img = isWarning ? triangle : key
 
   return (
-    <React.Fragment>
+    <>
       <Block className={classes.root}>
         <Block className={classes.key} style={keyStyle}>
           <Img
@@ -90,7 +90,7 @@ const KeyRing = ({
         </Block>
         {!hideDot && <Dot className={classes.dot} style={dotStyle} />}
       </Block>
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/open/components/ReviewInformation/index.jsx

@@ -80,7 +80,7 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
   const numOwners = getNumOwnersFrom(values)
 
   return (
-    <React.Fragment>
+    <>
       <Row className={classes.root}>
         <Col xs={4} layout="column">
           <Block className={classes.details}>
@@ -151,18 +151,18 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
           wallet. Make sure you have ETH in this wallet to fund this transaction.
         </Paragraph>
       </Row>
-    </React.Fragment>
+    </>
   )
 }
 
 const ReviewPage = withStyles(styles)(ReviewComponent)
 
 const Review = ({ network }: LayoutProps) => (controls: React.Node, { values }: Object) => (
-  <React.Fragment>
+  <>
     <OpenPaper controls={controls} padding={false}>
       <ReviewPage network={network} values={values} />
     </OpenPaper>
-  </React.Fragment>
+  </>
 )
 
 export default Review

src/routes/open/components/SafeNameForm/index.jsx

@@ -33,7 +33,7 @@ const styles = () => ({
 })
 
 const SafeName = ({ classes }: Props) => (
-  <React.Fragment>
+  <>
     <Block margin="lg">
       <Paragraph noMargin size="md" color="primary">
         You are about to create a new Gnosis Safe wallet with one or more owners. First, let&apos;s give your new wallet
@@ -67,7 +67,7 @@ const SafeName = ({ classes }: Props) => (
         Ethereum blockchain. These funds cannot be accessed by Gnosis at any point.
       </Paragraph>
     </Block>
-  </React.Fragment>
+  </>
 )
 
 const SafeNameForm = withStyles(styles)(SafeName)

src/routes/safe/components/Balances/Receive/index.jsx

@@ -72,7 +72,7 @@ type Props = {
 const Receive = ({
   classes, onClose, safeAddress, safeName, etherScanLink,
 }: Props) => (
-  <React.Fragment>
+  <>
     <Row align="center" grow className={classes.heading}>
       <Paragraph className={classes.manage} weight="bolder" noMargin>
         Receive funds
@@ -110,7 +110,7 @@ const Receive = ({
         Done
       </Button>
     </Row>
-  </React.Fragment>
+  </>
 )
 
 export default withStyles(styles)(Receive)

src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx

@@ -39,7 +39,7 @@ type Props = {
 }
 
 const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => (
-  <React.Fragment>
+  <>
     <Row align="center" grow className={classes.heading}>
       <Paragraph weight="bolder" className={classes.manage} noMargin>
         Send
@@ -72,7 +72,7 @@ const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => (
         </Button>
       </Col>
     </Row>
-  </React.Fragment>
+  </>
 )
 
 export default withStyles(styles)(ChooseTxType)

src/routes/safe/components/Balances/Tokens/index.jsx

@@ -40,7 +40,7 @@ const Tokens = (props: Props) => {
   } = props
 
   return (
-    <React.Fragment>
+    <>
       <Row align="center" grow className={classes.heading}>
         <Paragraph className={classes.manage} noMargin weight="bolder">
           Manage Tokens
@@ -72,7 +72,7 @@ const Tokens = (props: Props) => {
           tokens={tokens}
         />
       )}
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx

@@ -119,10 +119,10 @@ const AddCustomToken = (props: Props) => {
   }
 
   return (
-    <React.Fragment>
+    <>
       <GnoForm onSubmit={handleSubmit} initialValues={formValues} testId={ADD_CUSTOM_TOKEN_FORM}>
         {() => (
-          <React.Fragment>
+          <>
             <Block className={classes.formContainer}>
               <Paragraph noMargin className={classes.title} weight="bolder" size="lg">
                 Add custom token
@@ -196,10 +196,10 @@ const AddCustomToken = (props: Props) => {
                 Save
               </Button>
             </Row>
-          </React.Fragment>
+          </>
         )}
       </GnoForm>
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx

@@ -124,7 +124,7 @@ class Tokens extends React.Component<Props, State> {
     const filteredTokens = filterBy(filter, tokens)
 
     return (
-      <React.Fragment>
+      <>
         <Block className={classes.root}>
           <Row align="center" className={cn(classes.padding, classes.actions)}>
             <Search className={classes.search} />
@@ -179,7 +179,7 @@ class Tokens extends React.Component<Props, State> {
             )
           })}
         </MuiList>
-      </React.Fragment>
+      </>
     )
   }
 }

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx

@@ -44,7 +44,7 @@ const ReviewAddOwner = ({
     onSubmit()
   }
   return (
-    <React.Fragment>
+    <>
       <Row align="center" grow className={classes.heading}>
         <Paragraph weight="bolder" className={classes.manage} noMargin>
           Add new owner
@@ -97,7 +97,7 @@ const ReviewAddOwner = ({
               </Paragraph>
             </Row>
             <Hairline />
-            {owners.map(owner => (
+            {owners.map((owner) => (
               <React.Fragment key={owner.address}>
                 <Row className={classes.owner}>
                   <Col xs={1} align="center">
@@ -169,7 +169,7 @@ const ReviewAddOwner = ({
           Submit
         </Button>
       </Row>
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx

@@ -39,7 +39,7 @@ const ThresholdForm = ({
   }
 
   return (
-    <React.Fragment>
+    <>
       <Row align="center" grow className={classes.heading}>
         <Paragraph weight="bolder" className={classes.manage} noMargin>
           Add new owner
@@ -52,7 +52,7 @@ const ThresholdForm = ({
       <Hairline />
       <GnoForm onSubmit={handleSubmit} initialValues={{ threshold: threshold.toString() }}>
         {() => (
-          <React.Fragment>
+          <>
             <Block className={classes.formContainer}>
               <Row>
                 <Paragraph weight="bolder" className={classes.headingText}>
@@ -68,8 +68,8 @@ const ThresholdForm = ({
                 <Col xs={2}>
                   <Field
                     name="threshold"
-                    render={props => (
-                      <React.Fragment>
+                    render={(props) => (
+                      <>
                         <SelectField {...props} disableError>
                           {[...Array(Number(owners.size + 1))].map((x, index) => (
                             <MenuItem key={index} value={`${index + 1}`}>
@@ -82,7 +82,7 @@ const ThresholdForm = ({
                             {props.meta.error}
                           </Paragraph>
                         )}
-                      </React.Fragment>
+                      </>
                     )}
                     validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))}
                     data-testid="threshold-select-input"
@@ -115,10 +115,10 @@ owner(s)
                 Review
               </Button>
             </Row>
-          </React.Fragment>
+          </>
         )}
       </GnoForm>
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx

@@ -73,7 +73,7 @@ const EditOwnerComponent = ({
       <Hairline />
       <GnoForm onSubmit={handleSubmit}>
         {() => (
-          <React.Fragment>
+          <>
             <Block className={classes.container}>
               <Row margin="md">
                 <Field
@@ -109,7 +109,7 @@ const EditOwnerComponent = ({
                 Save
               </Button>
             </Row>
-          </React.Fragment>
+          </>
         )}
       </GnoForm>
     </Modal>

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx

@@ -58,7 +58,7 @@ const ReviewRemoveOwner = ({
   }
 
   return (
-    <React.Fragment>
+    <>
       <Row align="center" grow className={classes.heading}>
         <Paragraph weight="bolder" className={classes.manage} noMargin>
           Replace owner
@@ -112,7 +112,7 @@ const ReviewRemoveOwner = ({
             </Row>
             <Hairline />
             {owners.map(
-              owner => owner.address !== ownerAddress && (
+              (owner) => owner.address !== ownerAddress && (
                 <React.Fragment key={owner.address}>
                   <Row className={classes.owner}>
                     <Col xs={1} align="center">
@@ -215,7 +215,7 @@ const ReviewRemoveOwner = ({
           Submit
         </Button>
       </Row>
-    </React.Fragment>
+    </>
   )
 }
 

src/routes/safeList/components/Layout.jsx

@@ -14,12 +14,11 @@ const SafeList = ({ safes, provider }: Props) => {
   const safesAvailable = safes && safes.count() > 0
 
   return (
-    <React.Fragment>
+    <>
       { safesAvailable
         ? <SafeTable safes={safes} />
-        : <NoSafe provider={provider} text="No safes created, please create a new one" />
-      }
-    </React.Fragment>
+        : <NoSafe provider={provider} text="No safes created, please create a new one" />}
+    </>
   )
 }