Refactor spinners into a new component

src/components/DepositWidget/Form.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, ChangeEvent, ReactNode } from 'react'
 import BN from 'bn.js'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconDefinition, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import plus from 'assets/img/plus.svg'
 
 import { CardDrawer } from 'components/Layout/Card'
 import { WalletDrawerInnerWrapper } from './Form.styled'
+import { Spinner } from 'components/Spinner'
 
 import useSafeState from 'hooks/useSafeState'
 import useScrollIntoView from 'hooks/useScrollIntoView'
@@ -167,7 +167,7 @@ export const Form: React.FC<FormProps> = (props: FormProps) => {
             <a onClick={cancelForm}>Cancel</a>
             <button type="button" disabled={!!errors.amountInput || loading} onClick={_onClick}>
               {submitBtnLabel}
-              {loading ? <FontAwesomeIcon icon={faSpinner} spin={loading} /> : <img src={plus} />}
+              {loading ? <Spinner spin={loading} /> : <img src={plus} />}
             </button>
           </div>
         </WalletDrawerInnerWrapper>

src/components/DepositWidget/Row.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import BN from 'bn.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faClock, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
+import { faClock, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { MinusSVG, PlusSVG } from 'assets/img/SVG'
 
 import Form from './Form'
 import TokenImg from 'components/TokenImg'
 import { TokenRow, RowClaimButton, RowClaimSpan } from './Styled'
+import { Spinner } from 'components/Spinner'
 
 import useNoScroll from 'hooks/useNoScroll'
 
@@ -26,7 +27,7 @@ export interface RowProps extends Record<keyof TokenLocalState, boolean> {
   innerHeight?: number
 }
 
-const spinner = <FontAwesomeIcon icon={faSpinner} style={{ marginRight: 7 }} spin />
+const spinner = <Spinner style={{ marginRight: 7 }} />
 
 export const Row: React.FC<RowProps> = (props: RowProps) => {
   const {
@@ -150,7 +151,7 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
               <button type="button" className="enableToken" onClick={onEnableToken} disabled={enabling}>
                 {enabling ? (
                   <>
-                    <FontAwesomeIcon icon={faSpinner} spin />
+                    <Spinner />
                     Enabling
                   </>
                 ) : (

src/components/OrdersWidget/OrderRow.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import lowBalanceIcon from 'assets/img/lowBalance.svg'
 
-import { faSpinner, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons'
 import { toast } from 'toastify'
 
 import { isOrderUnlimited, isNeverExpiresOrder, calculatePrice, formatPrice, invertPrice } from '@gnosis.pm/dex-js'
@@ -14,6 +14,7 @@ import { EtherscanLink } from 'components/EtherscanLink'
 import { getTokenFromExchangeById } from 'services'
 import useSafeState from 'hooks/useSafeState'
 import { TokenDetails } from 'types'
+import { Spinner } from 'components/Spinner'
 
 import {
   safeTokenName,
@@ -35,7 +36,7 @@ const PendingLink: React.FC<Pick<Props, 'transactionHash'>> = props => {
   const { transactionHash } = props
   return (
     <>
-      <FontAwesomeIcon icon={faSpinner} size="sm" spin /> Pending...
+      <Spinner size="sm" /> Pending...
       <br />
       {transactionHash && <EtherscanLink identifier={transactionHash} type="tx" label={<small>View status</small>} />}
     </>

src/components/PoolingWidget/LiquidityButtons.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 
 import { SubComponentProps } from './SubComponents'
 import { StepButtonsWrapper } from './PoolingWidget.styled'
 import { TooltipWrapper } from 'components/Tooltip'
+import { Spinner } from 'components/Spinner'
 
 interface LiquidityButtonsProps extends Pick<SubComponentProps, 'step' | 'txReceipt' | 'nextStep' | 'isSubmitting'> {
   disableBack: boolean
@@ -52,7 +51,7 @@ const LiquidityButtons: React.FC<LiquidityButtonsProps> = ({
     ) : (
       // NOT YET SUBMITTED TX
       <button type="button" className="finish" onClick={handleSubmit} disabled={disableSubmit}>
-        {showLoader && <FontAwesomeIcon icon={faSpinner} spin />}Submit transaction
+        {showLoader && <Spinner />}Submit transaction
       </button>
     )}
   </StepButtonsWrapper>

src/components/Spinner.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { SizeProp } from '@fortawesome/fontawesome-svg-core'
+
+interface SpinnerProps {
+  spin?: boolean
+  style?: React.CSSProperties
+  size?: SizeProp
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({ style, spin = true, size }) => (
+  <FontAwesomeIcon icon={faSpinner} style={style} spin={spin} size={size} />
+)
+
+export default Spinner

src/components/TradeWidget/index.tsx

@@ -2,11 +2,9 @@ import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { unstable_batchedUpdates as batchUpdateState } from 'react-dom'
 
 import styled from 'styled-components'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { SwitcherSVG } from 'assets/img/SVG'
 import arrow from 'assets/img/arrow.svg'
 import { FieldValues } from 'react-hook-form/dist/types'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { toast } from 'toastify'
 import BN from 'bn.js'
 import Modali from 'modali'
@@ -31,6 +29,7 @@ import { useQuery, buildSearchQuery } from 'hooks/useQuery'
 import { useDebounce } from 'hooks/useDebounce'
 import useGlobalState from 'hooks/useGlobalState'
 import { savePendingOrdersAction, removePendingOrdersAction } from 'reducers-actions/pendingOrders'
+import { Spinner } from 'components/Spinner'
 
 import { MEDIA, PRICE_ESTIMATION_PRECISION, PRICE_ESTIMATION_DEBOUNCE_TIME } from 'const'
 
@@ -994,7 +993,7 @@ const TradeWidget: React.FC = () => {
             disabled={isSubmitting}
             tabIndex={1}
           >
-            {isSubmitting && <FontAwesomeIcon icon={faSpinner} size="lg" spin={isSubmitting} />}{' '}
+            {isSubmitting && <Spinner size="lg" spin={isSubmitting} />}{' '}
             {sameToken ? 'Please select different tokens' : 'Submit limit order'}
           </SubmitButton>
         </WrappedForm>

src/components/UserWallet/WalletComponent.tsx

@@ -3,7 +3,7 @@ import { RouteComponentProps, useRouteMatch } from 'react-router'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import QRCode from 'qrcode.react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faSignOutAlt, faSignInAlt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons'
+import { faSignOutAlt, faSignInAlt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons'
 
 import { EtherscanLink } from '../EtherscanLink'
 import {
@@ -27,6 +27,7 @@ import { useConnectWallet } from 'hooks/useConnectWallet'
 import { abbreviateString, getNetworkFromId } from 'utils'
 // TODO: probably not do this
 import WalletImg from 'assets/img/eth-network.svg'
+import { Spinner } from 'components/Spinner'
 
 interface UserWalletProps extends RouteComponentProps {
   className: string
@@ -80,7 +81,7 @@ const UserWallet: React.FC<RouteComponentProps> = (props: UserWalletProps) => {
     if (loadingLabel) {
       content = (
         <>
-          <FontAwesomeIcon icon={faSpinner} spin />
+          <Spinner />
           {' ' + loadingLabel}
         </>
       )

src/hooks/useBetterAddTokenModal.tsx

@@ -7,12 +7,11 @@ import TokenImg from '../components/TokenImg'
 import styled from 'styled-components'
 import { tokenListApi } from 'api'
 import { TokenFromExchange } from 'services/factories'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { unstable_batchedUpdates as batchUpdates } from 'react-dom'
 import useSafeState from './useSafeState'
 import { EtherscanLink } from 'components/EtherscanLink'
 import { useWalletConnection } from './useWalletConnection'
+import Spinner from 'components/Spinner'
 
 interface ExtraProps {
   focused: boolean
@@ -178,7 +177,7 @@ const ExplainTokenReason: React.FC<ExplainTokenReasonProps> = ({ token, reason,
   }
 }
 
-const spinner = <FontAwesomeIcon icon={faSpinner} style={{ marginRight: 7, alignSelf: 'center' }} spin />
+const spinner = <Spinner style={{ marginRight: 7, alignSelf: 'center' }} />
 
 const generateMessage = ({ networkId, fetchResults }: GenerateMessageParams2): React.ReactElement => {
   // in fetching state -- show spinner