From 34a4309d9abd01c0c01ee8145551cce79a66b2ec Mon Sep 17 00:00:00 2001 From: "Shankar D. Warang" Date: Tue, 18 Apr 2023 00:03:53 +0530 Subject: [PATCH] Delgation UI v2 (#18) * stop tests * delegation tab * ui outline * table only appears when delegating * styling * lint & types fixed * tentative cleanup * commented out what is not needed modals are done * useMultis * comment out tests * comment out account types & misc * code clean up --------- Co-authored-by: Depth-Hoar <44712760+Depth-Hoar@users.noreply.github.com> --- packages/apps-config/src/endpoints/index.ts | 2 +- packages/apps-routing/src/ddelegation.ts | 22 + packages/apps-routing/src/index.ts | 3 + .../page-accounts/src/Accounts/Account.tsx | 2 +- packages/page-accounts/src/Accounts/index.tsx | 2 +- packages/page-ddelegation/LICENSE | 201 +++++++ packages/page-ddelegation/README.md | 1 + packages/page-ddelegation/package.json | 29 + .../page-ddelegation/src/Accounts/Account.tsx | 329 +++++++++++ .../src/Accounts/index.spec.ts | 530 ++++++++++++++++++ .../page-ddelegation/src/Accounts/index.tsx | 190 +++++++ .../page-ddelegation/src/Accounts/types.ts | 31 + .../src/CreateAccount.slow.spec.tsx | 108 ++++ packages/page-ddelegation/src/index.tsx | 52 ++ .../page-ddelegation/src/modals/Delegate.tsx | 156 ++++++ .../src/modals/InputValidateAmount.tsx | 56 ++ .../src/modals/Undelegate.tsx | 49 ++ packages/page-ddelegation/src/translate.ts | 10 + packages/page-ddelegation/src/types.ts | 77 +++ packages/page-ddelegation/src/useCounter.ts | 12 + packages/page-ddelegation/src/util.tsx | 125 +++++ .../test/pageElements/AccountRow.tsx | 14 + .../test/pages/accountsPage.tsx | 99 ++++ packages/page-ddelegation/tsconfig.build.json | 9 + tsconfig.base.json | 2 + yarn.lock | 17 + 26 files changed, 2125 insertions(+), 3 deletions(-) create mode 100644 packages/apps-routing/src/ddelegation.ts create mode 100644 packages/page-ddelegation/LICENSE create mode 100644 packages/page-ddelegation/README.md create mode 100644 packages/page-ddelegation/package.json create mode 100644 packages/page-ddelegation/src/Accounts/Account.tsx create mode 100644 packages/page-ddelegation/src/Accounts/index.spec.ts create mode 100644 packages/page-ddelegation/src/Accounts/index.tsx create mode 100644 packages/page-ddelegation/src/Accounts/types.ts create mode 100644 packages/page-ddelegation/src/CreateAccount.slow.spec.tsx create mode 100644 packages/page-ddelegation/src/index.tsx create mode 100644 packages/page-ddelegation/src/modals/Delegate.tsx create mode 100644 packages/page-ddelegation/src/modals/InputValidateAmount.tsx create mode 100644 packages/page-ddelegation/src/modals/Undelegate.tsx create mode 100644 packages/page-ddelegation/src/translate.ts create mode 100644 packages/page-ddelegation/src/types.ts create mode 100644 packages/page-ddelegation/src/useCounter.ts create mode 100644 packages/page-ddelegation/src/util.tsx create mode 100644 packages/page-ddelegation/test/pageElements/AccountRow.tsx create mode 100644 packages/page-ddelegation/test/pages/accountsPage.tsx create mode 100644 packages/page-ddelegation/tsconfig.build.json diff --git a/packages/apps-config/src/endpoints/index.ts b/packages/apps-config/src/endpoints/index.ts index 63d2c367055e..e2d315413182 100644 --- a/packages/apps-config/src/endpoints/index.ts +++ b/packages/apps-config/src/endpoints/index.ts @@ -6,7 +6,7 @@ import type { LinkOption } from './types'; import { defaultT } from '../util'; import { createCustom, createDev, createOwn } from './development'; -import { prodChains, prodRelayKusama, prodRelayPolkadot, prodEdgewareNetwork } from './production'; +import { prodChains, prodEdgewareNetwork, prodRelayKusama, prodRelayPolkadot } from './production'; import { testChains, testRelayRococo, testRelayWestend } from './testing'; import { expandEndpoints } from './util'; diff --git a/packages/apps-routing/src/ddelegation.ts b/packages/apps-routing/src/ddelegation.ts new file mode 100644 index 000000000000..a2af07a2a7a9 --- /dev/null +++ b/packages/apps-routing/src/ddelegation.ts @@ -0,0 +1,22 @@ +// Copyright 2017-2022 @polkadot/apps-routing authors & contributors +// SPDX-License-Identifier: Apache-2.0 +// This file has been edited + +import type { TFunction } from 'i18next'; +import type { Route } from './types'; + +import Component, { useCounter } from '@polkadot/app-ddelegation'; + +export default function create (t: TFunction): Route { + return { + Component, + display: { + needsApi: [] + }, + group: 'governance', + icon: 'vote-yea', + name: 'delegation', + text: t('nav.ddelegation', 'Delegation', { ns: 'apps-routing' }), + useCounter + }; +} diff --git a/packages/apps-routing/src/index.ts b/packages/apps-routing/src/index.ts index 9f9403437870..438254686f1b 100644 --- a/packages/apps-routing/src/index.ts +++ b/packages/apps-routing/src/index.ts @@ -1,5 +1,6 @@ // Copyright 2017-2022 @polkadot/apps-routing authors & contributors // SPDX-License-Identifier: Apache-2.0 +// This file has been edited import type { TFunction } from 'i18next'; import type { Routes } from './types'; @@ -14,6 +15,7 @@ import claims from './claims'; import collator from './collator'; import contracts from './contracts'; import council from './council'; +import ddelegation from './ddelegation'; import democracy from './democracy'; import explorer from './explorer'; import extrinsics from './extrinsics'; @@ -70,6 +72,7 @@ export default function create (t: TFunction): Routes { // other governance-related treasury(t), bounties(t), + ddelegation(t), // others parachains(t), gilt(t), diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index 99a43c94851f..0ddb89b1b395 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/packages/page-accounts/src/Accounts/Account.tsx @@ -1,4 +1,4 @@ -// Copyright 2017-2022 @polkadot/app-accounts authors & contributors +// Copyright 2017-2023 @polkadot/app-accounts authors & contributors // SPDX-License-Identifier: Apache-2.0 import type { SubmittableExtrinsic } from '@polkadot/api/types'; diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx index 960977233203..80ce3ed33bf1 100644 --- a/packages/page-accounts/src/Accounts/index.tsx +++ b/packages/page-accounts/src/Accounts/index.tsx @@ -1,4 +1,4 @@ -// Copyright 2017-2022 @polkadot/app-accounts authors & contributors +// Copyright 2017-2023 @polkadot/app-accounts authors & contributors // SPDX-License-Identifier: Apache-2.0 import type { ActionStatus } from '@polkadot/react-components/Status/types'; diff --git a/packages/page-ddelegation/LICENSE b/packages/page-ddelegation/LICENSE new file mode 100644 index 000000000000..0d381b2e97dc --- /dev/null +++ b/packages/page-ddelegation/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/page-ddelegation/README.md b/packages/page-ddelegation/README.md new file mode 100644 index 000000000000..af95dc1b6f3a --- /dev/null +++ b/packages/page-ddelegation/README.md @@ -0,0 +1 @@ +# @polkadot/app-ddelegation diff --git a/packages/page-ddelegation/package.json b/packages/page-ddelegation/package.json new file mode 100644 index 000000000000..014b5547fd89 --- /dev/null +++ b/packages/page-ddelegation/package.json @@ -0,0 +1,29 @@ +{ + "bugs": "https://github.com/polkadot-js/apps/issues", + "homepage": "https://github.com/polkadot-js/apps/tree/master/packages/page-accounts#readme", + "license": "Apache-2.0", + "name": "@polkadot/app-ddelegation", + "private": true, + "repository": { + "directory": "packages/page-ddelegation", + "type": "git", + "url": "https://github.com/polkadot-js/apps.git" + }, + "sideEffects": false, + "type": "module", + "version": "0.122.3-139-x", + "dependencies": { + "@babel/runtime": "^7.20.6", + "@polkadot/hw-ledger": "^10.2.1", + "@polkadot/phishing": "^0.18.12", + "@polkadot/react-components": "^0.122.3-139-x", + "@polkadot/react-hooks": "^0.122.3-139-x", + "@polkadot/util": "^10.2.1", + "@polkadot/vanitygen": "^0.52.19", + "detect-browser": "^5.3.0", + "file-saver": "^2.0.5" + }, + "devDependencies": { + "@polkadot/test-support": "0.122.3-139-x" + } +} diff --git a/packages/page-ddelegation/src/Accounts/Account.tsx b/packages/page-ddelegation/src/Accounts/Account.tsx new file mode 100644 index 000000000000..c034e5c0e7b8 --- /dev/null +++ b/packages/page-ddelegation/src/Accounts/Account.tsx @@ -0,0 +1,329 @@ +// Copyright 2017-2023 @polkadot/app-accounts authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { ActionStatus } from '@polkadot/react-components/Status/types'; +import type { Option } from '@polkadot/types'; +import type { ProxyDefinition, RecoveryConfig } from '@polkadot/types/interfaces'; +import type { KeyringAddress } from '@polkadot/ui-keyring/types'; +import type { AccountBalance, Delegation } from '../types'; + +import React, { useCallback, useMemo } from 'react'; +import styled from 'styled-components'; + +import { AddressSmall, Badge, Button, Forget, Icon, Tags } from '@polkadot/react-components'; +import { useAccountInfo, useApi, useCall, useToggle } from '@polkadot/react-hooks'; +import { keyring } from '@polkadot/ui-keyring'; +import { BN, formatBalance, formatNumber, isFunction } from '@polkadot/util'; + +import DelegateModal from '../modals/Delegate'; +import UndelegateModal from '../modals/Undelegate'; +import { useTranslation } from '../translate'; + +interface Props { + account: KeyringAddress; + className?: string; + delegation?: Delegation; + filter: string; + isFavorite: boolean; + proxy?: [ProxyDefinition[], BN]; + setBalance: (address: string, value: AccountBalance) => void; + toggleFavorite: (address: string) => void; +} + +function calcVisible (filter: string, name: string, tags: string[]): boolean { + if (filter.length === 0) { + return true; + } + + const _filter = filter.toLowerCase(); + + return tags.reduce((result: boolean, tag: string): boolean => { + return result || tag.toLowerCase().includes(_filter); + }, name.toLowerCase().includes(_filter)); +} + +const transformRecovery = { + transform: (opt: Option) => opt.unwrapOr(null) +}; + +function Account ({ account: { address, meta }, className = '', delegation, filter, isFavorite, toggleFavorite }: Props): React.ReactElement | null { + const { t } = useTranslation(); + const [isExpanded] = useToggle(false); + const api = useApi(); + const recoveryInfo = useCall(api.api.query.recovery?.recoverable, [address], transformRecovery); + const { flags: { isDevelopment }, name: accName, tags } = useAccountInfo(address); + const [isForgetOpen, toggleForget] = useToggle(); + const [isDelegateOpen, toggleDelegate] = useToggle(); + const [isUndelegateOpen, toggleUndelegate] = useToggle(); + + const isVisible = useMemo( + () => calcVisible(filter, accName, tags), + [accName, filter, tags] + ); + + const _onFavorite = useCallback( + () => toggleFavorite(address), + [address, toggleFavorite] + ); + + const _onForget = useCallback( + (): void => { + if (!address) { + return; + } + + const status: Partial = { + account: address, + action: 'forget' + }; + + try { + keyring.forgetAccount(address); + status.status = 'success'; + status.message = t('account forgotten'); + } catch (error) { + status.status = 'error'; + status.message = (error as Error).message; + } + }, + [address, t] + ); + + if (!isVisible) { + return null; + } + + return ( + <> + {delegation?.accountDelegated && ( +
+ + + + + +
+
+ {meta.genesisHash + ? + : isDevelopment + ? ( + ('This is a development account derived from the known development seed. Do not use for any funds on a non-development network.')} + icon='wrench' + /> + ) + : ( + +

{t('This account is available on all networks. It is recommended to link to a specific network via the account options ("only this network" option) to limit availability. For accounts from an extension, set the network on the extension.')}

+

{t('This does not send any transaction, rather it only sets the genesis in the account JSON.')}

+
+ } + icon='exclamation-triangle' + /> + ) + } + {recoveryInfo && ( + +

{t('This account is recoverable, with the following friends:')}

+
+ {recoveryInfo.friends.map((friend, index): React.ReactNode => ( + + ))} +
+ + + + + + + + + + + + + + + +
{t('threshold')}{formatNumber(recoveryInfo.threshold)}
{t('delay')}{formatNumber(recoveryInfo.delayPeriod)}
{t('deposit')}{formatBalance(recoveryInfo.deposit)}
+
+ } + icon='redo' + /> + )} +
+
+ {delegation?.accountDelegated && ( + ('This account has a governance delegation')} + hoverAction={t('Manage delegation')} + icon='calendar-check' + onClick={toggleDelegate} + /> + )} +
+ + + + + {isDelegateOpen && ( + + )} + {isForgetOpen && ( + + )} + {isUndelegateOpen && ( + + )} + + {delegation?.accountDelegated && ( + + {isFunction(api.api.tx.balances?.transfer) && ( +