@@ -18,6 +18,7 @@ import * as chains from 'viem/chains';
1818
1919import {
2020 ConnectButton ,
21+ InstallButton ,
2122 InstallFlaskButton ,
2223 CustomMessageButton ,
2324 Card ,
@@ -29,6 +30,11 @@ import {
2930 NativeTokenPeriodicForm ,
3031 ERC20TokenPeriodicForm ,
3132} from '../components/permissions' ;
33+ import {
34+ kernelSnapOrigin ,
35+ gatorSnapOrigin ,
36+ messageSigningSnapOrigin ,
37+ } from '../config' ;
3238import {
3339 Container ,
3440 Heading ,
@@ -41,7 +47,6 @@ import {
4147 ResponseContainer ,
4248 CopyButton ,
4349} from '../styles' ;
44- import { kernelSnapOrigin , gatorSnapOrigin } from '../config' ;
4550import {
4651 useMetaMask ,
4752 useMetaMaskContext ,
@@ -97,6 +102,8 @@ const Index = () => {
97102 const { isFlask, snapsDetected, installedSnaps, provider } = useMetaMask ( ) ;
98103 const requestKernelSnap = useRequestSnap ( kernelSnapOrigin ) ;
99104 const requestPermissionSnap = useRequestSnap ( gatorSnapOrigin ) ;
105+ const requestMessageSigningSnap = useRequestSnap ( messageSigningSnapOrigin ) ;
106+
100107 const { delegateAccount } = useDelegateAccount ( { chain : selectedChain } ) ;
101108 const { bundlerClient, getFeePerGas } = useBundlerClient ( {
102109 chain : selectedChain ,
@@ -124,6 +131,9 @@ const Index = () => {
124131
125132 const isKernelSnapReady = Boolean ( installedSnaps [ kernelSnapOrigin ] ) ;
126133 const isGatorSnapReady = Boolean ( installedSnaps [ gatorSnapOrigin ] ) ;
134+ const isMessageSigningSnapReady = Boolean (
135+ installedSnaps [ messageSigningSnapOrigin ] ,
136+ ) ;
127137
128138 const chainId = selectedChain . id ;
129139 const [ permissionType , setPermissionType ] = useState ( 'native-token-stream' ) ;
@@ -175,13 +185,13 @@ const Index = () => {
175185 if ( ! delegateAccount ) {
176186 throw new Error ( 'Delegate account not found' ) ;
177187 }
178-
188+
179189 // Generate a unique identifier for this redemption request
180190 const requestId = `redeem-${ Date . now ( ) } -${ Math . random ( ) } ` ;
181-
191+
182192 // Add this request to pending requests
183193 setPendingPermissionRequests ( prev => new Set ( prev ) . add ( requestId ) ) ;
184-
194+
185195 setReceipt ( null ) ;
186196 setPermissionResponseError ( null ) ;
187197
@@ -267,10 +277,10 @@ const Index = () => {
267277
268278 // Generate a unique identifier for this permission request
269279 const requestId = `${ type } -${ Date . now ( ) } -${ Math . random ( ) } ` ;
270-
280+
271281 // Add this request to pending requests
272282 setPendingPermissionRequests ( prev => new Set ( prev ) . add ( requestId ) ) ;
273-
283+
274284 setPermissionResponse ( null ) ;
275285 setReceipt ( null ) ;
276286 setPermissionResponseError ( null ) ;
@@ -497,6 +507,23 @@ const Index = () => {
497507 />
498508 ) }
499509
510+ < Card
511+ content = { {
512+ title : 'Message Signing Snap' ,
513+ description :
514+ 'Set up by installing and authorizing the message signing snap.' ,
515+ button : (
516+ < InstallButton
517+ onClick = { requestMessageSigningSnap }
518+ disabled = { ! isMetaMaskReady || isMessageSigningSnapReady }
519+ $isInstalled = { isMessageSigningSnapReady }
520+ />
521+ ) ,
522+ } }
523+ fullWidth
524+ disabled = { ! isMetaMaskReady }
525+ />
526+
500527 < Card
501528 content = { {
502529 title : `${ isKernelSnapReady ? 'Reconnect' : 'Connect' } (kernel)` ,
0 commit comments