Skip to content

Commit

Permalink
chore: unify confirmBatch screen (#4217)
Browse files Browse the repository at this point in the history
  • Loading branch information
@clovisdasilvaneto
clovisdasilvaneto authored Oct 18, 2024
1 parent 85de42a commit f3d527b
Show file tree
Hide file tree
Showing 8 changed files with 482 additions and 19 deletions.
7 changes: 1 addition & 6 deletions src/components/tx-flow/flows/ConfirmBatch/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { OperationType } from '@safe-global/safe-core-sdk-types'
import TxLayout from '../../common/TxLayout'
import BatchIcon from '@/public/images/common/batch.svg'
import { useDraftBatch } from '@/hooks/useDraftBatch'
import BatchTxList from '@/components/batch/BatchSidebar/BatchTxList'

type ConfirmBatchProps = {
onSubmit: () => void
Expand All @@ -32,11 +31,7 @@ const ConfirmBatch = ({ onSubmit }: ConfirmBatchProps): ReactElement => {
createMultiSendCallOnlyTx(calls).then(setSafeTx).catch(setSafeTxError)
}, [batchTxs, setSafeTx, setSafeTxError])

return (
<SignOrExecuteForm onSubmit={onSubmit} isBatch>
<BatchTxList txItems={batchTxs} />
</SignOrExecuteForm>
)
return <SignOrExecuteForm onSubmit={onSubmit} isBatch />
}

