Tx replace refactor (#1045)

* bump deps

* flushPromises after render

* Remove unused constants

* bump rc

* Delete customPropTypes.js

* REPLACE_STRATEGY_PROPTYPE

* bump @glif/react-components

* Update Send.test.tsx.snap

* Remove useReset hook

* Remove unused utils

* Use createPath from react-components

* Use createHash from react-components

* bump @glif/react-components

* Use urlParams from react-components

__mocks__/@zondax/filecoin-signing-tools.js

@@ -1,4 +1,4 @@
-import createHash from '../../utils/createHash'
+import { createHash } from '@glif/react-components'
 
 const generateMnemonic = jest
   .fn()

components/Wallet/Replace.tsx

@@ -17,10 +17,10 @@ import {
   MessagePending,
   TxState,
   useWallet,
-  useWalletProvider
+  useWalletProvider,
+  navigate
 } from '@glif/react-components'
 
-import { navigate } from '../../utils/urlParams'
 import { PAGE } from '../../constants'
 import { logger } from '../../logger'
 
@@ -228,10 +228,14 @@ export enum ReplaceStrategy {
   CANCEL = 'CANCEL'
 }
 
+const REPLACE_STRATEGY_PROPTYPE = PropTypes.oneOf(
+  Object.values(ReplaceStrategy) as Array<ReplaceStrategy>
+)
+
 interface ReplaceProps {
   strategy: ReplaceStrategy
 }
 
 Replace.propTypes = {
-  strategy: PropTypes.string.isRequired
+  strategy: REPLACE_STRATEGY_PROPTYPE.isRequired
 }

components/Wallet/Send.test.tsx

@@ -56,6 +56,8 @@ describe('Send', () => {
         </Tree>
       )
 
+      await flushPromises()
+
       // Get HTML elements
       const header = getByRole(result.container, 'heading')
       const [recipient, params] = getAllByRole(result.container, 'textbox')

components/Wallet/Send.tsx

@@ -13,10 +13,10 @@ import {
   LoginOption,
   TxState,
   WalletProviderOpts,
-  PendingMsgContextType
+  PendingMsgContextType,
+  navigate
 } from '@glif/react-components'
 
-import { navigate } from '../../utils/urlParams'
 import { PAGE } from '../../constants'
 
 export const Send = ({ walletProviderOpts, pendingMsgContext }: SendProps) => {

components/Wallet/__snapshots__/Send.test.tsx.snap

@@ -340,6 +340,31 @@ exports[`Send it allows a user to send a message 1`] = `
   color: var(--gray-dark) !important;
 }
 
+.c7 .select-wrapper {
+  position: relative;
+}
+
+.c7 .select-wrapper select {
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c7 .select-wrapper .select-arrow {
+  position: absolute;
+  pointer-events: none;
+  top: 50%;
+  right: 1.2em;
+  width: 0.6em;
+  height: 0.6em;
+  border-right: 1.5px solid var(--black);
+  border-bottom: 1.5px solid var(--black);
+  -webkit-transform: translateY(-0.35em) rotate(45deg);
+  -ms-transform: translateY(-0.35em) rotate(45deg);
+  transform: translateY(-0.35em) rotate(45deg);
+}
+
 .c8 .toggle-wrapper {
   position: relative;
   padding: 0.5em 0;
@@ -982,6 +1007,31 @@ exports[`Send snapshots after enter recipient state 1`] = `
   color: var(--purple-medium);
 }
 
+.c5 .select-wrapper {
+  position: relative;
+}
+
+.c5 .select-wrapper select {
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c5 .select-wrapper .select-arrow {
+  position: absolute;
+  pointer-events: none;
+  top: 50%;
+  right: 1.2em;
+  width: 0.6em;
+  height: 0.6em;
+  border-right: 1.5px solid var(--black);
+  border-bottom: 1.5px solid var(--black);
+  -webkit-transform: translateY(-0.35em) rotate(45deg);
+  -ms-transform: translateY(-0.35em) rotate(45deg);
+  transform: translateY(-0.35em) rotate(45deg);
+}
+
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1494,6 +1544,31 @@ exports[`Send snapshots initial state 1`] = `
   color: var(--purple-medium);
 }
 
+.c5 .select-wrapper {
+  position: relative;
+}
+
+.c5 .select-wrapper select {
+  width: 100%;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c5 .select-wrapper .select-arrow {
+  position: absolute;
+  pointer-events: none;
+  top: 50%;
+  right: 1.2em;
+  width: 0.6em;
+  height: 0.6em;
+  border-right: 1.5px solid var(--black);
+  border-bottom: 1.5px solid var(--black);
+  -webkit-transform: translateY(-0.35em) rotate(45deg);
+  -ms-transform: translateY(-0.35em) rotate(45deg);
+  transform: translateY(-0.35em) rotate(45deg);
+}
+
 .c4 {
   display: -webkit-box;
   display: -webkit-flex;

components/Wallet/index.tsx

@@ -12,14 +12,12 @@ import {
   useWalletProvider,
   useWallet,
   hasLedgerError,
-  reportLedgerConfigError
+  reportLedgerConfigError,
+  generateRouteWithRequiredUrlParams,
+  navigate
 } from '@glif/react-components'
 
 import { logger } from '../../logger'
-import {
-  generateRouteWithRequiredUrlParams,
-  navigate
-} from '../../utils/urlParams'
 import { PAGE } from '../../constants'
 
 const Cards = styled.div`

components/WalletPageLoggedIn.tsx

@@ -4,11 +4,12 @@ import {
   LoginOption,
   NetworkConnection,
   useWallet,
-  useWalletProvider
+  useWalletProvider,
+  resetWallet,
+  navigate
 } from '@glif/react-components'
 import { useRouter } from 'next/router'
 
-import { resetWallet, navigate } from '../utils/urlParams'
 import { GLIF_DISCORD, PAGE } from '../constants'
 import WalletPage from './WalletPage'
 

constants.ts

@@ -1,5 +1,3 @@
-import { FilecoinNumber } from '@glif/filecoin-number'
-
 /* WALLET TYPES */
 export const LEDGER = 'LEDGER'
 export const HD_WALLET = 'HD_WALLET'
@@ -23,29 +21,14 @@ export const GLIF_TWITTER = 'https://twitter.com/glifio'
 /* NETWORK VARS */
 export const MAINNET = 'f'
 export const TESTNET = 't'
-
 export const MAINNET_PATH_CODE = 461
 export const TESTNET_PATH_CODE = 1
 
-export const EXEC_ACTOR = 'f01'
-
-/* TX METHOD TYPES */
-export const SEND = 'SEND'
-export const PROPOSE = 'PROPOSE'
-export const EXEC = 'EXEC'
 /* FILECOIN APP VERSION MIN */
 export const LEDGER_VERSION_MAJOR = 0
 export const LEDGER_VERSION_MINOR = 20
 export const LEDGER_VERSION_PATCH = 0
 
-/* GAS CONSTANTS */
-export const emptyGasInfo = {
-  estimatedTransactionFee: new FilecoinNumber('0', 'attofil'),
-  gasPremium: new FilecoinNumber('0', 'attofil'),
-  gasFeeCap: new FilecoinNumber('0', 'attofil'),
-  gasLimit: new FilecoinNumber('0', 'attofil')
-}
-
 /* PAGES */
 /* eslint-disable no-unused-vars */
 export enum PAGE {