ghost-portal/packages/react-signer/src/Tip.tsx
Jaco Greeff 601ae6da08
Toss creaky signer Modal, revamp (#2933)
* Toss creaky signer Modal, revamp

* WIP

* WIP

* WIP

* WIP

* Basics seem working

* Adjust layout

* WIP

* Cleanups for unsigned

* Unsigned

* Start at signing-only

* Signing should be ok

* Signing operational

* Remove old modal

* Update packages/react-signer/src/Modal/TxSigned.tsx

* JS app integration

* Small styling adjustments

* Prelim proxy support

* Proxy on/off switch

* isProxyActive

* Multi + Proxy ordering (& testing)

* Proxy with multisig

* Remove debug logs

* Qr with 2 column layout

* Padding adjustments

* Cleanups

* Cleanup PaymentInfo

* Generic asset cleanup

* flatten

* Don't save latest values when filter is active
2020-06-14 18:59:22 +02:00

56 lines
1.7 KiB
TypeScript

// Copyright 2017-2020 @polkadot/react-signer authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
import { InputBalance, Modal, Toggle } from '@polkadot/react-components';
import { BN_ZERO } from '@polkadot/util';
import { useTranslation } from './translate';
interface Props {
className?: string;
onChange: (tip: BN) => void;
}
function Tip ({ className, onChange }: Props): React.ReactElement<Props> | null {
const { t } = useTranslation();
const [tip, setTip] = useState(BN_ZERO);
const [showTip, setShowTip] = useState(false);
useEffect((): void => {
onChange(showTip ? tip : BN_ZERO);
}, [onChange, showTip, tip]);
return (
<Modal.Columns className={className}>
<Modal.Column>
<Toggle
className='tipToggle'
label={
showTip
? t<string>('Include an optional tip for faster processing')
: t<string>('Do not include a tip for the block author')
}
onChange={setShowTip}
value={showTip}
/>
{showTip && (
<InputBalance
help={t<string>('Add a tip to this extrinsic, paying the block author for greater priority')}
isZeroable
label={t<string>('Tip (optional)')}
onChange={setTip}
/>
)}
</Modal.Column>
<Modal.Column>
<p>{t<string>('Adding an optional tip to the transaction could allow for higher priority, especially when the chain is busy.')}</p>
</Modal.Column>
</Modal.Columns>
);
}
export default React.memo(Tip);