-
+ 
- )
- }
-=======
->>>>>>> gnosis_v3.22.0
{/* The cookie banner itself */}
{cookieBannerOpen && (
From f8b0eed215356eceb0278b2aae96326aabcf9ea1 Mon Sep 17 00:00:00 2001
From: Aaron Cook
{data.name && (
diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx
index 3281f87c4e..f62096fa1c 100644
--- a/src/routes/safe/components/Balances/Collectibles/index.tsx
+++ b/src/routes/safe/components/Balances/Collectibles/index.tsx
@@ -1,12 +1,17 @@
-import { useEffect, Fragment, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
import Card from '@material-ui/core/Card'
import { createStyles, makeStyles } from '@material-ui/core/styles'
import { useSelector } from 'react-redux'
+import { Virtuoso } from 'react-virtuoso'
import Item from './components/Item'
import Paragraph from 'src/components/layout/Paragraph'
-import { nftAssetsFromNftTokensSelector, orderedNFTAssets } from 'src/logic/collectibles/store/selectors'
+import {
+ nftAssetsFromNftTokensSelector,
+ nftLoadedSelector,
+ orderedNFTAssets,
+} from 'src/logic/collectibles/store/selectors'
import SendModal from 'src/routes/safe/components/Balances/SendModal'
import { fontColor, lg, screenSm, screenXs } from 'src/theme/variables'
import { useAnalytics, SAFE_EVENTS } from 'src/utils/googleAnalytics'
@@ -46,7 +51,7 @@ const useStyles = makeStyles(
title: {
alignItems: 'center',
display: 'flex',
- margin: '0 0 18px',
+ margin: '18px',
},
titleImg: {
backgroundPosition: '50% 50%',
@@ -83,6 +88,7 @@ const Collectibles = (): React.ReactElement => {
const [selectedToken, setSelectedToken] = useState
-
diff --git a/src/routes/safe/components/Balances/Collectibles/index.tsx b/src/routes/safe/components/Balances/Collectibles/index.tsx
index 3281f87c4e..f62096fa1c 100644
--- a/src/routes/safe/components/Balances/Collectibles/index.tsx
+++ b/src/routes/safe/components/Balances/Collectibles/index.tsx
@@ -1,12 +1,17 @@
-import { useEffect, Fragment, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
import Card from '@material-ui/core/Card'
import { createStyles, makeStyles } from '@material-ui/core/styles'
import { useSelector } from 'react-redux'
+import { Virtuoso } from 'react-virtuoso'
import Item from './components/Item'
import Paragraph from 'src/components/layout/Paragraph'
-import { nftAssetsFromNftTokensSelector, orderedNFTAssets } from 'src/logic/collectibles/store/selectors'
+import {
+ nftAssetsFromNftTokensSelector,
+ nftLoadedSelector,
+ orderedNFTAssets,
+} from 'src/logic/collectibles/store/selectors'
import SendModal from 'src/routes/safe/components/Balances/SendModal'
import { fontColor, lg, screenSm, screenXs } from 'src/theme/variables'
import { useAnalytics, SAFE_EVENTS } from 'src/utils/googleAnalytics'
@@ -46,7 +51,7 @@ const useStyles = makeStyles(
title: {
alignItems: 'center',
display: 'flex',
- margin: '0 0 18px',
+ margin: '18px',
},
titleImg: {
backgroundPosition: '50% 50%',
@@ -83,6 +88,7 @@ const Collectibles = (): React.ReactElement => {
const [selectedToken, setSelectedToken] = useState()
const [sendNFTsModalOpen, setSendNFTsModalOpen] = useState(false)
+ const nftLoaded = useSelector(nftLoadedSelector)
const nftTokens = useSelector(orderedNFTAssets)
const nftAssetsFromNftTokens = useSelector(nftAssetsFromNftTokensSelector)
@@ -95,46 +101,60 @@ const Collectibles = (): React.ReactElement => {
setSendNFTsModalOpen(true)
}
+ if (nftAssetsFromNftTokens.length === 0) {
+ return (
+
+
+
+ {nftLoaded ? 'No collectibles available' : 'Loading collectibles...'}
+
+
+
+ )
+ }
+
return (
-
-
- {/* No collectibles */}
- {nftAssetsFromNftTokens.length === 0 && (
- No collectibles available
- )}
+ <>
+ {
+ // Larger collectible lists can cause this to be initially undefined
+ if (!nftAsset) {
+ return null
+ }
- {/* collectibles List*/}
- {nftAssetsFromNftTokens.length > 0 &&
- nftAssetsFromNftTokens.map((nftAsset) => {
- return (
-
-
-
- {nftAsset.name}
-
-
-
- {nftTokens
- .filter(({ assetAddress }) => nftAsset.address === assetAddress)
- .map((nftToken) => (
- - handleItemSend(nftToken)}
- />
- ))}
-
-
- )
- })}
-
+ return (
+
+
+
+ {nftAsset.name}
+
+
+
+ {nftTokens
+ .filter(({ assetAddress }) => nftAsset.address === assetAddress)
+ .map((nftToken, i) => (
+ - handleItemSend(nftToken)}
+ />
+ ))}
+
+
+ )
+ }}
+ />
setSendNFTsModalOpen(false)}
selectedToken={selectedToken}
/>
-
+
)
}
diff --git a/yarn.lock b/yarn.lock
index 96d56a77cb..19b830af25 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4323,6 +4323,18 @@
optionalDependencies:
dotenv "^8.2.0"
+"@virtuoso.dev/react-urx@^0.2.12":
+ version "0.2.13"
+ resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz#e2cfc42d259d2a002695e7517d34cb97b64ee9c4"
+ integrity sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==
+ dependencies:
+ "@virtuoso.dev/urx" "^0.2.13"
+
+"@virtuoso.dev/urx@^0.2.12", "@virtuoso.dev/urx@^0.2.13":
+ version "0.2.13"
+ resolved "https://registry.yarnpkg.com/@virtuoso.dev/urx/-/urx-0.2.13.tgz#a65e7e8d923cb03397ac876bfdd45c7f71c8edf1"
+ integrity sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw==
+
"@walletconnect/browser-utils@^1.7.1":
version "1.7.1"
resolved "https://registry.yarnpkg.com/@walletconnect/browser-utils/-/browser-utils-1.7.1.tgz#2a28846cd4d73166debbbf7d470e78ba25616f5e"
@@ -16824,6 +16836,14 @@ react-transition-group@^4.4.0:
loose-envify "^1.4.0"
prop-types "^15.6.2"
+react-virtuoso@^2.8.2:
+ version "2.8.2"
+ resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-2.8.2.tgz#6b98c62d5e3807b41b3e52e3576784f8b6142f33"
+ integrity sha512-iH48/OOsh12BPqZX3LNgT9zshcqO7ALwG/AxXDTqPYwHSolzwj+V8fpHRBLEbvfBl4EEnMZI+yxvs1DblZT/jQ==
+ dependencies:
+ "@virtuoso.dev/react-urx" "^0.2.12"
+ "@virtuoso.dev/urx" "^0.2.12"
+
react@16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
From 5ddd9f526efe8bed247a2d11f32b17279a9fde86 Mon Sep 17 00:00:00 2001
From: Aaron Cook
Date: Tue, 22 Mar 2022 07:35:44 +0100
Subject: [PATCH 05/14] fix: clear pending status when transaction reverts
(#3691)
* fix: clear pending status upon failure
* fix: rename function
* fix: don't throw
* fix: resolve spy
* fix: don't check receipt + set `txId`
* fix: remove `only` from test
---
.../safe/store/actions/createTransaction.ts | 25 +++----
.../transactions/utils/transactionHelpers.ts | 5 ++
.../__tests__/pendingTxMonitor.test.ts | 73 ++++++++++++++++++-
.../safe/transactions/pendingTxMonitor.ts | 30 +++++---
4 files changed, 106 insertions(+), 27 deletions(-)
diff --git a/src/logic/safe/store/actions/createTransaction.ts b/src/logic/safe/store/actions/createTransaction.ts
index 59476a5d21..fd77061970 100644
--- a/src/logic/safe/store/actions/createTransaction.ts
+++ b/src/logic/safe/store/actions/createTransaction.ts
@@ -101,15 +101,15 @@ export class TxSender {
if (!isFinalization || !this.txId) {
try {
txDetails = await saveTxToHistory({ ...txArgs, signature, origin: txProps.origin })
+ this.txId = txDetails.txId
} catch (err) {
logError(Errors._816, err.message)
return
}
}
- const id = txDetails?.txId || this.txId
- if (isFinalization && id && this.txHash) {
- dispatch(addPendingTransaction({ id, txHash: this.txHash }))
+ if (isFinalization && this.txId && this.txHash) {
+ dispatch(addPendingTransaction({ id: this.txId, txHash: this.txHash }))
}
notifications.closePending()
@@ -189,23 +189,20 @@ export class TxSender {
)
}
- async sendTx(confirmCallback?: ConfirmEventHandler): Promise {
+ async sendTx(confirmCallback?: ConfirmEventHandler): Promise {
const { txArgs, isFinalization, from, safeTxHash, txProps } = this
const tx = isFinalization ? getExecutionTransaction(txArgs) : getApprovalTransaction(this.safeInstance, safeTxHash)
const sendParams = createSendParams(from, txProps.ethParameters || {})
- return await tx
- .send(sendParams)
- .once('transactionHash', (hash) => {
- this.txHash = hash
+ await tx.send(sendParams).once('transactionHash', (hash) => {
+ this.txHash = hash
- if (isFinalization) {
- aboutToExecuteTx.setNonce(txArgs.nonce)
- }
- this.onComplete(undefined, confirmCallback)
- })
- .then(({ transactionHash }) => transactionHash)
+ if (isFinalization) {
+ aboutToExecuteTx.setNonce(txArgs.nonce)
+ }
+ this.onComplete(undefined, confirmCallback)
+ })
}
async canSignOffchain(): Promise {
diff --git a/src/logic/safe/store/actions/transactions/utils/transactionHelpers.ts b/src/logic/safe/store/actions/transactions/utils/transactionHelpers.ts
index 809e55ad49..f884267bc9 100644
--- a/src/logic/safe/store/actions/transactions/utils/transactionHelpers.ts
+++ b/src/logic/safe/store/actions/transactions/utils/transactionHelpers.ts
@@ -1,4 +1,5 @@
import { TypedDataUtils } from 'eth-sig-util'
+import { TransactionReceipt } from 'web3-core'
import { TxArgs } from 'src/logic/safe/store/models/types/transaction'
import { getEip712MessageTypes, generateTypedDataFrom } from 'src/logic/safe/transactions/offchainSigner/EIP712Signer'
@@ -10,3 +11,7 @@ export const generateSafeTxHash = (safeAddress: string, safeVersion: string, txA
return `0x${TypedDataUtils.sign(typedData).toString('hex')}`
}
+
+export const didTxRevert = (receipt: TransactionReceipt): boolean => {
+ return receipt?.status === false
+}
diff --git a/src/logic/safe/transactions/__tests__/pendingTxMonitor.test.ts b/src/logic/safe/transactions/__tests__/pendingTxMonitor.test.ts
index 0b40f8aa8e..c017424bd6 100644
--- a/src/logic/safe/transactions/__tests__/pendingTxMonitor.test.ts
+++ b/src/logic/safe/transactions/__tests__/pendingTxMonitor.test.ts
@@ -1,4 +1,4 @@
-import { Transaction } from 'web3-core'
+import { TransactionReceipt } from 'web3-core'
import * as store from 'src/store'
import * as web3 from 'src/logic/wallets/getWeb3'
@@ -65,7 +65,23 @@ describe('PendingTxMonitor', () => {
describe('monitorTx', () => {
it("doesn't clear the pending transaction if it was mined", async () => {
- PendingTxMonitor._isTxMined = jest.fn(() => Promise.resolve())
+ PendingTxMonitor._isTxMined = jest.fn(() =>
+ Promise.resolve({
+ blockHash: '0x123',
+ blockNumber: 1,
+ transactionHash: 'fakeTxHash',
+ transactionIndex: 0,
+ from: '0x123',
+ to: '0x123',
+ cumulativeGasUsed: 1,
+ gasUsed: 1,
+ contractAddress: '0x123',
+ logs: [],
+ status: true, // Mined successfully
+ logsBloom: '0x123',
+ effectiveGasPrice: 0,
+ }),
+ )
const dispatchSpy = jest.spyOn(store.store, 'dispatch').mockImplementation(() => jest.fn())
@@ -77,9 +93,42 @@ describe('PendingTxMonitor', () => {
expect(dispatchSpy).not.toBeCalled()
})
+ it('clears the pending transaction if it failed', async () => {
+ PendingTxMonitor._isTxMined = jest.fn(() =>
+ Promise.resolve({
+ blockHash: '0x123',
+ blockNumber: 1,
+ transactionHash: 'fakeTxHash',
+ transactionIndex: 0,
+ from: '0x123',
+ to: '0x123',
+ cumulativeGasUsed: 1,
+ gasUsed: 1,
+ contractAddress: '0x123',
+ logs: [],
+ status: false, // Mining failed
+ logsBloom: '0x123',
+ effectiveGasPrice: 0,
+ }),
+ )
+
+ const dispatchSpy = jest.spyOn(store.store, 'dispatch').mockImplementation(() => jest.fn())
+
+ await PendingTxMonitor.monitorTx(0, 'fakeTxId', 'fakeTxHash', {
+ numOfAttempts: 1,
+ startingDelay: 0,
+ timeMultiple: 0,
+ })
+
+ expect(dispatchSpy).toBeCalledWith({
+ type: 'pendingTransactions/remove',
+ payload: { id: 'fakeTxId' },
+ })
+ })
it('clears the pending transaction it the tx was not mined within 50 blocks', async () => {
- PendingTxMonitor._isTxMined = jest.fn(() => Promise.reject())
+ // Can return null if transaction is pending: https://web3js.readthedocs.io/en/v1.2.11/web3-eth.html#gettransactionreceipt
+ PendingTxMonitor._isTxMined = jest.fn(() => Promise.reject(null as unknown as TransactionReceipt))
const dispatchSpy = jest.spyOn(store.store, 'dispatch').mockImplementation(() => jest.fn())
@@ -148,7 +197,23 @@ describe('PendingTxMonitor', () => {
jest.spyOn(web3.getWeb3().eth, 'getBlockNumber').mockImplementation(() => Promise.resolve(0))
- PendingTxMonitor._isTxMined = jest.fn(() => Promise.resolve())
+ PendingTxMonitor._isTxMined = jest.fn(() =>
+ Promise.resolve({
+ blockHash: '0x123',
+ blockNumber: 1,
+ transactionHash: 'fakeTxHash',
+ transactionIndex: 0,
+ from: '0x123',
+ to: '0x123',
+ cumulativeGasUsed: 1,
+ gasUsed: 1,
+ contractAddress: '0x123',
+ logs: [],
+ status: true, // Mined successfully
+ logsBloom: '0x123',
+ effectiveGasPrice: 0,
+ }),
+ )
await PendingTxMonitor.monitorAllTxs()
diff --git a/src/logic/safe/transactions/pendingTxMonitor.ts b/src/logic/safe/transactions/pendingTxMonitor.ts
index 881523f6c5..664e44d806 100644
--- a/src/logic/safe/transactions/pendingTxMonitor.ts
+++ b/src/logic/safe/transactions/pendingTxMonitor.ts
@@ -1,4 +1,5 @@
import { backOff, IBackOffOptions } from 'exponential-backoff'
+import { TransactionReceipt } from 'web3-core'
import { NOTIFICATIONS } from 'src/logic/notifications'
import enqueueSnackbar from 'src/logic/notifications/store/actions/enqueueSnackbar'
@@ -6,20 +7,25 @@ import { getWeb3 } from 'src/logic/wallets/getWeb3'
import { store } from 'src/store'
import { removePendingTransaction } from 'src/logic/safe/store/actions/pendingTransactions'
import { pendingTxIdsByChain } from 'src/logic/safe/store/selectors/pendingTransactions'
+import { didTxRevert } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers'
-const _isTxMined = async (sessionBlockNumber: number, txHash: string): Promise => {
+const _isTxMined = async (sessionBlockNumber: number, txHash: string): Promise => {
const MAX_WAITING_BLOCK = sessionBlockNumber + 50
const web3 = getWeb3()
+ const receipt = await web3.eth.getTransactionReceipt(txHash)
+
if (
// Transaction hasn't yet been mined
- !(await web3.eth.getTransactionReceipt(txHash)) &&
+ !receipt &&
// The current block is within waiting window
(await web3.eth.getBlockNumber()) <= MAX_WAITING_BLOCK
) {
throw new Error('Pending transaction not found')
}
+
+ return receipt
}
// Progressively after 10s, 20s, 40s, 80s, 160s, 320s - total of 6.5 minutes
@@ -37,13 +43,19 @@ const monitorTx = async (
numOfAttempts: MAX_ATTEMPTS,
},
): Promise => {
- return backOff(() => PendingTxMonitor._isTxMined(sessionBlockNumber, txHash), options).catch(() => {
- // Unsuccessfully mined (threw in last backOff attempt)
- store.dispatch(removePendingTransaction({ id: txId }))
- store.dispatch(enqueueSnackbar(NOTIFICATIONS.TX_PENDING_FAILED_MSG))
- })
- // If mined, pending status is removed in the transaction middleware
- // when a transaction is added to historical transactions list
+ return backOff(() => PendingTxMonitor._isTxMined(sessionBlockNumber, txHash), options)
+ .then((receipt) => {
+ if (didTxRevert(receipt)) {
+ store.dispatch(removePendingTransaction({ id: txId }))
+ }
+ // If successfully mined, pending status is removed in the transaction
+ // middleware when a transaction is added to historical transactions list
+ })
+ .catch(() => {
+ // Unsuccessfully mined (threw in last backOff attempt)
+ store.dispatch(removePendingTransaction({ id: txId }))
+ store.dispatch(enqueueSnackbar(NOTIFICATIONS.TX_PENDING_FAILED_MSG))
+ })
}
const monitorAllTxs = async (): Promise => {
From eb5a78ac4a279a8420b89538a679c562606ab099 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 22 Mar 2022 09:04:26 +0100
Subject: [PATCH 06/14] Chore: remove storybook (#3707)
---
package.json | 7 -
.../AppLayout/AppLayout.stories.tsx | 59 -
.../Sidebar/SafeHeader/index.stories.tsx | 18 -
.../AppLayout/Sidebar/index.stories.tsx | 52 -
src/components/Divider/divider.stories.tsx | 25 -
src/components/List/list.stories.tsx | 35 -
src/components/Modal/index.stories.tsx | 174 --
.../Apps/components/AppCard/index.stories.tsx | 31 -
yarn.lock | 2773 +----------------
9 files changed, 103 insertions(+), 3071 deletions(-)
delete mode 100644 src/components/AppLayout/AppLayout.stories.tsx
delete mode 100644 src/components/AppLayout/Sidebar/SafeHeader/index.stories.tsx
delete mode 100644 src/components/AppLayout/Sidebar/index.stories.tsx
delete mode 100644 src/components/Divider/divider.stories.tsx
delete mode 100644 src/components/List/list.stories.tsx
delete mode 100644 src/components/Modal/index.stories.tsx
delete mode 100644 src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
diff --git a/package.json b/package.json
index 19cdefbf0e..2842c4e08c 100644
--- a/package.json
+++ b/package.json
@@ -38,8 +38,6 @@
"test:coverage": "REACT_APP_ENV=test yarn test --coverage --watchAll=false",
"test:ci": "REACT_APP_ENV=test yarn test --ci --coverage --json --watchAll=false --testLocationInResults --runInBand --outputFile=jest.results.json",
"update-mocks": "./scripts/update-mocks.sh",
- "storybook": "start-storybook -p 9009 -s public",
- "build-storybook": "build-storybook -s public",
"sentry-upload-sourcemaps": "sentry-cli --auth-token $SENTRY_AUTH_TOKEN releases -o $SENTRY_ORG -p $SENTRY_PROJECT files $npm_package_version upload-sourcemaps ./build/static/js/",
"prepare": "husky install"
},
@@ -151,11 +149,6 @@
"@gnosis.pm/safe-core-sdk-types": "1.0.0",
"@rescripts/cli": "^0.0.16",
"@sentry/cli": "^1.67.2",
- "@storybook/addon-actions": "^6.3.8",
- "@storybook/addon-links": "^6.3.8",
- "@storybook/addons": "^6.3.8",
- "@storybook/preset-create-react-app": "^3.1.5",
- "@storybook/react": "6.0.0",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^12.1.2",
"@testing-library/react-hooks": "^7.0.2",
diff --git a/src/components/AppLayout/AppLayout.stories.tsx b/src/components/AppLayout/AppLayout.stories.tsx
deleted file mode 100644
index b0d0d896a9..0000000000
--- a/src/components/AppLayout/AppLayout.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Icon } from '@gnosis.pm/safe-react-components'
-import { ListItemType } from 'src/components/List'
-import Layout from '.'
-
-export default {
- title: 'Layout',
- component: Layout,
- parameters: {
- componentSubtitle: 'It provides a custom layout used in Safe',
- },
-}
-
-const items: ListItemType[] = [
- {
- label: 'Assets',
- icon: console.log}
- onReceiveClick={() => console.log}
- onNewTransactionClick={() => console.log}
- >
- The content goes here
-
- )
-}
diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.stories.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.stories.tsx
deleted file mode 100644
index 11b16666d4..0000000000
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import WalletInfo from './index'
-
-export default {
- title: 'Layout/WalletInfo',
- component: WalletInfo,
-}
-
-export const SimpleLayout = (): React.ReactElement => (
- ({})}
- onReceiveClick={console.log}
- onNewTransactionClick={console.log}
- />
-)
diff --git a/src/components/AppLayout/Sidebar/index.stories.tsx b/src/components/AppLayout/Sidebar/index.stories.tsx
deleted file mode 100644
index c85e588f73..0000000000
--- a/src/components/AppLayout/Sidebar/index.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Sidebar from './index'
-import { ListItemType } from 'src/components/List'
-import { Icon } from '@gnosis.pm/safe-react-components'
-
-export default {
- title: 'Layout/Sidebar',
- component: Sidebar,
-}
-
-const items: ListItemType[] = [
- {
- label: 'Assets',
- icon: console.log}
- />
-)
diff --git a/src/components/Divider/divider.stories.tsx b/src/components/Divider/divider.stories.tsx
deleted file mode 100644
index ad9534188d..0000000000
--- a/src/components/Divider/divider.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Divider from './index'
-
-export default {
- title: 'Data Display/Divider',
- component: Divider,
- parameters: {
- componentSubtitle: 'Used to separate content.',
- },
-}
-
-export const Horizontal = (): React.ReactElement => (
- <>
- Some content
-
diff --git a/src/components/Modal/index.stories.tsx b/src/components/Modal/index.stories.tsx
deleted file mode 100644
index 76f29db0ba..0000000000
--- a/src/components/Modal/index.stories.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { Text } from '@gnosis.pm/safe-react-components'
-import { ReactElement, useState } from 'react'
-
-import TextField from 'src/components/forms/TextField'
-import GnoField from 'src/components/forms/Field'
-import GnoForm from 'src/components/forms/GnoForm'
-import { required } from 'src/components/forms/validator'
-
-import { Modal } from '.'
-
-export default {
- title: 'Modal',
- component: Modal,
- parameters: {
- children: 'The body of the modal or the whole modal being composed by `Modal.Header` and `Modal.Footer` components',
- title: 'The title, useful for screen readers',
- description: 'A description, useful for screen readers',
- handleClose:
- 'A callback which will be called when an action to close the modal is triggered (Esc, clicking outside, etc)',
- open: 'If `true`, the modal will be displayed. Hidden otherwise.',
- },
- compositionElements: [
- {
- title: 'Modal.Header',
- component: {} ,
- description: 'safe-react-component exposed with a few styles added to personalize the modal header',
- },
- ],
- },
- {
- title: 'Modal.Header',
- component: {} ,
- parameters: {
- children: 'whatever is required to be rendered in the footer. Usually buttons.',
- noPadding: 'a flag that will set padding to 0 (zero) in case it is needed',
- },
- },
- {
- title: 'Modal.Footer',
- component: {} ,
- parameters: {
- children: 'whatever is required to be rendered in the footer. Usually buttons.',
- },
- compositionElements: [
- {
- title: 'Modal.Footer.Buttons',
- component:
- {/* header */}
-
- {title}
-
-
-
- {() => (
- <>
- {/* body */}
- {children}
-
- {/* footer */}
-
-
-
- )}
-
-
-)
-
-const Username = () => (
-
-)
-
-export const FormModal = (): ReactElement => {
- const [isOpen, setIsOpen] = useState(false)
-
- const handleClose = () => {
- setIsOpen(false)
- console.log('modal closed')
- }
-
- const handleSubmit = (values) => {
- alert(JSON.stringify(values, null, 2))
- console.log('form submitted', values)
- handleClose()
- }
-
- return (
-
-
- {/* Modal with Form */}
-
- {/* Form Fields */}
-
-
- )
-}
-
-export const RemoveSomething = (): ReactElement => {
- const [isOpen, setIsOpen] = useState(false)
- const title = 'Remove Something'
-
- const handleClose = () => {
- setIsOpen(false)
- console.log('modal closed')
- }
-
- const handleSubmit = () => {
- alert('Something was removed')
- handleClose()
- }
-
- return (
-
-
- {/* Modal */}
-
- {/* Header */}
-
- {title}
-
-
- {/* Body */}
-
- You are about to remove something
-
-
- {/* Footer */}
-
-
-
-
- )
-}
diff --git a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
deleted file mode 100644
index e618bd2d1b..0000000000
--- a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { SafeAppAccessPolicyTypes } from '@gnosis.pm/safe-react-gateway-sdk'
-import { FETCH_STATUS } from 'src/utils/requests'
-import { getEmptySafeApp } from '../../utils'
-import { AppCard, AddCustomAppCard } from './index'
-
-export default {
- title: 'Apps/AppCard',
- component: AppCard,
-}
-
-export const Loading = (): React.ReactElement => {}} />
-
-export const LoadedApp = (): React.ReactElement => (
- => {
+ await act(() => {
+ callback()
+ return new Promise((reslolve) => {
+ setTimeout(reslolve, 0)
+ })
+ })
+}
+
describe('useEstimateSafeTxGas', () => {
- it(`should return 0 if it is not a tx creation`, () => {
+ it(`should return 0 if it is not a tx creation`, async () => {
+ const spy = jest.spyOn(gas, 'estimateSafeTxGas')
+
+ await actResolve(() => {
+ const { result } = renderHook(() =>
+ useEstimateSafeTxGas({
+ txAmount: '',
+ txData: '0x',
+ txRecipient: '',
+ isCreation: false,
+ isRejectTx: false,
+ }),
+ )
+
+ expect(result.current).toBe('0')
+ })
+
+ expect(spy).toHaveBeenCalledTimes(0)
+ })
+
+ it(`should return 0 if it is a reject tx`, async () => {
const spy = jest.spyOn(gas, 'estimateSafeTxGas')
- const { result } = renderHook(() =>
- useEstimateSafeTxGas({
- txAmount: '',
- txData: '',
- txRecipient: '',
- isCreation: false,
- isRejectTx: false,
- }),
- )
- expect(result.current).toBe('0')
+ await actResolve(() => {
+ const { result } = renderHook(() =>
+ useEstimateSafeTxGas({
+ txAmount: '',
+ txData: '0x',
+ txRecipient: '',
+ isCreation: false,
+ isRejectTx: true,
+ }),
+ )
+ expect(result.current).toBe('0')
+ })
+
expect(spy).toHaveBeenCalledTimes(0)
})
- it(`should return 0 if it is a reject tx`, () => {
+ it(`should return 0 if tx data is not passed`, async () => {
const spy = jest.spyOn(gas, 'estimateSafeTxGas')
- const { result } = renderHook(() =>
- useEstimateSafeTxGas({
- txAmount: '',
- txData: '',
- txRecipient: '',
- isCreation: false,
- isRejectTx: true,
- }),
- )
- expect(result.current).toBe('0')
+ await actResolve(() => {
+ const { result } = renderHook(() =>
+ useEstimateSafeTxGas({
+ txAmount: '',
+ txData: '',
+ txRecipient: '',
+ isCreation: true,
+ isRejectTx: false,
+ }),
+ )
+
+ expect(result.current).toBe('0')
+ })
+
expect(spy).toHaveBeenCalledTimes(0)
})
- it(`calls estimateSafeTxGas if it is a tx creation`, () => {
+ it(`calls estimateSafeTxGas if it is a tx creation`, async () => {
const spy = jest.spyOn(gas, 'estimateSafeTxGas')
- renderHook(() =>
- useEstimateSafeTxGas({
- txAmount: '',
- txData: '',
- txRecipient: '',
- isCreation: true,
- isRejectTx: false,
- }),
- )
+ await actResolve(() => {
+ renderHook(() =>
+ useEstimateSafeTxGas({
+ txAmount: '',
+ txData: '0x',
+ txRecipient: '',
+ isCreation: true,
+ isRejectTx: false,
+ }),
+ )
+ })
+
expect(spy).toHaveBeenCalledTimes(1)
})
- it(`returns 0 if estimateSafeTxGas throws`, () => {
+ it(`returns 0 if estimateSafeTxGas throws`, async () => {
const spy = jest.spyOn(gas, 'estimateSafeTxGas').mockImplementation(() => {
throw new Error()
})
- const { result } = renderHook(() =>
- useEstimateSafeTxGas({
- txAmount: '',
- txData: '',
- txRecipient: '',
- isCreation: true,
- isRejectTx: false,
- }),
- )
+ await actResolve(() => {
+ const { result } = renderHook(() =>
+ useEstimateSafeTxGas({
+ txAmount: '',
+ txData: '0x',
+ txRecipient: '',
+ isCreation: true,
+ isRejectTx: false,
+ }),
+ )
+ expect(result.current).toBe('0')
+ })
+
expect(spy).toHaveBeenCalledTimes(1)
- expect(result.current).toBe('0')
})
})
diff --git a/src/logic/hooks/useAsync.ts b/src/logic/hooks/useAsync.ts
new file mode 100644
index 0000000000..c135ba510f
--- /dev/null
+++ b/src/logic/hooks/useAsync.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+
+type AsyncResult = {
+ error: Error | undefined
+ result: T | undefined
+}
+
+const useAsync = (asyncCall: () => Promise): AsyncResult => {
+ const [asyncVal, setAsyncVal] = useState()
+ const [err, setErr] = useState()
+
+ useEffect(() => {
+ let isCurrent = true
+
+ setAsyncVal(undefined)
+ setErr(undefined)
+
+ asyncCall()
+ .then((val: T) => {
+ if (isCurrent) setAsyncVal(val)
+ })
+ .catch((error) => {
+ if (isCurrent) setErr(error)
+ })
+
+ return () => {
+ isCurrent = false
+ }
+ }, [asyncCall])
+
+ return { error: err, result: asyncVal }
+}
+
+export default useAsync
diff --git a/src/logic/hooks/useEstimateSafeTxGas.tsx b/src/logic/hooks/useEstimateSafeTxGas.tsx
index 636f227e00..c27a0469ee 100644
--- a/src/logic/hooks/useEstimateSafeTxGas.tsx
+++ b/src/logic/hooks/useEstimateSafeTxGas.tsx
@@ -1,9 +1,10 @@
import { Operation } from '@gnosis.pm/safe-react-gateway-sdk'
-import { useEffect, useState } from 'react'
+import { useCallback } from 'react'
import { useSelector } from 'react-redux'
import { estimateSafeTxGas } from 'src/logic/safe/transactions/gas'
import { currentSafe } from 'src/logic/safe/store/selectors'
+import useAsync from 'src/logic/hooks/useAsync'
type UseEstimateSafeTxGasProps = {
isCreation: boolean
@@ -22,30 +23,25 @@ export const useEstimateSafeTxGas = ({
txAmount,
operation,
}: UseEstimateSafeTxGasProps): string => {
- const [safeTxGasEstimation, setSafeTxGasEstimation] = useState('0')
+ const defaultEstimation = '0'
const { address: safeAddress, currentVersion: safeVersion } = useSelector(currentSafe) ?? {}
- useEffect(() => {
- if (!isCreation || isRejectTx) return
- const estimateSafeTxGasCall = async () => {
- try {
- const safeTxGasEstimation = await estimateSafeTxGas(
- {
- safeAddress,
- txData,
- txRecipient,
- txAmount: txAmount || '0',
- operation: operation || Operation.CALL,
- },
- safeVersion,
- )
- setSafeTxGasEstimation(safeTxGasEstimation)
- } catch (error) {
- console.warn(error.message)
- }
- }
- estimateSafeTxGasCall()
+ const requestSafeTxGas = useCallback((): Promise => {
+ if (!isCreation || isRejectTx || !txData) return Promise.resolve(defaultEstimation)
+
+ return estimateSafeTxGas(
+ {
+ safeAddress,
+ txData,
+ txRecipient,
+ txAmount: txAmount || '0',
+ operation: operation || Operation.CALL,
+ },
+ safeVersion,
+ )
}, [isCreation, isRejectTx, operation, safeAddress, safeVersion, txAmount, txData, txRecipient])
- return safeTxGasEstimation
+ const { result } = useAsync(requestSafeTxGas)
+
+ return result || defaultEstimation
}
diff --git a/src/logic/hooks/useRecommendedNonce.tsx b/src/logic/hooks/useRecommendedNonce.tsx
index a820c60a15..a4656fe848 100644
--- a/src/logic/hooks/useRecommendedNonce.tsx
+++ b/src/logic/hooks/useRecommendedNonce.tsx
@@ -1,36 +1,19 @@
-import { SafeTransactionEstimation } from '@gnosis.pm/safe-react-gateway-sdk'
-import { useEffect, useState } from 'react'
+import { useCallback } from 'react'
import { useSelector } from 'react-redux'
import { getRecommendedNonce } from 'src/logic/safe/api/fetchSafeTxGasEstimation'
import { getLastTxNonce } from 'src/logic/safe/store/selectors/gatewayTransactions'
+import useAsync from 'src/logic/hooks/useAsync'
const useRecommendedNonce = (safeAddress: string): number => {
- const lastTxNonce = useSelector(getLastTxNonce)
- const [recommendedNonce, setRecommendedNonce] = useState(lastTxNonce ? lastTxNonce + 1 : 0)
+ const lastTxNonce = useSelector(getLastTxNonce) || -1
- useEffect(() => {
- let isCurrent = true
+ const getNonce = useCallback(() => {
+ return getRecommendedNonce(safeAddress)
+ }, [safeAddress])
- const fetchRecommendedNonce = async () => {
- let recommendedNonce: SafeTransactionEstimation['recommendedNonce']
- try {
- recommendedNonce = await getRecommendedNonce(safeAddress)
- } catch (e) {
- return
- }
+ const { result } = useAsync(getNonce)
- if (isCurrent) {
- setRecommendedNonce(recommendedNonce)
- }
- }
- fetchRecommendedNonce()
-
- return () => {
- isCurrent = false
- }
- }, [lastTxNonce, safeAddress])
-
- return recommendedNonce
+ return result == null ? lastTxNonce + 1 : result
}
export default useRecommendedNonce
diff --git a/src/logic/safe/transactions/gas.ts b/src/logic/safe/transactions/gas.ts
index d24456f24a..cc92804af3 100644
--- a/src/logic/safe/transactions/gas.ts
+++ b/src/logic/safe/transactions/gas.ts
@@ -116,7 +116,11 @@ export const checkTransactionExecution = async ({
from,
gas: gasLimit,
})
- .catch(() => false)
+ .then(() => true)
+ .catch((e) => {
+ console.warn('Transaction will fail\n\n', e)
+ return false
+ })
}
export const isMaxFeeParam = (): boolean => {
diff --git a/src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx b/src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx
index 7cc9e7c938..d3c092340d 100644
--- a/src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx
+++ b/src/routes/safe/components/Transactions/helpers/TxModalWrapper/index.tsx
@@ -125,6 +125,7 @@ export const TxModalWrapper = ({
txAmount: txValue,
operation,
})
+ if (safeTxGas == null) safeTxGas = safeTxGasEstimation
const { gasCostFormatted, gasPriceFormatted, gasMaxPrioFeeFormatted, gasLimit, txEstimationExecutionStatus } =
useEstimateTransactionGas({
@@ -150,7 +151,7 @@ export const TxModalWrapper = ({
const newGasLimit = txParameters.ethGasLimit
const oldMaxPrioFee = gasMaxPrioFeeFormatted
const newMaxPrioFee = txParameters.ethMaxPrioFee
- const oldSafeTxGas = safeTxGasEstimation
+ const oldSafeTxGas = safeTxGas
const newSafeTxGas = txParameters.safeTxGas
if (oldGasPrice !== newGasPrice) {
@@ -192,7 +193,7 @@ export const TxModalWrapper = ({
ethGasLimit={gasLimit}
ethGasPrice={gasPriceFormatted}
ethMaxPrioFee={gasMaxPrioFeeFormatted}
- safeTxGas={safeTxGasEstimation}
+ safeTxGas={safeTxGas}
safeNonce={txNonce}
parametersStatus={parametersStatus}
closeEditModalCallback={onEditClose}
diff --git a/src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx b/src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx
index 255e11fa3d..be814b4350 100644
--- a/src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx
+++ b/src/routes/safe/components/Transactions/helpers/TxParametersDetail/index.tsx
@@ -118,15 +118,19 @@ export const TxParametersDetail = ({
useEffect(() => {
if (Number.isNaN(safeNonceNumber) || safeNonceNumber === nonce) {
+ setIsAccordionExpanded(false)
+ setIsTxNonceOutOfOrder(false)
return
}
if (lastQueuedTxNonce === undefined && safeNonceNumber !== nonce) {
setIsAccordionExpanded(true)
setIsTxNonceOutOfOrder(true)
+ return
}
if (lastQueuedTxNonce && safeNonceNumber !== lastQueuedTxNonce + 1) {
setIsAccordionExpanded(true)
setIsTxNonceOutOfOrder(true)
+ return
}
}, [lastQueuedTxNonce, nonce, safeNonceNumber])
From e897403463a633e020ea3b01939aee04595c9f28 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 22 Mar 2022 10:34:02 +0100
Subject: [PATCH 08/14] Bump version to 3.22.1
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 2842c4e08c..15e7dac256 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "safe-react",
- "version": "3.22.0",
+ "version": "3.22.1",
"description": "Allowing crypto users manage funds in a safer way",
"website": "https://github.com/gnosis/safe-react#readme",
"bugs": {
From 1b1ecded1bfe14ace58622caecf36780afecf994 Mon Sep 17 00:00:00 2001
From: Aaron Cook
Date: Tue, 22 Mar 2022 14:18:48 +0100
Subject: [PATCH 09/14] fix: reject Safe creation if reverted (#3692)
* fix: clear pending status upon failure
* fix: rename function
* fix: don't throw
* fix: resolve spy
* fix: reject Safe creation if reverted
* fix: don't check receipt + set `txId`
* fix: don't check for reversion on `promiEvent`
* fix: throw `Error` object + adjust comment
* fix: throw `Error` object + adjust comment
* fix: add return
---
.../safe/transactions/__tests__/pendingTxMonitor.test.ts | 2 +-
.../CreateSafePage/components/SafeCreationProcess.tsx | 9 +++++++++
2 files changed, 10 insertions(+), 1 deletion(-)
diff --git a/src/logic/safe/transactions/__tests__/pendingTxMonitor.test.ts b/src/logic/safe/transactions/__tests__/pendingTxMonitor.test.ts
index c017424bd6..c3e84fc816 100644
--- a/src/logic/safe/transactions/__tests__/pendingTxMonitor.test.ts
+++ b/src/logic/safe/transactions/__tests__/pendingTxMonitor.test.ts
@@ -181,7 +181,7 @@ describe('PendingTxMonitor', () => {
}
})
- it('checks each pending tx', async () => {
+ it.only('checks each pending tx', async () => {
jest.spyOn(store.store, 'getState').mockImplementation(() => ({
pendingTransactions: {
'4': {
diff --git a/src/routes/CreateSafePage/components/SafeCreationProcess.tsx b/src/routes/CreateSafePage/components/SafeCreationProcess.tsx
index 19dc60ca51..6c581e14a5 100644
--- a/src/routes/CreateSafePage/components/SafeCreationProcess.tsx
+++ b/src/routes/CreateSafePage/components/SafeCreationProcess.tsx
@@ -40,6 +40,7 @@ import { getExplorerInfo, getShortName } from 'src/config'
import { createSendParams } from 'src/logic/safe/transactions/gas'
import { currentChainId } from 'src/logic/config/store/selectors'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
+import { didTxRevert } from 'src/logic/safe/store/actions/transactions/utils/transactionHelpers'
export const InlinePrefixedEthHashInfo = styled(PrefixedEthHashInfo)`
display: inline-flex;
@@ -136,6 +137,13 @@ const createNewSafe = (userAddress: string, onHash: (hash: string) => void): Pro
// Monitor the latest block to find a potential speed-up tx
txMonitor({ sender: userAddress, hash: txHash, data: deploymentTx.encodeABI() })
.then((txReceipt) => {
+ // txMonitor returns the txReceipt from `getTransactionReceipt` which doesn't throw
+ // if it was reverted. We must check the status of the receipt manually.
+ if (didTxRevert(txReceipt)) {
+ reject(new Error('Sped-up tx reverted'))
+ return
+ }
+
console.log('Sped-up tx mined:', txReceipt)
resolve(txReceipt)
})
@@ -148,6 +156,7 @@ const createNewSafe = (userAddress: string, onHash: (hash: string) => void): Pro
resolve(txReceipt)
})
.catch((error) => {
+ // `deploymentTx` will throw if the transaction was reverted
reject(parseError(error))
})
})
From 5d41c2f5c5ddaaa07ffcf47941ae37818771f399 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 22 Mar 2022 15:25:26 +0100
Subject: [PATCH 10/14] Feat: add AppStore button in the footer (#3710)
* Feat: add AppStore button in the footer
* Optimize icons with svgo
* Hide footer on Safe Apps
* Pairing referral link
---
src/assets/icons/alert.svg | 7 +----
src/assets/icons/apps.svg | 14 +--------
src/assets/icons/appstore-alt.svg | 1 +
src/assets/icons/appstore.svg | 1 +
src/assets/icons/check.svg | 4 +--
src/assets/icons/check_bg.svg | 7 +----
src/assets/icons/error.svg | 7 +----
src/assets/icons/info.svg | 8 +----
src/assets/icons/info_red.svg | 23 +-------------
src/assets/icons/qrcode.svg | 27 +----------------
src/assets/icons/shape.svg | 4 +--
src/components/AppLayout/Footer/index.tsx | 4 +++
.../ProviderDetails/ConnectDetails.tsx | 3 --
.../ProviderDetails/PairingDetails.tsx | 9 ++----
src/components/AppLayout/index.tsx | 8 ++---
src/components/AppstoreButton/index.tsx | 30 +++++++++++++++++++
16 files changed, 51 insertions(+), 106 deletions(-)
create mode 100644 src/assets/icons/appstore-alt.svg
create mode 100644 src/assets/icons/appstore.svg
create mode 100644 src/components/AppstoreButton/index.tsx
diff --git a/src/assets/icons/alert.svg b/src/assets/icons/alert.svg
index 9af2be1607..283837510d 100644
--- a/src/assets/icons/alert.svg
+++ b/src/assets/icons/alert.svg
@@ -1,6 +1 @@
-
+
\ No newline at end of file
diff --git a/src/assets/icons/apps.svg b/src/assets/icons/apps.svg
index 6f81b8cfa4..087865d9a1 100644
--- a/src/assets/icons/apps.svg
+++ b/src/assets/icons/apps.svg
@@ -1,13 +1 @@
-
-
+
\ No newline at end of file
diff --git a/src/assets/icons/appstore-alt.svg b/src/assets/icons/appstore-alt.svg
new file mode 100644
index 0000000000..a21ad045c4
--- /dev/null
+++ b/src/assets/icons/appstore-alt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/appstore.svg b/src/assets/icons/appstore.svg
new file mode 100644
index 0000000000..1dbcc9769e
--- /dev/null
+++ b/src/assets/icons/appstore.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg
index e644005002..50e78bf65c 100644
--- a/src/assets/icons/check.svg
+++ b/src/assets/icons/check.svg
@@ -1,3 +1 @@
-
+
\ No newline at end of file
diff --git a/src/assets/icons/check_bg.svg b/src/assets/icons/check_bg.svg
index ad3cd87b77..54d22ac9ce 100644
--- a/src/assets/icons/check_bg.svg
+++ b/src/assets/icons/check_bg.svg
@@ -1,6 +1 @@
-
+
\ No newline at end of file
diff --git a/src/assets/icons/error.svg b/src/assets/icons/error.svg
index d8fce121ac..af37a45333 100644
--- a/src/assets/icons/error.svg
+++ b/src/assets/icons/error.svg
@@ -1,6 +1 @@
-
+
\ No newline at end of file
diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg
index 9f7502e4bb..f9dab9d9c9 100644
--- a/src/assets/icons/info.svg
+++ b/src/assets/icons/info.svg
@@ -1,7 +1 @@
-
+
\ No newline at end of file
diff --git a/src/assets/icons/info_red.svg b/src/assets/icons/info_red.svg
index 3623e9ddf9..0ce82ac206 100644
--- a/src/assets/icons/info_red.svg
+++ b/src/assets/icons/info_red.svg
@@ -1,22 +1 @@
-
-
+
\ No newline at end of file
diff --git a/src/assets/icons/qrcode.svg b/src/assets/icons/qrcode.svg
index 399e07a1e8..9cd153c881 100644
--- a/src/assets/icons/qrcode.svg
+++ b/src/assets/icons/qrcode.svg
@@ -1,26 +1 @@
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/icons/shape.svg b/src/assets/icons/shape.svg
index 318ccaba20..9ab350f5dc 100644
--- a/src/assets/icons/shape.svg
+++ b/src/assets/icons/shape.svg
@@ -1,3 +1 @@
-
+
\ No newline at end of file
diff --git a/src/components/AppLayout/Footer/index.tsx b/src/components/AppLayout/Footer/index.tsx
index 3375ee5f04..c22861a3d2 100644
--- a/src/components/AppLayout/Footer/index.tsx
+++ b/src/components/AppLayout/Footer/index.tsx
@@ -2,6 +2,7 @@ import { makeStyles } from '@material-ui/core/styles'
import cn from 'classnames'
import * as React from 'react'
import { useDispatch } from 'react-redux'
+import AppstoreButton from 'src/components/AppstoreButton'
import GnoButtonLink from 'src/components/layout/ButtonLink'
import Link from 'src/components/layout/Link'
@@ -16,6 +17,7 @@ const useStyles = makeStyles({
flexShrink: '1',
flexWrap: 'wrap',
justifyContent: 'center',
+ alignItems: 'center',
margin: '0 auto',
maxWidth: '100%',
padding: `20px ${sm} 20px`,
@@ -87,6 +89,8 @@ const Footer = (): React.ReactElement => {
>
{appVersion}
+ |
+ }): React
-
- 
-
+
)
diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index ca0f719680..9b99ef3bf2 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -8,7 +8,7 @@ import Header from './Header'
import Footer from './Footer'
import Sidebar from './Sidebar'
import { MobileNotSupported } from './MobileNotSupported'
-import { SAFE_ROUTES, WELCOME_ROUTE } from 'src/routes/routes'
+import { SAFE_ROUTES } from 'src/routes/routes'
import useDarkMode from 'src/logic/hooks/useDarkMode'
const Container = styled.div`
@@ -98,8 +98,8 @@ const Layout: React.FC = ({
const closeMobileNotSupported = () => setMobileNotSupportedClosed(true)
- const hasFooter = !!matchPath(pathname, {
- path: [SAFE_ROUTES.SETTINGS, WELCOME_ROUTE],
+ const noFooter = !!matchPath(pathname, {
+ path: [SAFE_ROUTES.APPS],
})
return (
@@ -122,7 +122,7 @@ const Layout: React.FC = ({
{children}
- {hasFooter && }
+ {!noFooter && }
diff --git a/src/components/AppstoreButton/index.tsx b/src/components/AppstoreButton/index.tsx
new file mode 100644
index 0000000000..a4310c551a
--- /dev/null
+++ b/src/components/AppstoreButton/index.tsx
@@ -0,0 +1,30 @@
+import { ReactElement } from 'react'
+import AppstoreDarkBadge from 'src/assets/icons/appstore.svg'
+import AppstoreLightBadge from 'src/assets/icons/appstore-alt.svg'
+
+enum LINKS {
+ footer = 'https://apps.apple.com/app/apple-store/id1515759131?pt=119497694&ct=Web%20App%20Footer&mt=8',
+ pairing = 'https://apps.apple.com/app/apple-store/id1515759131?pt=119497694&ct=Web%20App%20Connect&mt=8',
+}
+
+type AppstoreButtonProps = {
+ light?: boolean
+ placement: 'footer' | 'pairing'
+}
+
+const AppstoreButton = (props: AppstoreButtonProps): ReactElement => {
+ return (
+
+ 
+
+ )
+}
+
+export default AppstoreButton
From 7143f7cd0ecc584efb4961665bc50161b65c9d99 Mon Sep 17 00:00:00 2001
From: Ino Murko
Date: Tue, 22 Mar 2022 17:12:18 +0000
Subject: [PATCH 11/14] merge fix
---
src/components/CookiesBanner/index.tsx | 69 --------------------------
1 file changed, 69 deletions(-)
diff --git a/src/components/CookiesBanner/index.tsx b/src/components/CookiesBanner/index.tsx
index b7f00ff6ec..2d7fc2c069 100644
--- a/src/components/CookiesBanner/index.tsx
+++ b/src/components/CookiesBanner/index.tsx
@@ -298,75 +298,6 @@ const CookiesBanner = isDesktop
{!localSupportAndUpdates && !isSafeAppView && (
openBanner(COOKIE_IDS.INTERCOM)} />
)}
-<<<<<<< HEAD
-
- We use cookies to provide you with the best experience and to help improve our website and application.
- Please read our{' '}
-
- Cookie Policy
- {' '}
- for more information. By clicking "Accept all", you agree to the storing of cookies on your device
- to enhance site navigation, analyze site usage and provide customer support.
-
-
-
-
+
+ {nftLoaded ? 'No collectibles available' : 'Loading collectibles...'}
+
+
+
- {/* No collectibles */}
- {nftAssetsFromNftTokens.length === 0 && (
- No collectibles available
- )}
+ <>
+ {
+ // Larger collectible lists can cause this to be initially undefined
+ if (!nftAsset) {
+ return null
+ }
- {/* collectibles List*/}
- {nftAssetsFromNftTokens.length > 0 &&
- nftAssetsFromNftTokens.map((nftAsset) => {
- return (
-
-
- )
- })}
-
+ return (
+
-
-
- {nftAsset.name}
- -
- {nftTokens
- .filter(({ assetAddress }) => nftAsset.address === assetAddress)
- .map((nftToken) => (
- - handleItemSend(nftToken)}
- />
- ))}
-
-
+
+
+ {nftAsset.name}
+ +
+ {nftTokens
+ .filter(({ assetAddress }) => nftAsset.address === assetAddress)
+ .map((nftToken, i) => (
+ - handleItemSend(nftToken)}
+ />
+ ))}
+
+ The content goes here
- Some content
- Some content2
-
-)
-
-export const Arrow = (): React.ReactElement => (
- <>
- Some content
- Some content2
-
-)
diff --git a/src/components/List/list.stories.tsx b/src/components/List/list.stories.tsx
deleted file mode 100644
index 9c563819c9..0000000000
--- a/src/components/List/list.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import List, { ListItemType } from '.'
-import ListIcon from './ListIcon'
-
-const items: ListItemType[] = [
- {
- label: 'Assets',
- icon:
-
- {/* Modal with Form */}
-
- {/* Form Fields */}
-
-
- )
-}
-
-export const RemoveSomething = (): ReactElement => {
- const [isOpen, setIsOpen] = useState(false)
- const title = 'Remove Something'
-
- const handleClose = () => {
- setIsOpen(false)
- console.log('modal closed')
- }
-
- const handleSubmit = () => {
- alert('Something was removed')
- handleClose()
- }
-
- return (
-
-
- {/* Modal */}
-
- {/* Header */}
-
- {title}
-
-
- {/* Body */}
-
- You are about to remove something
-
-
- {/* Footer */}
-
-
-
-
- )
-}
diff --git a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
deleted file mode 100644
index e618bd2d1b..0000000000
--- a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { SafeAppAccessPolicyTypes } from '@gnosis.pm/safe-react-gateway-sdk'
-import { FETCH_STATUS } from 'src/utils/requests'
-import { getEmptySafeApp } from '../../utils'
-import { AppCard, AddCustomAppCard } from './index'
-
-export default {
- title: 'Apps/AppCard',
- component: AppCard,
-}
-
-export const Loading = (): React.ReactElement => {children}
- {hasFooter && }
+ {!noFooter && }
- We use cookies to provide you with the best experience and to help improve our website and application. - Please read our{' '} - - Cookie Policy - {' '} - for more information. By clicking "Accept all", you agree to the storing of cookies on your device - to enhance site navigation, analyze site usage and provide customer support. -
-
-
-
-
- {/*
-
*/}
-
-
-
-
-
-
-
-
-