import { JsonRpcSigner } from "ethers/providers" ; import { History } from "history" ; import React from "react" ; import { connect } from "react-redux" ; import { Link , RouteComponentProps } from "react-router-dom" ; import { Action } from "redux" ; import { ThunkDispatch } from "redux-thunk" ; import { FormButton , FormInput , InputChangeProps } from "../../components/form" ; import { WidgetScreen } from "../../components/widget" ; import { EthereumService } from "../../providers/EthereumService" ; import { ActionType , ApplicationState , ErrorData , User , WalletState } from "../../store/types" ; import { addUser , UserAddTransition } from "../../store/user/user" ; import "./AccountRegistration.scss" ; export type AccountRegistrationProps = RouteComponentProps & { wallet : WalletState ; error : ErrorData ; registrationStatus : string ; addUser : ( data : User , signer : JsonRpcSigner , history : History ) => void ; } ; export type AccountRegistrationState = User & { loading : boolean ; } ; export class AccountRegistration extends React . Component < AccountRegistrationProps , AccountRegistrationState > { static contextType = EthereumService ; context ! : React . ContextType < typeof EthereumService > ; constructor ( props ) { super ( props ) ; this . state = { username : "" , email : "" , ethAddress : props . wallet . ethAddress , nodeAddress : "" , loading : false } ; } buttonText = { [ UserAddTransition . CheckWallet ] : "Check your wallet" , [ UserAddTransition . CreatingAccount ] : "Creating your Account" , [ UserAddTransition . DeployingContract ] : "Deploying the contract" } ; handleFormChange = ( event ) => { this . setState ( { ... this . state , [ event . inputName ] : event . value } ) ; } ; componentDidUpdate ( prevProps ) { if ( this . props . error !== prevProps . error ) { this . setState ( { ... this . state , loading : false } ) ; } } render ( ) { const { wallet , addUser , error , history , registrationStatus } = this . props ; const { loading , ... userData } = this . state ; const { signer } = this . context ; return ( < WidgetScreen header = { "Create a Counterfactual Account" } post = { < React . Fragment > Already have an account ? < Link to = "/login" > Login here < /Link> < /React.Fragment>} exitable={false}> < form > < FormInput label = "Username" type = "text" name = "username" required = { true } change = { this . handleFormChange } / > { error . field === "username" ? ( < div className = "error" > { error . message } < /div>) : null} < FormInput label = "E-mail (optional)" type = "email" name = "email" change = { this . handleFormChange } / > { error . field === "email" ? ( < div className = "error" > { error . message } < /div>) : null} < div className = "smallprint" > < b > Account will be linked to your Ethereum address : < /b> { wallet . ethAddress } < /div> { ( error . message || error . code ) && ! error . field ? ( < div className = "error" > { error . message } < /div>) : null} < FormButton name = "register" type = "button" spinner = { loading } disabled = { loading || ! userData . username } onClick = { ( ) => { this . setState ( { loading : true } ) ; addUser ( userData , signer , history ) ; } } > { ! loading ? "Create account" : this . buttonText [ registrationStatus ] } < /FormButton> < /form> < /WidgetScreen>); } } export default connect ( ( state ) => ( { wallet : state . WalletState , error : state . UserState . error , registrationStatus : state . UserState . status } ) , ( dispatch ) => ( { addUser : ( data , signer , history ) => dispatch ( addUser ( data , signer , history ) ) } ) ) ( AccountRegistration ) ;