diff options
4 files changed, 93 insertions, 13 deletions
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx new file mode 100644 index 000000000..7e8628e64 --- /dev/null +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { AllowanceStateView } from 'ts/components/ui/allowance_state_view'; + +export interface AllowanceStateToggleProps {} + +const flip = () => Math.random() < 0.5; + +export const AllowanceStateToggle: React.StatelessComponent<AllowanceStateToggleProps> = () => ( + <AllowanceStateView allowanceState={flip() ? 'locked' : 'unlocked'} /> +); diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx new file mode 100644 index 000000000..55ad3a889 --- /dev/null +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -0,0 +1,42 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export type AllowanceState = 'locked' | 'unlocked' | 'loading'; + +export interface AllowanceStateViewProps { + allowanceState: AllowanceState; +} + +export const AllowanceStateView: React.StatelessComponent<AllowanceStateViewProps> = ({ allowanceState }) => { + switch (allowanceState) { + case 'locked': + return renderLock(); + case 'unlocked': + return renderCheck(); + case 'loading': + return <div>'...'</div>; + default: + return null; + } +}; + +const renderCheck = (color: string = '#37D400') => ( + <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> + <circle cx="8.5" cy="8.5" r="8.5" fill={color} /> + <path + d="M2.5 4.5L1.79289 5.20711L2.5 5.91421L3.20711 5.20711L2.5 4.5ZM-0.707107 2.70711L1.79289 5.20711L3.20711 3.79289L0.707107 1.29289L-0.707107 2.70711ZM3.20711 5.20711L7.70711 0.707107L6.29289 -0.707107L1.79289 3.79289L3.20711 5.20711Z" + transform="translate(5 6.5)" + fill="white" + /> + </svg> +); + +const renderLock = () => ( + <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M6 0C3.51604 0 1.48688 2.0495 1.48688 4.55837V5.86581C0.664723 5.86581 -3.33647e-08 6.53719 -3.33647e-08 7.36759V13.3217C-3.33647e-08 14.1521 0.664723 14.8235 1.48688 14.8235H10.5131C11.3353 14.8235 12 14.1521 12 13.3217V7.36759C12 6.53719 11.3353 5.86581 10.5131 5.86581V4.55837C10.5131 2.0495 8.48396 0 6 0ZM8.93878 5.86581H3.06122V4.55837C3.06122 2.9329 4.37318 1.59013 6 1.59013C7.62682 1.59013 8.93878 2.9329 8.93878 4.55837V5.86581Z" + fill="black" + /> + </svg> +); diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 40a8a23ea..84c091b5c 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -29,6 +29,7 @@ import { PlaceHolder } from 'ts/components/wallet/placeholder'; import { StandardIconRow } from 'ts/components/wallet/standard_icon_row'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; +import { AllowanceStateToggle } from 'ts/containers/inputs/allowance_state_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { @@ -396,10 +397,10 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with // the "unwrap" button in the row below - const toggle = shouldShowToggle ? ( - this._renderAllowanceToggle(config.allowanceToggleConfig) - ) : ( - <div style={{ width: NO_ALLOWANCE_TOGGLE_SPACE_WIDTH }} /> + const toggle = ( + <Container width={NO_ALLOWANCE_TOGGLE_SPACE_WIDTH}> + {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} + </Container> ); return ( <div className="flex items-center"> @@ -412,15 +413,16 @@ export class Wallet extends React.Component<WalletProps, WalletState> { } private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode { // TODO: Error handling - return ( - <AllowanceToggle - blockchain={this.props.blockchain} - token={config.token} - tokenState={config.tokenState} - isDisabled={!config.tokenState.isLoaded} - refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)} - /> - ); + // return ( + // <AllowanceToggle + // blockchain={this.props.blockchain} + // token={config.token} + // tokenState={config.tokenState} + // isDisabled={!config.tokenState.isLoaded} + // refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)} + // /> + // ); + return <AllowanceStateToggle />; } private _renderAmount( amount: BigNumber, diff --git a/packages/website/ts/containers/inputs/allowance_state_toggle.ts b/packages/website/ts/containers/inputs/allowance_state_toggle.ts new file mode 100644 index 000000000..6e2698b0b --- /dev/null +++ b/packages/website/ts/containers/inputs/allowance_state_toggle.ts @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { Blockchain } from 'ts/blockchain'; +import { State } from 'ts/redux/reducer'; +import { BalanceErrs, Token, TokenState } from 'ts/types'; + +import { AllowanceStateToggle as AllowanceStateToggleComponent } from 'ts/components/inputs/allowance_state_toggle'; +import { Dispatcher } from 'ts/redux/dispatcher'; + +interface AllowanceStateToggleProps {} + +interface ConnectedState {} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: AllowanceStateToggleProps): ConnectedState => ({}); + +// const mapDispatchTopProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({}); + +export const AllowanceStateToggle: React.ComponentClass<AllowanceStateToggleProps> = connect( + mapStateToProps, + // mapDispatchTopProps, +)(AllowanceStateToggleComponent); |