A signature request error modal should be displayed if the user cancels the signature request, especially if they were being prompted to connect after attempting to transact. "Sign message" should re-start the flow from where they cancelled without having to go through any earlier steps/screens.
To buy this Cryptokitty, sign the message to finish connecting.
Cancel connection Sign message
< Card p = { 0 } borderRadius = { 1 } mb = { 4 } >
< Box height = " 4px " bg = " danger " borderRadius = { [ "1rem 1rem 0 0" ] } />
< Flex
justifyContent = " space-between "
alignItems = " center "
borderBottom = { 1 }
borderColor = " near-white "
p = { [ 3 , 4 ] }
pb = { 3 }
>
< Icon name = " Warning " color = " danger " aria-label = " Warning " />
< Heading textAlign = { [ "left" , "center" ] } as = " h1 " fontSize = { [ 2 , 3 ] } px = { [ 3 , 0 ] } >
Cancel connection ?
</ Heading >
< Link >
< Icon
name = " Close "
color = " moon-gray "
aria-label = " Close and cancel connection "
/>
</ Link >
</ Flex >
< Box p = { [ 3 , 4 ] } >
< Text >
To buy this Cryptokitty , sign the message to finish connecting .
</ Text >
</ Box >
< Flex
p = { [ 3 , 4 ] }
borderTop = { 1 }
borderColor = " near-white "
justifyContent = " flex-end "
flexDirection = { [ "column" , "row" ] }
alignItems = " center "
>
< Button.Outline
variant = " danger "
mr = { [ 0 , 3 ] }
mb = { [ 2 , 0 ] }
width = { [ "100%" , "auto" ] }
>
Cancel connection
</ Button.Outline >
< Button width = { [ "100%" , "auto" ] } > Sign message </ Button >
</ Flex >
</ Card >
Template anatomy 1. Title Makes sure the user is aware of their action.
2. Body Reiterates the impact of failing to sign the message in relation to the task (connecting).
3. Cancel connection button Provides a way for the user to confrim their connection cancellation.
4. Sign message button Re-prompts the signature request so the user doesn't have to go through any earlier steps.
See demo dApp connection demo Our connection demo shows methods for helping a user connect to your dApp and start transacting.
