Skip to content

Add new method to dialogs snap #3173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hmalik88 wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Add new method to dialogs snap #3173

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a08c8dd
added new method to dialogs snap to show require scroll content
hmalik88 Feb 28, 2025
cb06ad0
apply code review
hmalik88 Mar 3, 2025
83ae413
Merge branch 'main' into hm/update-dialogs-snap
hmalik88 Mar 27, 2025
62ec423
hook up accept/reject buttons
hmalik88 Mar 27, 2025
3ce3251
rebuild
hmalik88 Mar 27, 2025
c5df060
Merge branch 'main' into hm/update-dialogs-snap
hmalik88 Mar 31, 2025
98d4964
apply code review
hmalik88 Mar 31, 2025
ef523a6
rebuild
hmalik88 Mar 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/examples/packages/dialogs/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './custom';
export * from './require-scroll-content';
39 changes: 39 additions & 0 deletions packages/examples/packages/dialogs/src/components/require-scroll-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import {
Box,
Button,
Container,
Footer,
Text,
type SnapComponent,
} from '@metamask/snaps-sdk/jsx';

/**
* Long content that requires scrolling.
*
* @returns The long content component.
*/
export const RequireScrollContent: SnapComponent = () => (
<Container>
<Box direction="vertical">
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
<Text>lorem ipsum dolor sit amet</Text>
</Box>
<Footer requireScroll>
<Button name="reject">Reject</Button>
<Button name="accept">Yes</Button>
</Footer>
</Container>
);
8 changes: 7 additions & 1 deletion packages/examples/packages/dialogs/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
UserInputEventType,
} from '@metamask/snaps-sdk';

import { CustomDialog } from './components';
import { CustomDialog, RequireScrollContent } from './components';

/**
* Handle incoming JSON-RPC requests from the dapp, sent through the
Expand Down Expand Up @@ -90,6 +90,12 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
},
});

case 'showRequireScrollContent':
Copy link
Member

@Mrtenz Mrtenz Mar 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
case 'showRequireScrollContent':
case 'showLongContent':

Copy link
Member

@Mrtenz Mrtenz Mar 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to update the JSDoc too.

Copy link
Contributor

@GuillaumeRx GuillaumeRx Mar 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use this naming instead ?

Copy link
Contributor Author

@hmalik88 hmalik88 Mar 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, updated: 98d4964

return snap.request({
method: 'snap_dialog',
params: { content: <RequireScrollContent /> },
});

default:
throw new MethodNotFoundError({ method: request.method });
}
Expand Down
13 changes: 13 additions & 0 deletions packages/test-snaps/src/features/snaps/dialogs/Dialogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@ export const Dialogs: FunctionComponent = () => {
}).catch(logError);
};

const handleSubmitRequireScrollContent = () => {
invokeSnap({
snapId,
method: 'showRequireScrollContent',
}).catch(logError);
};
return (
<Snap
name="Dialogs Snap"
Expand Down Expand Up @@ -80,6 +86,13 @@ export const Dialogs: FunctionComponent = () => {
>
Custom
</Button>
<Button
id="triggerRequireScrollContentButton"
onClick={handleSubmitRequireScrollContent}
disabled={isLoading}
>
Require Scroll Content
</Button>
</ButtonGroup>

<Result>
Expand Down
Loading