const ConfirmBatchFlow = (props: ConfirmBatchProps) => {
Expand Down
42 changes: 42 additions & 0 deletions src/components/tx/confirmation-views/BatchTransactions/BatchTransactions.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import type { Meta, StoryObj } from '@storybook/react'
import { Paper, ThemeProvider } from '@mui/material'
import { StoreDecorator } from '@/stories/storeDecorator'
import BatchTransactions from './index'
import { mockedDarftBatch } from './mockData'
import createSafeTheme from '@/components/theme/safeTheme'

const meta = {
component: BatchTransactions,
parameters: {
layout: 'centered',
},
decorators: [
(Story) => {
return (
<StoreDecorator
initialState={{
chains: { data: [{ chainId: '11155111' }] },
batch: {
'11155111': {
'': [mockedDarftBatch[0], mockedDarftBatch[0]],
},
},
}}
>
<ThemeProvider theme={createSafeTheme('dark')}>
<Paper sx={{ padding: 2 }}>
<Story />
</Paper>
</ThemeProvider>
</StoreDecorator>
)
},
],

tags: ['autodocs'],
} satisfies Meta<typeof BatchTransactions>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {}
15 changes: 15 additions & 0 deletions src/components/tx/confirmation-views/BatchTransactions/BatchTransactions.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { render } from '@/tests/test-utils'
import BatchTransactions from '.'
import * as useDraftBatch from '@/hooks/useDraftBatch'
import { mockedDarftBatch } from './mockData'

jest.spyOn(useDraftBatch, 'useDraftBatch').mockImplementation(() => mockedDarftBatch)

describe('BatchTransactions', () => {
it('should render a list of batch transactions', () => {
const { container, getByText } = render(<BatchTransactions />)

expect(container).toMatchSnapshot()
expect(getByText('GnosisSafeProxy')).toBeDefined()
})
})
268 changes: 268 additions & 0 deletions ...nts/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`BatchTransactions should render a list of batch transactions 1`] = `
<div>
<ul
class="MuiList-root MuiList-padding css-lcvy9m-MuiList-root"
>
<li
class="MuiListItem-root MuiListItem-gutters css-1ukg6v4-MuiListItem-root"
>
<div
class="number"
>
1
</div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1qub31g-MuiPaper-root-MuiAccordion-root"
>
<div
aria-expanded="false"
class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters accordion css-1gi6o5u-MuiButtonBase-root-MuiAccordionSummary-root"
role="button"
tabindex="0"
>
<div
class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-c1i83b-MuiAccordionSummary-content"
>
<div
class="MuiBox-root css-mvjamn"
>
<div
class="txType MuiBox-root css-0"
>
<img
alt="Send"
height="16"
src="/images/transactions/outgoing.svg"
width="16"
/>
<span
class="txTypeText"
>
Send
</span>
</div>
<div
class="MuiBox-root css-1rr4qq7"
>
<span
aria-label="1000000000000"
class="container"
data-mui-internal-clone-element="true"
>
<b>
-
1000000000000
</b>
</span>
</div>
</div>
</div>
<div
class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root"
data-testid="ExpandMoreIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
/>
</svg>
</div>
</div>
<div
class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
>
<div
class="MuiAccordion-region"
role="region"
>
<div
class="MuiAccordionDetails-root css-7wcoc8-MuiAccordionDetails-root"
>
<div
class="details"
>
<div
class="MuiBox-root css-1821gv5"
>
<div
class="MuiBox-root css-8v90jo"
>
<p
class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
>
Send
<b>
<span
aria-label="1000000000000"
class="container"
data-mui-internal-clone-element="true"
>
<b>
1000000000000
</b>
</span>
</b>
to:
</p>
</div>
<div
class="MuiBox-root css-7pf6at"
>
<div
class="container"
>
<div
class="avatarContainer"
style="width: 40px; height: 40px;"
>
<div
class="icon"
style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0ib3B0aW1pemVTcGVlZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJoc2woMjI2IDc1JSA0NCUpIiBkPSJNMCwwSDhWOEgweiIvPjxwYXRoIGZpbGw9ImhzbCg3MCA1NyUgNTYlKSIgZD0iTTAsMGgxdjFoLTF6TTcsMGgxdjFoLTF6TTEsMGgxdjFoLTF6TTYsMGgxdjFoLTF6TTIsMGgxdjFoLTF6TTUsMGgxdjFoLTF6TTAsMWgxdjFoLTF6TTcsMWgxdjFoLTF6TTAsMmgxdjFoLTF6TTcsMmgxdjFoLTF6TTEsMmgxdjFoLTF6TTYsMmgxdjFoLTF6TTIsMmgxdjFoLTF6TTUsMmgxdjFoLTF6TTMsMmgxdjFoLTF6TTQsMmgxdjFoLTF6TTEsM2gxdjFoLTF6TTYsM2gxdjFoLTF6TTAsNGgxdjFoLTF6TTcsNGgxdjFoLTF6TTEsNWgxdjFoLTF6TTYsNWgxdjFoLTF6TTMsNWgxdjFoLTF6TTQsNWgxdjFoLTF6TTEsNmgxdjFoLTF6TTYsNmgxdjFoLTF6TTIsNmgxdjFoLTF6TTUsNmgxdjFoLTF6TTAsN2gxdjFoLTF6TTcsN2gxdjFoLTF6Ii8+PHBhdGggZmlsbD0iaHNsKDMzMSA4NiUgNDglKSIgZD0iTTAsM2gxdjFoLTF6TTcsM2gxdjFoLTF6TTIsNWgxdjFoLTF6TTUsNWgxdjFoLTF6TTMsNmgxdjFoLTF6TTQsNmgxdjFoLTF6TTIsN2gxdjFoLTF6TTUsN2gxdjFoLTF6Ii8+PC9zdmc+); width: 40px; height: 40px;"
/>
</div>
<div
class="MuiBox-root css-i6bazn"
>
<div
class="MuiBox-root css-171onha"
title="GnosisSafeProxy"
>
<div
class="MuiBox-root css-1o4wo1x"
>
GnosisSafeProxy
</div>
</div>
<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>
0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6
</span>
</span>
</div>
<span
aria-label="Copy to clipboard"
class=""
data-mui-internal-clone-element="true"
style="cursor: pointer;"
>
<button
aria-label="Copy to clipboard"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-nmr6e8-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<mock-icon
aria-hidden="true"
classname="MuiSvgIcon-root MuiSvgIcon-colorBorder MuiSvgIcon-fontSizeSmall css-j1da6x-MuiSvgIcon-root"
data-testid="copy-btn-icon"
focusable="false"
/>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</span>
<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>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeSmall css-sl0yvu-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-1pay1n0-MuiSvgIcon-root"
data-testid="MoreHorizIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="gridRow"
>
<div
class="title"
data-testid="tx-row-title"
>
Created:
</div>
<div
class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
data-testid="tx-data-row"
>
9/20/2024, 10:20:15 AM
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
`;
10 changes: 10 additions & 0 deletions src/components/tx/confirmation-views/BatchTransactions/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import BatchTxList from '@/components/batch/BatchSidebar/BatchTxList'
import { useDraftBatch } from '@/hooks/useDraftBatch'

function BatchTransactions() {
const batchTxs = useDraftBatch()

return <BatchTxList txItems={batchTxs} />
}

export default BatchTransactions
Loading

0 comments on commit f3d527b

Please sign in to comment.