From f15490461e61f93b4539ed407f01fb88824d13fa Mon Sep 17 00:00:00 2001 From: Victor Creed <69458664+creed-victor@users.noreply.github.com> Date: Fri, 5 Mar 2021 21:33:24 +0200 Subject: [PATCH] Feat/395 redeem origin sov (#408) * Disable Claim CSOV option when none available. Closes #392 (#393) * Master to dev (#403) * Table for vested SOV asset. Closes #391 * Reduces table width #391 * Fix/401 double claiming (#402) * Disable Claim CSOV option when none available. Closes #392 (#393) * Fixes #401 - prevents multiple txs being sent when claiming tokens Co-authored-by: soulBit Co-authored-by: soulBit * #395 banner and dialog for claiming origin SOV tokens * Feat/395 redeem origin sov (#406) * Fixes claiming bug * #395 banner and dialog for claiming origin SOV tokens * Revert "Feat/395 redeem origin sov (#406)" (#407) This reverts commit d97d22872b8ba941d4c7a262cdc672c4583d7f87. * changed contract signatures for claiming origin sov tokens #395 * reworked how origin claiming works #395 * New strings and translate to PT-BR (#411) * New strings and translate to PT-BR * Minor change * Update src/locales/pt_br/translation.json * temp contracts for testing #395 * new contracts for sov claim #395 * removes address field from sov redeeming dialog #395 * new registry for origin claiming #395 * new contracts #395 * staking contract #395 * Master (#423) * Fixes claiming bug * Added changelog * Issue #389 - Change connected wallet blue circle with address blockie (#409) * add address blockie * remove regeneration of address blockie Co-authored-by: optisman <42278459+daisai3@users.noreply.github.com> * Minor changes PT-BR (#428) * Minor change PT-BR (#431) * Minor change PT-BR * Update src/locales/pt_br/translation.json * Minor change * Update src/locales/pt_br/translation.json * changed testnet contract for origin vesting registry #395 * changed testnet contract for origin claim #395 * new nodes #395 * changed nodes * changed origin SOV price to 9736 satoshis #395 * new contracts #395 * fast btc rework #418 (#425) * fast btc rework #418 * fastbtc history table #418 * Updated fast btc #418 * updated smart contracts #395 * mainnet contracts for origin claim #395 Co-authored-by: soulBit Co-authored-by: bitcoinuser Co-authored-by: optisman <42278459+daisai3@users.noreply.github.com> --- package.json | 2 +- src/app/components/Button/index.module.css | 5 + src/app/components/Button/index.tsx | 1 + .../Form/AddressQrCode/index.module.css | 26 + .../components/Form/AddressQrCode/index.tsx | 69 ++ src/app/components/TopUpHint/index.tsx | 28 - src/app/components/UserAssets/index.tsx | 31 +- .../UserAssets/useVestedStaking_balanceOf.ts | 27 +- .../components/AddressButton.tsx | 25 + .../FastBtcDialog/components/MainScreen.tsx | 64 ++ .../components/TopUpHistory.tsx} | 47 +- .../components/TransactionScreen.tsx | 107 +++ .../components/transaction.module.css | 43 + .../containers/FastBtcDialog/index.module.css | 85 ++ src/app/containers/FastBtcDialog/index.tsx | 75 ++ src/app/containers/FastBtcDialog/saga.ts | 102 +++ src/app/containers/FastBtcDialog/selectors.ts | 11 + src/app/containers/FastBtcDialog/slice.ts | 107 +++ src/app/containers/FastBtcDialog/types.ts | 57 ++ .../components/OriginClaimBanner.tsx | 66 ++ .../components/OriginClaimDialog.tsx | 208 +++++ src/app/containers/WalletPage/index.tsx | 12 + src/locales/en/translation.json | 32 +- src/locales/pt_br/translation.json | 18 +- src/store/global/transactions-store/types.ts | 1 + src/types/RootState.ts | 2 + .../blockchain/abi/OriginInvestorsClaim.json | 425 +++++++++ .../blockchain/abi/VestingRegistryOrigin.json | 812 ++++++++++++++++++ src/utils/blockchain/contracts.testnet.ts | 11 + src/utils/blockchain/contracts.ts | 11 + src/utils/classifiers.ts | 4 +- src/utils/toaster.ts | 21 + yarn.lock | 136 +-- 33 files changed, 2510 insertions(+), 161 deletions(-) create mode 100644 src/app/components/Form/AddressQrCode/index.module.css create mode 100644 src/app/components/Form/AddressQrCode/index.tsx delete mode 100644 src/app/components/TopUpHint/index.tsx create mode 100644 src/app/containers/FastBtcDialog/components/AddressButton.tsx create mode 100644 src/app/containers/FastBtcDialog/components/MainScreen.tsx rename src/app/{components/TopUpHistory/index.tsx => containers/FastBtcDialog/components/TopUpHistory.tsx} (78%) create mode 100644 src/app/containers/FastBtcDialog/components/TransactionScreen.tsx create mode 100644 src/app/containers/FastBtcDialog/components/transaction.module.css create mode 100644 src/app/containers/FastBtcDialog/index.module.css create mode 100644 src/app/containers/FastBtcDialog/index.tsx create mode 100644 src/app/containers/FastBtcDialog/saga.ts create mode 100644 src/app/containers/FastBtcDialog/selectors.ts create mode 100644 src/app/containers/FastBtcDialog/slice.ts create mode 100644 src/app/containers/FastBtcDialog/types.ts create mode 100644 src/app/containers/WalletPage/components/OriginClaimBanner.tsx create mode 100644 src/app/containers/WalletPage/components/OriginClaimDialog.tsx create mode 100644 src/utils/blockchain/abi/OriginInvestorsClaim.json create mode 100644 src/utils/blockchain/abi/VestingRegistryOrigin.json 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() {

)}
+
+
+ +
+