diff --git a/package.json b/package.json index 87691a897..088a64962 100644 --- a/package.json +++ b/package.json @@ -133,7 +133,7 @@ "semver": "6.3.0", "serve": "11.3.0", "shelljs": "0.8.3", - "socket.io-client": "2.3.1", + "socket.io-client": "3.1.2", "source-map-explorer": "2.5.0", "storage-factory": "0.1.1", "style-loader": "0.23.1", diff --git a/src/app/components/Button/index.module.css b/src/app/components/Button/index.module.css index 3900e847e..636054cbf 100644 --- a/src/app/components/Button/index.module.css +++ b/src/app/components/Button/index.module.css @@ -28,3 +28,8 @@ .button.inverted:active { background: rgba(254, 192, 4, 0.5); } + +.button.disabled, .button:disabled { + opacity: 0.25; + cursor: not-allowed; +} diff --git a/src/app/components/Button/index.tsx b/src/app/components/Button/index.tsx index 6ef94922f..ea4656361 100644 --- a/src/app/components/Button/index.tsx +++ b/src/app/components/Button/index.tsx @@ -21,6 +21,7 @@ export function Button({ text, inverted, loading, ...props }: Props) { styles.button, props.className, inverted && styles.inverted, + props.disabled && styles.disabled, )} > {text} diff --git a/src/app/components/Form/AddressQrCode/index.module.css b/src/app/components/Form/AddressQrCode/index.module.css new file mode 100644 index 000000000..432dfb55f --- /dev/null +++ b/src/app/components/Form/AddressQrCode/index.module.css @@ -0,0 +1,26 @@ +/** */ +.qrCodeWrapper { + +} + +.qrCodeTitle { + font-size: 18px; + margin-bottom: 10px; + font-weight: 400; + line-height: 22px; +} + +.qrCodeContainer { + background-color: #ffffff; + border-radius: 10px; + text-align: center; + margin-bottom: 20px; +} + +.addressWrapper { + background-color: #222222; + padding: 12px 20px; + border: 1px solid #575757; + border-radius: 8px; + cursor: pointer; +} diff --git a/src/app/components/Form/AddressQrCode/index.tsx b/src/app/components/Form/AddressQrCode/index.tsx new file mode 100644 index 000000000..732ad9152 --- /dev/null +++ b/src/app/components/Form/AddressQrCode/index.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { Text } from '@blueprintjs/core'; +import QRCode from 'qrcode.react'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { useTranslation } from 'react-i18next'; +import { toastSuccess } from 'utils/toaster'; +import { translations } from 'locales/i18n'; +import styles from './index.module.css'; + +interface Props { + address: string; + hideClickToCopy?: boolean; +} + +export function AddressQrCode({ address, hideClickToCopy }: Props) { + const { t } = useTranslation(); + return ( + <> +
+ +
+ {!hideClickToCopy && ( + + toastSuccess(<>{t(translations.onCopy.address)}, 'copy') + } + > +
+
+
+ {address} +
+
+ + + + +
+
+
+ + )} + + ); +} diff --git a/src/app/components/TopUpHint/index.tsx b/src/app/components/TopUpHint/index.tsx deleted file mode 100644 index c19e7a3dc..000000000 --- a/src/app/components/TopUpHint/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { currentNetwork } from 'utils/classifiers'; - -export function TopUpHint() { - const links = { - mainnet: { - text: 'the Fast-BTC-Relay', - link: '/fast-btc', - }, - testnet: { - text: 'the RSK Testnet faucet', - link: 'https://faucet.rsk.co/', - }, - }; - - return ( - <> - While you wait, you can top up your wallet from{' '} - - {links[currentNetwork].text} - - - ); -} diff --git a/src/app/components/UserAssets/index.tsx b/src/app/components/UserAssets/index.tsx index 12f4c98ab..7e81dec7d 100644 --- a/src/app/components/UserAssets/index.tsx +++ b/src/app/components/UserAssets/index.tsx @@ -27,6 +27,7 @@ import { contractReader } from '../../../utils/sovryn/contract-reader'; import { getTokenContractName } from '../../../utils/blockchain/contract-helpers'; import { Sovryn } from '../../../utils/sovryn'; import { CSovActions } from '../../containers/WalletPage/components/CSovActions'; +import { FastBtcDialog } from '../../containers/FastBtcDialog'; export function UserAssets() { const { t } = useTranslation(); @@ -35,6 +36,8 @@ export function UserAssets() { const account = useAccount(); const assets = AssetsDictionary.list(); + const [fastBtc, setFastBtc] = useState(false); + return ( <>
@@ -74,19 +77,27 @@ export function UserAssets() { )} {connected && account && - assets.map(item => )} + assets.map(item => ( + setFastBtc(true)} + /> + ))}
+ setFastBtc(false)} /> ); } interface AssetProps { item: AssetDetails; + onFastBtc: () => void; } -function AssetRow({ item }: AssetProps) { +function AssetRow({ item, onFastBtc }: AssetProps) { const { t } = useTranslation(); const account = useAccount(); const [loading, setLoading] = useState(true); @@ -161,14 +172,14 @@ function AssetRow({ item }: AssetProps) { - {/*{item.asset === Asset.BTC && (*/} - {/* dispatch(actions.showDialog(true))}*/} - {/* />*/} - {/*)}*/} + {item.asset === Asset.BTC && ( + + + + + )} + setOpen(false)} /> + + ); +} + +const Div = styled.div` + background-color: rgba(254, 192, 4, 0.25); + padding: 31px; + font-weight: 500; + border: 1px solid #e9eae9; + border-radius: 8px; + line-height: 1; + font-size: 16px; + ${media.lg` + padding-left: 100px; + padding-right: 100px; + font-size: 24px; + `} +`; + +const Button = styled.button` + margin-left: 25px; + border: 0; + border-radius: 10px; + white-space: nowrap; + background-color: #fec004; + color: #000; + font-size: 20px; + font-family: 900; + padding: 13px 24px; + line-height: 1; + transition: opacity 300ms; + &:hover { + opacity: 0.75; + } +`; diff --git a/src/app/containers/WalletPage/components/OriginClaimDialog.tsx b/src/app/containers/WalletPage/components/OriginClaimDialog.tsx new file mode 100644 index 000000000..4ca0bc187 --- /dev/null +++ b/src/app/containers/WalletPage/components/OriginClaimDialog.tsx @@ -0,0 +1,208 @@ +import React, { useCallback } from 'react'; +import { Classes, Overlay } from '@blueprintjs/core'; +import classNames from 'classnames'; +import { bignumber } from 'mathjs'; +import styles from './dialog.module.css'; +import arrowDown from './arrow-down.svg'; +import { FieldGroup } from '../../../components/FieldGroup'; +import { DummyField } from '../../../components/DummyField'; +import { Button } from '../../../components/Button'; +import { useAccount } from '../../../hooks/useAccount'; +import { useCacheCallWithValue } from '../../../hooks/useCacheCallWithValue'; +import { useSendContractTx } from '../../../hooks/useSendContractTx'; +import { + TxStatus, + TxType, +} from '../../../../store/global/transactions-store/types'; +import { SendTxProgress } from '../../../components/SendTxProgress'; +import { + toNumberFormat, + weiToNumberFormat, +} from '../../../../utils/display-text/format'; +import { LinkToExplorer } from '../../../components/LinkToExplorer'; + +const pricePerSov = 9736; + +interface Props { + isOpen: boolean; + onClose: () => void; +} + +export function OriginClaimDialog(props: Props) { + const account = useAccount(); + + const { value: sovAmount, loading } = useCacheCallWithValue( + 'OriginInvestorsClaim', + 'investorsAmountsList', + '0', + account, + ); + + const btcAmount = bignumber(sovAmount).div(1e18).mul(pricePerSov).toString(); + + const { send, ...tx } = useSendContractTx('OriginInvestorsClaim', 'claim'); + const handleSubmit = useCallback(() => { + send([], { from: account }, { type: TxType.SOV_ORIGIN_CLAIM }); + }, [account, send]); + + const handleClosing = useCallback(() => { + if (tx.status === TxStatus.CONFIRMED) { + tx.reset(); + } + }, [tx]); + + return ( + <> + props.onClose()} + onClosing={() => handleClosing} + className={Classes.OVERLAY_SCROLL_CONTAINER} + hasBackdrop + canOutsideClickClose + canEscapeKeyClose + > +
+
+
+ {tx.status === TxStatus.CONFIRMED ? ( + <> +

Redemption Successful

+ +
+ + + +
+ + {/*

*/} + {/* Please check your email for confirmation*/} + {/*

*/} +

+ You will now be able to see your vested SOV +
+ In the “My Wallet” section under “Vested Assets” +

+ +

+ Congratulations you are also now whitelisted for trading on + Sovryn +

+ +
+
Tx Hash:
+ +
+ +
+
+ + ) : ( + <> +
+

Redeem Origins SOV

+

This transaction requires rBTC for gas.

+ + +
+
+ {toNumberFormat(Number(btcAmount) / 1e8, 5)} +
+
+ BTC +
+
+ + +
+ Arrow Down +
+ + +
+
+ {weiToNumberFormat(sovAmount, 2)} +
+
+ SOV +
+
+ + +
Tx Fee: 0.0001 (r)BTC
+
+ + + +
+
+ + )} +
+
+
+ + + ); +} diff --git a/src/app/containers/WalletPage/index.tsx b/src/app/containers/WalletPage/index.tsx index 6e6dd2245..09589fc55 100644 --- a/src/app/containers/WalletPage/index.tsx +++ b/src/app/containers/WalletPage/index.tsx @@ -17,6 +17,8 @@ import { SovGenerationNFTS } from '../../components/SovGenerationNFTS'; import { Tab } from '../../components/Tab'; import { SkeletonRow } from '../../components/Skeleton/SkeletonRow'; import { VestedAssets } from '../../components/UserAssets/VestedAssets'; +import { OriginClaimBanner } from './components/OriginClaimBanner'; +import { TopUpHistory } from '../FastBtcDialog/components/TopUpHistory'; export function WalletPage() { const { t } = useTranslation(); @@ -33,6 +35,11 @@ export function WalletPage() { />
+ +
+ +
+

@@ -85,6 +92,11 @@ export function WalletPage() {

)}
+
+
+ +
+