Skip to content
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

fix: Improve stability of initial state sync in Snaps UI #25375

Merged
merged 3 commits into from
Jun 18, 2024
Merged

fix: Improve stability of initial state sync in Snaps UI #25375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d074a0
fix: Improve stability of initial state sync in Snaps UI
FrederikBolding Jun 18, 2024
9eca52f
Fix lint
FrederikBolding Jun 18, 2024
f797264
Fix destructure
FrederikBolding Jun 18, 2024
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
23 changes: 16 additions & 7 deletions ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import { useSelector } from 'react-redux';
import { isEqual } from 'lodash';
import MetaMaskTemplateRenderer from '../../metamask-template-renderer/metamask-template-renderer';
import { SnapDelineator } from '../snap-delineator';
import {
getSnapMetadata,
getMemoizedInterfaceContent,
} from '../../../../selectors';
import { getSnapMetadata, getMemoizedInterface } from '../../../../selectors';
import { Box, FormTextField } from '../../../component-library';
import { DelineatorType } from '../../../../helpers/constants/snaps';

Expand All @@ -35,10 +32,15 @@ const SnapUIRendererComponent = ({
getSnapMetadata(state, snapId),
);

const content = useSelector((state) =>
getMemoizedInterfaceContent(state, interfaceId),
const interfaceState = useSelector(
(state) => getMemoizedInterface(state, interfaceId),
// We only want to update the state if the content has changed.
// We do this to avoid useless re-renders.
(oldState, newState) => isEqual(oldState.content, newState.content),
);

const content = interfaceState?.content;

// sections are memoized to avoid useless re-renders if one of the parents element re-renders.
const sections = useMemo(
() =>
Expand All @@ -64,6 +66,8 @@ const SnapUIRendererComponent = ({
);
}

const { state: initialState, context } = interfaceState;

return (
<SnapDelineator
snapName={snapName}
Expand All @@ -74,7 +78,12 @@ const SnapUIRendererComponent = ({
boxProps={boxProps}
>
<Box className="snap-ui-renderer__content">
<SnapInterfaceContextProvider snapId={snapId} interfaceId={interfaceId}>
<SnapInterfaceContextProvider
snapId={snapId}
interfaceId={interfaceId}
initialState={initialState}
context={context}
>
<MetaMaskTemplateRenderer sections={sections} />
</SnapInterfaceContextProvider>
{isPrompt && (
Expand Down
16 changes: 7 additions & 9 deletions ui/contexts/snaps/snap-interface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
InterfaceState,
UserInputEventType,
} from '@metamask/snaps-sdk';
import { Json } from '@metamask/utils';
import { debounce, throttle } from 'lodash';
import React, {
FunctionComponent,
Expand All @@ -11,8 +12,7 @@ import React, {
useEffect,
useRef,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getMemoizedInterface } from '../../selectors';
import { useDispatch } from 'react-redux';
import {
handleSnapRequest,
updateInterfaceState,
Expand Down Expand Up @@ -47,6 +47,8 @@ export const SnapInterfaceContext =
export type SnapInterfaceContextProviderProps = {
interfaceId: string;
snapId: string;
initialState: Record<string, string | Record<string, unknown> | unknown>;
context: Json;
};

// We want button clicks to be instant and therefore use throttling
Expand All @@ -64,18 +66,14 @@ const THROTTLED_EVENTS = [
* @param params.children - The childrens to wrap with the context provider.
* @param params.interfaceId - The interface ID to use.
* @param params.snapId - The Snap ID that requested the interface.
* @param params.initialState - The initial state of the interface.
* @param params.context - The context blob of the interface.
* @returns The context provider.
*/
export const SnapInterfaceContextProvider: FunctionComponent<
SnapInterfaceContextProviderProps
> = ({ children, interfaceId, snapId }) => {
> = ({ children, interfaceId, snapId, initialState, context }) => {
const dispatch = useDispatch();
const { state: initialState, context } = useSelector(
(state) => getMemoizedInterface(state, interfaceId),
// Prevents the selector update.
// We do this to avoid useless re-renders.
() => true,
);

// We keep an internal copy of the state to speed-up the state update in the UI.
// It's kept in a ref to avoid useless re-rendering of the entire tree of components.
Expand Down