A connection request error modal should be displayed if the user cancels the connection request, especially if they were prompted to connect after trying to transact. "Connect" should re-start the flow from where they cancelled without having to go through any earlier steps/screens.
To buy this Cryptokitty, you need to connect your Ethereum account.
Cancel connection Connect
< 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 , you need to connect your Ethereum account .
</ 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" ] } > Connect </ Button >
</ Flex >
</ Card >
Template anatomy 1. Title Makes sure the user is aware of their action.
2. Body Reiterates the impact of cancelling the connection request in relation to the task (connecting).
3. Cancel connection button Provides a way for the user to confrim their connection cancellation.
4. Connect button Re-prompts the connection 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.
