import styled from '@emotion/styled' ; import { FromStream } from '@neo-one/react' ; import { Box , Button , TextInput } from '@neo-one/react-core' ; import BigNumber from 'bignumber.js' ; import * as React from 'react' ; import { prop } from 'styled-tools' ; import { TokenSmartContract , WithContracts } from '../one/generated' ; import { createTokenInfoStream$ , handleMint } from './utils' ; const InfoGrid = styled ( Box ) < { } , { } > `
  display: grid;
  ${ prop ( 'theme.fonts.axiformaRegular' ) };
  ${ prop ( 'theme.fontStyles.body1' ) };
  background-color: ${ prop ( 'theme.gray0' ) };
  padding: 8px;
  margin: 8px;
  color: ${ prop ( 'theme.black' ) };
  grid-template-columns: '160px 1fr';
  grid-auto-rows: auto;
  gap: 0;
` ; const ContributeGrid = styled ( Box ) < { } , { } > `
  display: grid;
  ${ prop ( 'theme.fonts.axiformaRegular' ) };
  ${ prop ( 'theme.fontStyles.body1' ) };
  background-color: ${ prop ( 'theme.gray0' ) };
  grid:
    'input amount' auto
    'empty send' auto
    / 1fr auto;
  grid-gap: 8px;
  padding: 8px;
  margin: 8px;
` ; const AmountInput = styled ( TextInput ) `
  grid-area: input;
` ; const AmountText = styled ( Box ) `
  grid-area: amount;
` ; const SendWrapper = styled ( Box ) `
  display: grid;
  grid-area: send;
  grid-auto-flow: column;
  justify-items: end;
` ; const Wrapper = styled ( Box ) `
  display: grid;
  justify-items: center;
` ; const InnerWrapper = styled ( Box ) `
  max-width: 400px;
` ; interface Props { } interface State { readonly text : string ; readonly amount ? : BigNumber ; readonly loading : boolean ; } export class ICO extends React . Component < Props , State > { public state : State = { text : '' , loading : false } ; public render ( ) { return ( < WithContracts > { } { ( { client , token } ) => ( < FromStream props = { [ client , token ] } createStream = { ( ) => createTokenInfoStream$ ( client , token ) } > { ( value ) => ( < Wrapper > < InnerWrapper > < InfoGrid > < Box > Name : < /Box> < Box > { value . name } < /Box> < Box > Symbol : < /Box> < Box > { value . symbol } < /Box> < Box > Total Supply : < /Box> < Box > { value . totalSupply . toFormat ( ) } < /Box> < Box > Amount Per NEO : < /Box> < Box > { value . amountPerNEO . toFormat ( ) } < /Box> < Box > NEO Contributed : < /Box> < Box > { value . totalSupply . div ( value . amountPerNEO ) . toFormat ( ) } < /Box> < Box > Remaining : < /Box> < Box > { value . remaining . toFormat ( ) } < /Box> < Box > Start Time : < /Box> < Box > { new Date ( value . icoStartTimeSeconds . toNumber ( ) * 1000 ) . toLocaleString ( ) } < /Box> < Box > Duration : < /Box> < Box > { value . icoDurationSeconds . toNumber ( ) / ( 60 * 60 ) } hours < /Box> < Box > Your Balance : < /Box> < Box > { value . balance . toFormat ( ) } < /Box> < /InfoGrid> < ContributeGrid > < AmountInput value = { this . state . text } placeholder = "Send NEO" onChange = { this . onChangeAmount } / > < AmountText > { this . state . amount === undefined ? '0' : value . amountPerNEO . times ( this . state . amount ) . toFormat ( ) } < /AmountText> < SendWrapper > < Button disabled = { this . state . amount === undefined || this . state . loading } onClick = { ( ) => this . send ( token ) } > Send < /Button> < /SendWrapper> < /ContributeGrid> < /InnerWrapper> < /Wrapper>)} < /FromStream>)} < /WithContracts>); } private readonly onChangeAmount = ( event ) => { const text = event . currentTarget . value ; let amount ; try { amount = new BigNumber ( text ) ; if ( amount . toString ( ) !== text ) { amount = undefined ; } } catch { } this . setState ( { text , amount } ) ; } ; private readonly send = ( token ) => { const amount = this . state . amount ; if ( amount !== undefined ) { this . setState ( { loading : true } , ( ) => { handleMint ( token , amount ) . then ( ( ) => { this . setState ( { loading : false } ) ; } ) . catch ( ( error ) => { console . error ( error ) ; this . setState ( { loading : false } ) ; } ) ; } ) ; } } ; }