feat: basic gnosis pay support #3821

schmanu · 2024-06-10T14:52:29Z

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

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

github-actions · 2024-06-10T14:52:43Z

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 · 2024-06-10T14:53:30Z

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: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-06-10T14:56:11Z

📦 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 · 2024-06-10T14:58:43Z

Coverage report

Caution

Test run failed

St.^❔	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.^❔	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.^❔	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.<anonymous>":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.<anonymous> (node_modules/@walletconnect/utils/dist/index.cjs.js:1:525)
      at Object.<anonymous> (src/features/walletconnect/services/WalletConnectWallet.ts:2158:26)
      at Object.<anonymous> (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.<anonymous>":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.<anonymous> (node_modules/@walletconnect/utils/dist/index.cjs.js:1:525)
      at Object.<anonymous> (node_modules/@walletconnect/core/dist/index.cjs.js:1:428)
      at Object.<anonymous> (src/features/walletconnect/services/WalletConnectWallet.ts:2152:26)
      at Object.<anonymous> (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.<anonymous> (src/components/common/CheckWallet/index.test.tsx:96:33)

Report generated by 🧪jest coverage report action from edd0526

github-actions · 2024-06-13T16:23:42Z

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: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

katspaugh · 2024-08-07T09:24:47Z

I'll close this PR because it became abandoned due to product priorities but it's good to have the code as a reference.

Some thoughts on a general approach to modules:

We now have 2 officially supported modules – Spending Limits and Roles & Permissions
Both have custom components integrated in the tx flow
Both have custom analytics events (or rather custom event actions for the regular tx events)
Custom branding (in case of Roles and Gnosis Pay)
It would be great to generalize/formalize this so that each module implements a common interface + parametrized specifics.

feat: basic gnosis pay support

d594f3b

feat: warn about txs that might break gnosis pay

ad88542

schmanu added 2 commits June 14, 2024 12:43

tests: gnosis pay warnings

a6f91b2

feat: better ux for gnosis pay txs

edd0526

katspaugh closed this Aug 7, 2024

github-actions bot locked and limited conversation to collaborators Aug 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: basic gnosis pay support #3821

feat: basic gnosis pay support #3821

schmanu commented Jun 10, 2024

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 13, 2024 •

edited

Loading

katspaugh commented Aug 7, 2024

feat: basic gnosis pay support #3821

feat: basic gnosis pay support #3821

Conversation

schmanu commented Jun 10, 2024

What it solves

How this PR fixes it

How to test it

Screenshots

Checklist

github-actions bot commented Jun 10, 2024 • edited Loading

Branch preview

github-actions bot commented Jun 10, 2024

ESLint Summary View Full Report

github-actions bot commented Jun 10, 2024 • edited Loading

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

⚠️ Global Bundle Size Increased

One Page Changed Size

github-actions bot commented Jun 10, 2024 • edited Loading

Coverage report

Test suite run failed

github-actions bot commented Jun 13, 2024 • edited Loading

ESLint Summary View Full Report

katspaugh commented Aug 7, 2024

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 13, 2024 •

edited

Loading