feat: redesign approval editor #11011
Annotations
2 errors and 2 warnings
ApprovalEditor > renders a read-only view if the transaction contains signatures:
src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx#L77
TestingLibraryElementError: Unable to find an element with the text: 0x4da7...5e4c. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="container MuiBox-root css-rxas85"
>
<div>
<p
class="MuiTypography-root MuiTypography-body1 css-1hvxk4z-MuiTypography-root"
>
Allow access to tokens?
</p>
<p
class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
>
This allows the spender to spend the specified amount of your tokens.
</p>
</div>
<ul
class="MuiList-root MuiList-padding approvalsList css-h4y409-MuiList-root"
>
<div
class="MuiStack-root css-1ucnu3w-MuiStack-root"
>
<div
class="MuiStack-root approvalField css-19jd1d1-MuiStack-root"
>
<p
class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
>
Spender
</p>
<div>
<div
class="container"
>
<div
class="avatarContainer"
style="width: 24px; height: 24px;"
>
<div
class="icon"
style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woMTc0IDU4JSA0MyUpIiBkPSJNMCwwSDhWOEgweiIvPjxwYXRoIGZpbGw9ImhzbCgyNjkgOTMlIDUwJSkiIGQ9Ik0xLDBoMXYxaC0xek02LDBoMXYxaC0xek0zLDBoMXYxaC0xek00LDBoMXYxaC0xek0xLDFoMXYxaC0xek02LDFoMXYxaC0xek0yLDFoMXYxaC0xek01LDFoMXYxaC0xek0zLDFoMXYxaC0xek00LDFoMXYxaC0xek0wLDJoMXYxaC0xek03LDJoMXYxaC0xek0yLDJoMXYxaC0xek01LDJoMXYxaC0xek0zLDJoMXYxaC0xek00LDJoMXYxaC0xek0wLDNoMXYxaC0xek03LDNoMXYxaC0xek0wLDVoMXYxaC0xek03LDVoMXYxaC0xek0yLDVoMXYxaC0xek01LDVoMXYxaC0xek0wLDZoMXYxaC0xek03LDZoMXYxaC0xek0xLDZoMXYxaC0xek02LDZoMXYxaC0xek0zLDZoMXYxaC0xek00LDZoMXYxaC0xeiIvPjxwYXRoIGZpbGw9ImhzbCgxMTcgOTAlIDU0JSkiIGQ9Ik0xLDJoMXYxaC0xek02LDJoMXYxaC0xek0xLDNoMXYxaC0xek02LDNoMXYxaC0xek0yLDRoMXYxaC0xek01LDRoMXYxaC0xek0zLDRoMXYxaC0xek00LDRoMXYxaC0xeiIvPjwvc3ZnPg==); width: 24px; height: 24px;"
/>
</div>
<div
class="MuiBox-root css-i6bazn"
>
<div
class="addressContainer"
>
<div
class="MuiBox-root css-b5p5gz"
>
<span
aria-label="Copy to clipboard"
class=""
data-mui-internal-clone-element="true"
style="cursor: pointer;"
>
<span>
0x4da7e8cca0af1fc2b1b646a5eaa7f74a2b6f5e4c
</span>
</span>
</div>
<div
class="MuiBox-root css-yjghm1"
>
<button
aria-label=""
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
data-testid="explorer-btn"
href=""
rel="noreferrer"
tabindex="0"
target="_blank"
type="button"
>
<mock-icon
aria-hidden="true"
classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
focusable="false"
/>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<li
class="MuiListItem-root MuiListItem-gutters css-1xt1ued-MuiListItem-root"
data-testid="approval-item"
>
<div
class="MuiStack-root approvalField css-1kq5d21-MuiStack-root"
>
<img
alt="TST"
class="image"
height="32"
src="/images/common/token-placeholder.svg"
/>
<div
class="MuiBox-root css-0"
>
<p
class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
>
Set TST allowance to
</p>
<p
class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
data-testid="token-amount"
>
420
</p>
</div>
</div>
</li>
</div>
</ul>
</div>
</div>
</body>
at Object.getElementError (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/config.js:37:19)
at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
at Object.getByText (/home/runner/work/safe-wallet-web/safe-wallet-web/src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx:103:19)
at Promise.then.completed (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/utils.js:298:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/utils.js:231:10)
at _callCircusTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:316:40)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at _runTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:252:3)
at _runTestsForDescribeBlock (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:126:9)
at _runTestsForDescribeBlock (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:121:9)
at run (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:71:3)
at runAndTransformResultsToJestFormat (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
at jestAdapter (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
at runTestInternal (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/runTest.js:367:16)
at runTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/runTest.js:444:34)
at Object.worker (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/testWorker.js:106:12)
|
ApprovalEditor > renders a form if there are no signatures:
src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx#L106
TestingLibraryElementError: Unable to find an element with the text: 0xbf7f...0bfe. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="container MuiBox-root css-rxas85"
>
<div>
<p
class="MuiTypography-root MuiTypography-body1 css-1hvxk4z-MuiTypography-root"
>
Allow access to tokens?
</p>
<p
class="MuiTypography-root MuiTypography-body2 css-ceebrx-MuiTypography-root"
>
This allows the spender to spend the specified amount of your tokens.
</p>
</div>
<ul
class="MuiList-root MuiList-padding approvalsList css-h4y409-MuiList-root"
>
<div
class="MuiBox-root css-0"
>
<div
class="MuiStack-root css-1ucnu3w-MuiStack-root"
>
<div
class="MuiStack-root approvalField css-19jd1d1-MuiStack-root"
>
<p
class="MuiTypography-root MuiTypography-body2 css-13ba1nr-MuiTypography-root"
>
Spender
</p>
<div>
<div
class="container"
>
<div
class="avatarContainer"
style="width: 24px; height: 24px;"
>
<div
class="icon"
style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woNDIgNzElIDUxJSkiIGQ9Ik0wLDBIOFY4SDB6Ii8+PHBhdGggZmlsbD0iaHNsKDI3NyA4OSUgMzQlKSIgZD0iTTEsMGgxdjFoLTF6TTYsMGgxdjFoLTF6TTIsMGgxdjFoLTF6TTUsMGgxdjFoLTF6TTEsMWgxdjFoLTF6TTYsMWgxdjFoLTF6TTIsMWgxdjFoLTF6TTUsMWgxdjFoLTF6TTMsMmgxdjFoLTF6TTQsMmgxdjFoLTF6TTIsM2gxdjFoLTF6TTUsM2gxdjFoLTF6TTEsNGgxdjFoLTF6TTYsNGgxdjFoLTF6TTIsNGgxdjFoLTF6TTUsNGgxdjFoLTF6TTAsNWgxdjFoLTF6TTcsNWgxdjFoLTF6TTEsNWgxdjFoLTF6TTYsNWgxdjFoLTF6TTMsNWgxdjFoLTF6TTQsNWgxdjFoLTF6TTEsNmgxdjFoLTF6TTYsNmgxdjFoLTF6TTIsNmgxdjFoLTF6TTUsNmgxdjFoLTF6TTMsNmgxdjFoLTF6TTQsNmgxdjFoLTF6TTAsN2gxdjFoLTF6TTcsN2gxdjFoLTF6Ii8+PHBhdGggZmlsbD0iaHNsKDY2IDQyJSA2MCUpIiBkPSJNMSwyaDF2MWgtMXpNNiwyaDF2MWgtMXpNMCwzaDF2MWgtMXpNNywzaDF2MWgtMXpNMyw0aDF2MWgtMXpNNCw0aDF2MWgtMXpNMiw1aDF2MWgtMXpNNSw1aDF2MWgtMXpNMCw2aDF2MWgtMXpNNyw2aDF2MWgtMXpNMSw3aDF2MWgtMXpNNiw3aDF2MWgtMXoiLz48L3N2Zz4=); width: 24px; height: 24px;"
/>
</div>
<div
class="MuiBox-root css-i6bazn"
>
<div
class="addressContainer"
>
<div
class="MuiBox-root css-b5p5gz"
>
<span
aria-label="Copy to clipboard"
class=""
data-mui-internal-clone-element="true"
style="cursor: pointer;"
>
<span>
0xbf7f4c59fccef15c0cfcb1aa7bbf5ca8ef9d0bfe
</span>
</span>
</div>
<div
class="MuiBox-root css-yjghm1"
>
<button
aria-label=""
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1o2vr87-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
data-testid="explorer-btn"
href=""
rel="noreferrer"
tabindex="0"
target="_blank"
type="button"
>
<mock-icon
aria-hidden="true"
classname="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-11dtfly-MuiSvgIcon-root"
focusable="false"
/>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<li
class="MuiListItem-root MuiListItem-gutters css-1xt1ued-MuiListItem-root"
data-testid="approval-item"
>
<div
class="MuiStack-root approvalField css-1kq5d21-MuiStack-root"
>
<div
class="MuiBox-root css-ct9q29"
>
<img
alt="TST"
class="image"
height="32"
src="/images/common/token-placeholder.svg"
/>
</div>
<div
class="MuiAutocomplete-root MuiAutocomplete-fullWidth css-1kkal6p-MuiAutocomplete-root"
>
<div
class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-1z10yd4-MuiFormControl-root-MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-standard css-19tvrld-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
for=":r4:"
id=":r4:-label"
>
Set TST allowance to
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiAutocomplete-inputRoot css-nd4g0u-MuiInputBase-root-MuiInput-root"
>
<input
aria-autocomplete="list"
aria-expanded="false"
aria-invalid="false"
autocapitalize="none"
autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall approvalAmount css-1653i1n-MuiInputBase-input-MuiInput-input"
id=":r4:"
name="approvals.0"
readonly=""
role="combobox"
spellcheck="false"
type="text"
value="420.0"
/>
</div>
</div>
</div>
<span
data-track="modals: Edit approval"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorBorder MuiIconButton-sizeMedium css-xx60qq-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
title="Edit"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1q0g6p-MuiSvgIcon-root-MuiSvgIcon-root"
data-testid="EditOutlinedIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</span>
</div>
</li>
</div>
</div>
</ul>
</div>
</div>
</body>
at Object.getElementError (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/config.js:37:19)
at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at /home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
at Object.getByText (/home/runner/work/safe-wallet-web/safe-wallet-web/src/components/tx/ApprovalEditor/ApprovalEditor.test.tsx:133:19)
at Promise.then.completed (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/utils.js:298:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/utils.js:231:10)
at _callCircusTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:316:40)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at _runTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:252:3)
at _runTestsForDescribeBlock (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:126:9)
at _runTestsForDescribeBlock (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:121:9)
at run (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/run.js:71:3)
at runAndTransformResultsToJestFormat (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
at jestAdapter (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
at runTestInternal (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/runTest.js:367:16)
at runTest (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/runTest.js:444:34)
at Object.worker (/home/runner/work/safe-wallet-web/safe-wallet-web/node_modules/jest-runner/build/testWorker.js:106:12)
|
CLAAssistant
Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20: contributor-assistant/[email protected]. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.
|
CLAAssistant
The following actions uses node12 which is deprecated and will be forced to run on node16: contributor-assistant/[email protected]. For more info: https://github.blog/changelog/2023-06-13-github-actions-all-actions-will-run-on-node16-instead-of-node12-by-default/
|