diff --git a/package.json b/package.json index a99b5c870e..8d6ac5f54f 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,10 @@ "packages/*" ], "resolutions": { - "@polkadot/api": "^0.100.0-beta.1", - "@polkadot/api-contract": "^0.100.0-beta.1", + "@polkadot/api": "^0.100.0-beta.2", + "@polkadot/api-contract": "^0.100.0-beta.2", "@polkadot/keyring": "^1.7.1", - "@polkadot/types": "^0.100.0-beta.1", + "@polkadot/types": "^0.100.0-beta.2", "@polkadot/util": "^1.7.1", "@polkadot/util-crypto": "^1.7.1", "babel-core": "^7.0.0-bridge.0", diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index 7815437b78..d9dfa207bb 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -9,12 +9,13 @@ import React, { useState, useEffect } from 'react'; import { Label } from 'semantic-ui-react'; import styled from 'styled-components'; import { AddressInfo, AddressSmall, Button, ChainLock, Forget, Icon, InputTags, LinkPolkascan, Menu, Popup, Input } from '@polkadot/react-components'; -import { useApi } from '@polkadot/react-hooks'; +import { useApi, useToggle } from '@polkadot/react-hooks'; import keyring from '@polkadot/ui-keyring'; import Backup from './modals/Backup'; import ChangePass from './modals/ChangePass'; import Derive from './modals/Derive'; +import Identity from './modals/Identity'; import Transfer from './modals/Transfer'; import translate from './translate'; @@ -31,16 +32,17 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite const [tags, setTags] = useState([]); const [accName, setAccName] = useState(''); const [genesisHash, setGenesisHash] = useState(null); - const [isBackupOpen, setIsBackupOpen] = useState(false); - const [isEditingName, setIsEditingName] = useState(false); - const [isEditingTags, setIsEditingTags] = useState(false); const [{ isDevelopment, isEditable, isExternal }, setFlags] = useState({ isDevelopment: false, isEditable: false, isExternal: false }); - const [isDeriveOpen, setIsDeriveOpen] = useState(false); - const [isForgetOpen, setIsForgetOpen] = useState(false); - const [isPasswordOpen, setIsPasswordOpen] = useState(false); - const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false); - const [isTransferOpen, setIsTransferOpen] = useState(false); const [isVisible, setIsVisible] = useState(true); + const [isEditingName, toggleEditName] = useToggle(); + const [isEditingTags, toggleEditTags] = useToggle(); + const [isBackupOpen, toggleBackup] = useToggle(); + const [isDeriveOpen, toggleDerive] = useToggle(); + const [isForgetOpen, toggleForget] = useToggle(); + const [isIdentityOpen, toggleIdentity] = useToggle(); + const [isPasswordOpen, togglePassword] = useToggle(); + const [isSettingsOpen, toggleSettings] = useToggle(); + const [isTransferOpen, toggleTransfer] = useToggle(); const _setTags = (tags: string[]): void => setTags(tags.sort()); @@ -73,16 +75,8 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite return null; } - const _toggleEditName = (): void => setIsEditingName(!isEditingName); - const _toggleEditTags = (): void => setIsEditingTags(!isEditingTags); - const _toggleBackup = (): void => setIsBackupOpen(!isBackupOpen); - const _toggleDerive = (): void => setIsDeriveOpen(!isDeriveOpen); - const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen); - const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen); - const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen); - const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen); const _saveName = (): void => { - _toggleEditName(); + toggleEditName(); const meta = { name: accName, whenEdited: Date.now() }; @@ -97,7 +91,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite } }; const _saveTags = (): void => { - _toggleEditTags(); + toggleEditTags(); const meta = { tags, whenEdited: Date.now() }; @@ -165,7 +159,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite ) : undefined } - onClickName={_toggleEditName} + onClickName={toggleEditName} toggle={isEditingName} value={address} /> @@ -173,14 +167,14 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite )} {isDeriveOpen && ( )} {isForgetOpen && ( @@ -188,20 +182,27 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite address={address} onForget={_onForget} key='modal-forget-account' - onClose={_toggleForget} + onClose={toggleForget} + /> + )} + {isIdentityOpen && ( + )} {isPasswordOpen && ( )} {isTransferOpen && ( )} @@ -221,7 +222,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite /> ) : ( -
+
{tags.length ? tags.map((tag): React.ReactNode => ( @@ -252,19 +253,19 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite icon='paper plane' isPrimary label={t('send')} - onClick={_toggleTransfer} + onClick={toggleTransfer} size='small' tooltip={t('Send funds from this account')} /> } @@ -272,32 +273,35 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite - {t('Derive account from source')} + {t('Set on-chain identity')} - - {t('Change on-chain nickname')} + + {t('Derive account via derivation path')} {t('Create a backup file for this account')} {t("Change this account's password")} {t('Forget this account')} diff --git a/packages/app-accounts/src/modals/Identity.tsx b/packages/app-accounts/src/modals/Identity.tsx new file mode 100644 index 0000000000..fe409ac741 --- /dev/null +++ b/packages/app-accounts/src/modals/Identity.tsx @@ -0,0 +1,230 @@ +// Copyright 2017-2019 @polkadot/app-accounts 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 { Registration } from '@polkadot/types/interfaces'; + +import React, { useEffect, useState } from 'react'; +import styled from 'styled-components'; +import { Button, Input, Modal, Toggle, TxButton } from '@polkadot/react-components'; +import { useApi, useCall } from '@polkadot/react-hooks'; +import { Data, Option } from '@polkadot/types'; +import { u8aToString } from '@polkadot/util'; + +import { useTranslation } from '../translate'; + +interface Props { + address: string; + className?: string; + onClose: () => void; +} + +interface WrapProps { + children: React.ReactNode; + onChange: (isChecked: boolean) => void; + value: boolean; +} + +function setData (data: Data, setActive: null | ((isActive: boolean) => void), setVal: (val: string) => void): void { + if (data.isRaw) { + setActive && setActive(true); + setVal(u8aToString(data.asRaw.toU8a(true))); + } +} + +function WrapToggle ({ children, onChange, value }: WrapProps): React.ReactElement { + const { t } = useTranslation(); + + return ( +
+ {children} + +
+ ); +} + +function Identity ({ address, className, onClose }: Props): React.ReactElement { + const { t } = useTranslation(); + const { api } = useApi(); + const identityOpt = useCall>(api.query.identity.identityOf, [address]); + const [info, setInfo] = useState({}); + const [hasEmail, setHasEmail] = useState(false); + // const [hasImg, setHasImg] = useState(false); + const [hasLegal, setHasLegal] = useState(false); + // const [hasPgp, setHasPgp] = useState(false); + const [hasRiot, setHasRiot] = useState(false); + const [hasWeb, setHasWeb] = useState(false); + const [valDisplay, setValDisplay] = useState(''); + const [valEmail, setValEmail] = useState(''); + // const [{ errImg, valImg }, setValImg] = useState<{ errImg: boolean; valImg: string }>({ errImg: true, valImg: '' }); + const [valLegal, setValLegal] = useState(''); + // const [{ errPgp, valPgp }, setValPgp] = useState<{ errPgp: boolean; valPgp: string }>({ errPgp: true, valPgp: '' }); + const [valRiot, setValRiot] = useState(''); + const [valWeb, setValWeb] = useState(''); + + useEffect((): void => { + if (identityOpt?.isSome) { + const { info } = identityOpt.unwrap(); + + setData(info.display, null, setValDisplay); + setData(info.email, setHasEmail, setValEmail); + setData(info.legal, setHasLegal, setValLegal); + setData(info.riot, setHasRiot, setValRiot); + setData(info.web, setHasWeb, setValWeb); + } + }, [identityOpt]); + + useEffect((): void => { + setInfo({ + display: { [valDisplay ? 'raw' : 'none']: valDisplay || null }, + email: { [hasEmail ? 'raw' : 'none']: hasEmail ? valEmail : null }, + legal: { [hasLegal ? 'raw' : 'none']: hasLegal ? valLegal : null }, + riot: { [hasRiot ? 'raw' : 'none']: hasRiot ? valRiot : null }, + web: { [hasWeb ? 'raw' : 'none']: hasWeb ? valWeb : null } + // image: { [hasImg ? 'sha256' : 'none']: hasImg ? valImg : null }, + // pgpFingerprint: hasPgp ? valPgp : null + }); + // errImg, errPgp, hasImg, hasPgp, valImg, valPgp, + }, [hasEmail, hasLegal, hasRiot, hasWeb, valDisplay, valEmail, valLegal, valRiot, valWeb]); + + return ( + + + + + '} + /> + + + '} + /> + + + '} + /> + + + '} + /> + + {/* + '} + /> + + + '} + /> + */} + + + +