Set lower reset time functions for Rinkeby (#2307)

src/routes/safe/components/Settings/SpendingLimit/FormFields/ResetTime.tsx

@@ -4,6 +4,7 @@ import React, { ReactElement } from 'react'
 import { useField } from 'react-final-form'
 import styled from 'styled-components'
 
+import { getNetworkName } from 'src/config'
 import { Field } from 'src/routes/safe/components/Settings/SpendingLimit/FormFields/Amount'
 
 // TODO: propose refactor in safe-react-components based on this requirements
@@ -81,17 +82,30 @@ const ResetTimeOptions = styled.div`
   grid-area: resetTimeOption;
 `
 
-export const RESET_TIME_OPTIONS = [
+const RESET_TIME_OPTIONS = [
-  { label: '1 day', value: '1' },
+  { label: '1 day', value: '1440' }, // 1 day x 24h x 60min
-  { label: '1 week', value: '7' },
+  { label: '1 week', value: '10080' }, // 7 days x 24h x 60min
-  { label: '1 month', value: '30' },
+  { label: '1 month', value: '43200' }, // 30 days x 24h x 60min
 ]
 
+const RINKEBY_RESET_TIME_OPTIONS = [
+  { label: '5 minutes', value: '5' },
+  { label: '30 minutes', value: '30' },
+  { label: '1 hour', value: '60' },
+]
+
+export const getResetTimeOptions = (): RadioButtonOption[] => {
+  const currentNetwork = getNetworkName().toLowerCase()
+  return currentNetwork !== 'rinkeby' ? RESET_TIME_OPTIONS : RINKEBY_RESET_TIME_OPTIONS
+}
+
 const ResetTime = (): ReactElement => {
   const {
     input: { value: withResetTime },
   } = useField('withResetTime', { subscription: { value: true } })
 
+  const resetTimeOptions = getResetTimeOptions()
+
   const switchExplanation = withResetTime ? 'choose reset time period' : 'one time'
 
   return (
@@ -104,11 +118,7 @@ const ResetTime = (): ReactElement => {
       </ResetTimeToggle>
       {withResetTime && (
         <ResetTimeOptions>
-          <SafeRadioButtons
+          <SafeRadioButtons groupName="resetTime" initialValue={resetTimeOptions[0].value} options={resetTimeOptions} />
-            groupName="resetTime"
-            initialValue={RESET_TIME_OPTIONS[0].value}
-            options={RESET_TIME_OPTIONS}
-          />
         </ResetTimeOptions>
       )}
     </>

src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Review.tsx

@@ -20,7 +20,7 @@ import { MultiSendTx } from 'src/logic/safe/utils/upgradeSafe'
 import { makeToken, Token } from 'src/logic/tokens/store/model/token'
 import { fromTokenUnit, toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
-import { RESET_TIME_OPTIONS } from 'src/routes/safe/components/Settings/SpendingLimit/FormFields/ResetTime'
+import { getResetTimeOptions } from 'src/routes/safe/components/Settings/SpendingLimit/FormFields/ResetTime'
 import { AddressInfo, ResetTimeInfo, TokenInfo } from 'src/routes/safe/components/Settings/SpendingLimit/InfoDisplay'
 import { useStyles } from 'src/routes/safe/components/Settings/SpendingLimit/style'
 import { safeParamAddressFromStateSelector, safeSpendingLimitsSelector } from 'src/logic/safe/store/selectors'
@@ -104,7 +104,7 @@ const calculateSpendingLimitsTxData = (
     beneficiary: values.beneficiary,
     token: values.token,
     spendingLimitInWei: toTokenUnit(values.amount, txToken.decimals),
-    resetTimeMin: values.withResetTime ? +values.resetTime * 60 * 24 : 0,
+    resetTimeMin: values.withResetTime ? +values.resetTime : 0,
     resetBaseMin: values.withResetTime ? startTime : 0,
   }
 
@@ -209,13 +209,13 @@ export const ReviewSpendingLimits = ({ onBack, onClose, txToken, values }: Revie
   }
 
   const resetTimeLabel = useMemo(
-    () => (values.withResetTime ? RESET_TIME_OPTIONS.find(({ value }) => value === values.resetTime)?.label : ''),
+    () => (values.withResetTime ? getResetTimeOptions().find(({ value }) => value === values.resetTime)?.label : ''),
     [values.resetTime, values.withResetTime],
   )
 
   const previousResetTime = (existentSpendingLimit: SpendingLimit) =>
-    RESET_TIME_OPTIONS.find(({ value }) => value === (+existentSpendingLimit.resetTimeMin / 60 / 24).toString())
+    getResetTimeOptions().find(({ value }) => value === (+existentSpendingLimit.resetTimeMin).toString())?.label ??
-      ?.label ?? 'One-time spending limit'
+    'One-time spending limit'
 
   const closeEditModalCallback = (txParameters: TxParameters) => {
     const oldGasPrice = Number(gasPriceFormatted)

src/routes/safe/components/Settings/SpendingLimit/RemoveLimitModal.tsx

@@ -18,7 +18,7 @@ import { TxParametersDetail } from 'src/routes/safe/components/Transactions/help
 import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
 import { SPENDING_LIMIT_MODULE_ADDRESS } from 'src/utils/constants'
 
-import { RESET_TIME_OPTIONS } from './FormFields/ResetTime'
+import { getResetTimeOptions } from './FormFields/ResetTime'
 import { AddressInfo, ResetTimeInfo, TokenInfo } from './InfoDisplay'
 import { SpendingLimitTable } from './LimitsTable/dataFetcher'
 import { useStyles } from './style'
@@ -91,7 +91,7 @@ export const RemoveLimitModal = ({ onClose, spendingLimit, open }: RemoveSpendin
   }
 
   const resetTimeLabel =
-    RESET_TIME_OPTIONS.find(({ value }) => +value === +spendingLimit.resetTime.resetTimeMin / 24 / 60)?.label ?? ''
+    getResetTimeOptions().find(({ value }) => +value === +spendingLimit.resetTime.resetTimeMin)?.label ?? ''
 
   const closeEditModalCallback = (txParameters: TxParameters) => {
     const oldGasPrice = Number(gasPriceFormatted)

src/routes/safe/components/Transactions/TxList/SpendingLimitDetails.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import useTokenInfo from 'src/logic/safe/hooks/useTokenInfo'
 import { DataDecoded } from 'src/logic/safe/store/models/types/gateway.d'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
-import { RESET_TIME_OPTIONS } from 'src/routes/safe/components/Settings/SpendingLimit/FormFields/ResetTime'
+import { getResetTimeOptions } from 'src/routes/safe/components/Settings/SpendingLimit/FormFields/ResetTime'
 import { AddressInfo, ResetTimeInfo, TokenInfo } from 'src/routes/safe/components/Settings/SpendingLimit/InfoDisplay'
 
 const SET_ALLOWANCE = 'setAllowance'
@@ -35,7 +35,7 @@ export const ModifySpendingLimitDetails = ({ data }: { data: DataDecoded }): Rea
   )
 
   const resetTimeLabel = React.useMemo(
-    () => RESET_TIME_OPTIONS.find(({ value }) => +value === +resetTimeMin / 24 / 60)?.label ?? '',
+    () => getResetTimeOptions().find(({ value }) => +value === +resetTimeMin)?.label ?? '',
     [resetTimeMin],
   )