f570c4686a
Detect all metamask states UX for approve transactions UX for getting more ETH from faucet UX for submitted transactions Toggle about
32 lines
1.2 KiB
JavaScript
32 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
|
|
function HelperMessages(props) {
|
|
let message = ''
|
|
switch (props.interaction) {
|
|
case 'connected':
|
|
message = <p>{"Nice! You're connected. Enter an input value below to get started."}</p>
|
|
break;
|
|
case 'locked':
|
|
message = <p>{"Your metamask is locked! Please unlock to continue."}</p>
|
|
break;
|
|
case 'input':
|
|
message = <p>{"You're swapping " + props.inputToken.value + " for " + props.outputToken.value + ". Want to know more about how the prices are determined?"}</p>
|
|
// message = "Oops, looks like this address doesn't have a enough " + props.inputToken.value + " to make this trade. Add more funds to make this swap."
|
|
break;
|
|
case 'error1':
|
|
message = <p>{"You can't swap a token for itself! 😂"}</p>
|
|
// message = "Oops, looks like this address doesn't have a enough " + props.inputToken.value + " to make this trade. Add more funds to make this swap."
|
|
break;
|
|
default:
|
|
message = <p>{"Hi there! This site helps you swap ERC20 tokens. Looks like you aren't connected. Need help?"}</p>
|
|
}
|
|
return (
|
|
<section className="info border pa2">
|
|
{message}
|
|
<p>↓</p>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default HelperMessages;
|