feat: basic gnosis pay support

schmanu commented 3 weeks ago

What it solves

Gnosis Pay Safes can not be controlled from the Safe{Wallet} interface. Resolves #

How this PR fixes it

It detects, that you are an owner of a Gnosis Pay Safe.
- Owner of a Gnosis Pay Safe means that your connected wallet is a module in the DelayModifier module of the Safe.
It offers transaction execution for all types of Safe Transactions via that module if you are a Gnosis Pay owner.
It shows a small section highlighting that this is a Gnosis Pay Safe, and that there is a 3 minute delay between queueing and executing the transaction
It supports enqueueing and executing the transaction after 3 minutes

How to test it

Screenshots

Checklist

[x] I've tested the branch on mobile 📱
[x] I've documented how it affects the analytics (if at all) 📊
[ ] I've written a unit/e2e test for it (if applicable) 🧑‍💻

github-actions[bot] commented 3 weeks ago

Branch preview

✅ Deploy successful!

Website: https://feat_gnosis_pay_support--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook: https://feat_gnosis_pay_support--walletweb.review.5afe.dev/storybook/

github-actions[bot] commented 3 weeks ago

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: :white_check_mark: success
- Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions[bot] commented 3 weeks ago

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`1.11 MB` (🟡 +134.08 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/transactions/queue`	`29.14 KB` (🟢 -19 B)	1.14 MB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

github-actions[bot] commented 3 weeks ago

Coverage report

[!CAUTION] Test run failed

St.^{:grey_question:}	Category	Percentage	Covered / Total
🟡	Statements	78.84% (-0.32% 🔻)	11503/14590
🔴	Branches	57.37% (-0.93% 🔻)	2751/4795
🟡	Functions	66.04% (-0.08% 🔻)	1834/2777
🟢	Lines	80.2% (-0.28% 🔻)	10378/12940

Show new covered files 🐣

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :-: | :- | :- | :- | :- | :- | | 🟢 |

`...` / gnosisPayTxsSlice.ts

| 77.78% | 50% | 55.56% | 83.33% | | 🔴 |

`...` / useIsGnosisPayOwner.ts

| 55% | 30.77% | 50% | 56.76% | | 🟢 |

`...` / getGnosisPayTxWarnings.ts

| 100% | 100% | 100% | 100% | | 🔴 |

`...` / GnosisPayExecutionForm.tsx

| 30.86% | 0% | 0% | 32.47% | | 🔴 |

`...` / useGnosisPayDelayModifier.ts

| 29.73% | 0% | 0% | 32.35% | | 🔴 |

`...` / useGnosisPayActions.ts

| 16.67% | 0% | 0% | 18.18% |

Show files with reduced coverage 🔻

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :-: | :- | :- | :- | :- | :- | | 🔴 |

`...` / addedSafesSlice.ts

|

52.63% (-10.53% 🔻)

| 50% |

25% (-16.67% 🔻)

|

54.84% (-12.9% 🔻)

| | 🔴 |

`...` / dispatch.ts

|

38.54% (-0.2% 🔻)

| 34.48% | 26.09% |

37.43% (-0.21% 🔻)

| | 🟢 |

`...` / index.ts

|

93.1% (+1.18% 🔼)

|

82.09% (-2.06% 🔻)

|

95% (-0.45% 🔻)

|

94.19% (+1.33% 🔼)

| | 🟢 |

`...` / index.tsx

|

90% (-4.44% 🔻)

|

35.29% (-58.04% 🔻)

| 100% | 100% | | 🟢 |

`...` / index.tsx

|

95.83% (-0.17% 🔻)

|

90.91% (-1.95% 🔻)

| 100% | 100% | | 🟡 |

`...` / index.tsx

| 68.75% |

41.38% (-3.78% 🔻)

| 42.86% | 67.39% | | 🟢 |

`...` / swaps.ts

|

75% (-25% 🔻)

| 100% | 100% | 100% | | 🟢 |

`...` / useSafeWalletProvider.tsx

|

81.82% (-0.42% 🔻)

|

63.16% (+3.16% 🔼)

|

69.23% (-1.14% 🔻)

|

83.87% (-0.29% 🔻)

| | 🟢 |

`...` / hooks.ts

|

79.44% (-0.56% 🔻)

|

61.82% (-1.34% 🔻)

| 81.82% |

80% (-0.61% 🔻)

| | 🟢 |

`...` / index.tsx

|

83.33% (-16.67% 🔻)

| 0% |

0% (-100% 🔻)

| 100% | | 🟢 |

`...` / index.tsx

|

75% (-25% 🔻)

| 100% |

0% (-100% 🔻)

| 100% | | 🟢 |

`...` / index.tsx

| 96.88% |

91.67% (-0.93% 🔻)

| 100% | 100% | | 🔴 |

`...` / utils.ts

|

41.46% (-9.76% 🔻)

|

27.27% (-9.09% 🔻)

|

14.29% (-14.29% 🔻)

|

44.83% (-6.9% 🔻)

| | 🟢 |

`...` / constants.ts

|

50% (-28.57% 🔻)

| 100% | 100% | 100% | | 🟢 |

`...` / index.tsx

|

88.33% (+0.61% 🔼)

|

74.29% (-1.47% 🔻)

| 60% |

87.5% (+0.71% 🔼)

| | 🔴 |

`...` / index.tsx

|

50% (-7.14% 🔻)

| 0% | 0% |

58.33% (-4.82% 🔻)

| | 🟢 |

`...` / SendAmountBlock.tsx

|

87.5% (-12.5% 🔻)

|

0% (-50% 🔻)

|

0% (-100% 🔻)

| 100% |

Test suite run failed

Failed tests: 5/1433. Failed suites: 3/201.

``` ● Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers. Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation Details: /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@walletconnect/utils/node_modules/uint8arrays/esm/src/index.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){import { compare } from './compare.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14) at Object. (node_modules/@walletconnect/utils/dist/index.cjs.js:1:525) at Object. (src/features/walletconnect/services/WalletConnectWallet.ts:2158:26) at Object. (src/features/walletconnect/services/__tests__/WalletConnectWallet.test.ts:38:69) ``` --- ``` ● Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers. Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation Details: /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@walletconnect/utils/node_modules/uint8arrays/esm/src/index.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){import { compare } from './compare.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14) at Object. (node_modules/@walletconnect/utils/dist/index.cjs.js:1:525) at Object. (node_modules/@walletconnect/core/dist/index.cjs.js:1:428) at Object. (src/features/walletconnect/services/WalletConnectWallet.ts:2152:26) at Object. (src/features/walletconnect/__tests__/WalletConnectContext.test.tsx:13:69) ``` --- ``` ● CheckWallet › renders correctly when the wallet is connected to the right chain and is an owner TypeError: (0 , _useChains.default) is not a function 20 | export const useUrlChainId = (): string | undefined => { 21 | const queryParams = useParams() > 22 | const { configs } = useChains() | ^ 23 | 24 | // Dynamic query params 25 | const query = queryParams && (queryParams.safe || queryParams.chain) ? queryParams : getLocationQuery() at useUrlChainId (src/hooks/useChainId.ts:22:32) at useUrlChainId (src/hooks/useChainId.ts:47:22) at useIsGnosisPayOwner (src/features/gnosispay/hooks/useIsGnosisPayOwner.ts:46:29) at CheckWallet (src/components/common/CheckWallet/index.tsx:32:49) at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18) at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13) at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16) at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14) at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12) at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7) at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20) at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22) at flushActQueue (node_modules/react/cjs/react.development.js:2667:24) at act (node_modules/react/cjs/react.development.js:2582:11) at node_modules/@testing-library/react/dist/act-compat.js:63:25 at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26) at render (node_modules/@testing-library/react/dist/pure.js:246:10) at customRender (src/tests/test-utils.tsx:71:16) at renderButton (src/components/common/CheckWallet/index.test.tsx:34:34) at Object.renderButton (src/components/common/CheckWallet/index.test.tsx:42:27) ● CheckWallet › should disable the button when the wallet is not connected TypeError: (0 , _useChains.default) is not a function 20 | export const useUrlChainId = (): string | undefined => { 21 | const queryParams = useParams() > 22 | const { configs } = useChains() | ^ 23 | 24 | // Dynamic query params 25 | const query = queryParams && (queryParams.safe || queryParams.chain) ? queryParams : getLocationQuery() at useUrlChainId (src/hooks/useChainId.ts:22:32) at useUrlChainId (src/hooks/useChainId.ts:47:22) at useIsGnosisPayOwner (src/features/gnosispay/hooks/useIsGnosisPayOwner.ts:46:29) at CheckWallet (src/components/common/CheckWallet/index.tsx:32:49) at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18) at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13) at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16) at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14) at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12) at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7) at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20) at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22) at flushActQueue (node_modules/react/cjs/react.development.js:2667:24) at act (node_modules/react/cjs/react.development.js:2582:11) at node_modules/@testing-library/react/dist/act-compat.js:63:25 at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26) at render (node_modules/@testing-library/react/dist/pure.js:246:10) at customRender (src/tests/test-utils.tsx:71:16) at renderButton (src/components/common/CheckWallet/index.test.tsx:34:34) at Object.renderButton (src/components/common/CheckWallet/index.test.tsx:51:27) ● CheckWallet › should disable the button when the wallet is connected to the right chain but is not an owner TypeError: (0 , _useChains.default) is not a function 20 | export const useUrlChainId = (): string | undefined => { 21 | const queryParams = useParams() > 22 | const { configs } = useChains() | ^ 23 | 24 | // Dynamic query params 25 | const query = queryParams && (queryParams.safe || queryParams.chain) ? queryParams : getLocationQuery() at useUrlChainId (src/hooks/useChainId.ts:22:32) at useUrlChainId (src/hooks/useChainId.ts:47:22) at useIsGnosisPayOwner (src/features/gnosispay/hooks/useIsGnosisPayOwner.ts:46:29) at CheckWallet (src/components/common/CheckWallet/index.tsx:32:49) at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18) at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13) at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16) at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14) at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12) at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7) at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20) at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22) at flushActQueue (node_modules/react/cjs/react.development.js:2667:24) at act (node_modules/react/cjs/react.development.js:2582:11) at node_modules/@testing-library/react/dist/act-compat.js:63:25 at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26) at render (node_modules/@testing-library/react/dist/pure.js:246:10) at customRender (src/tests/test-utils.tsx:71:16) at renderButton (src/components/common/CheckWallet/index.test.tsx:34:34) at Object.renderButton (src/components/common/CheckWallet/index.test.tsx:63:27) ● CheckWallet › should not disable the button for non-owner spending limit benificiaries TypeError: (0 , _useChains.default) is not a function 20 | export const useUrlChainId = (): string | undefined => { 21 | const queryParams = useParams() > 22 | const { configs } = useChains() | ^ 23 | 24 | // Dynamic query params 25 | const query = queryParams && (queryParams.safe || queryParams.chain) ? queryParams : getLocationQuery() at useUrlChainId (src/hooks/useChainId.ts:22:32) at useUrlChainId (src/hooks/useChainId.ts:47:22) at useIsGnosisPayOwner (src/features/gnosispay/hooks/useIsGnosisPayOwner.ts:46:29) at CheckWallet (src/components/common/CheckWallet/index.tsx:32:49) at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18) at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13) at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16) at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14) at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12) at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7) at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20) at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22) at flushActQueue (node_modules/react/cjs/react.development.js:2667:24) at act (node_modules/react/cjs/react.development.js:2582:11) at node_modules/@testing-library/react/dist/act-compat.js:63:25 at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26) at render (node_modules/@testing-library/react/dist/pure.js:246:10) at customRender (src/tests/test-utils.tsx:71:16) at renderButton (src/components/common/CheckWallet/index.test.tsx:34:34) at Object.renderButton (src/components/common/CheckWallet/index.test.tsx:78:27) ● CheckWallet › should allow non-owners if specified TypeError: (0 , _useChains.default) is not a function 20 | export const useUrlChainId = (): string | undefined => { 21 | const queryParams = useParams() > 22 | const { configs } = useChains() | ^ 23 | 24 | // Dynamic query params 25 | const query = queryParams && (queryParams.safe || queryParams.chain) ? queryParams : getLocationQuery() at useUrlChainId (src/hooks/useChainId.ts:22:32) at useUrlChainId (src/hooks/useChainId.ts:47:22) at useIsGnosisPayOwner (src/features/gnosispay/hooks/useIsGnosisPayOwner.ts:46:29) at CheckWallet (src/components/common/CheckWallet/index.tsx:32:49) at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18) at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13) at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16) at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14) at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12) at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7) at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20) at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22) at flushActQueue (node_modules/react/cjs/react.development.js:2667:24) at act (node_modules/react/cjs/react.development.js:2582:11) at node_modules/@testing-library/react/dist/act-compat.js:63:25 at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26) at render (node_modules/@testing-library/react/dist/pure.js:246:10) at customRender (src/tests/test-utils.tsx:71:16) at Object. (src/components/common/CheckWallet/index.test.tsx:96:33) ```

Report generated by 🧪jest coverage report action from edd052688766f3b67250dbfef2b21faedd968cc2

github-actions[bot] commented 3 weeks ago

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: :white_check_mark: success
- Annotations: 0 total

^{Report generated by eslint-plus-action}

safe-global / safe-wallet-web