From d0ed2897cb1f6c22088a0421523567d8e23446ee Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 24 Jan 2020 11:14:45 +0100 Subject: [PATCH] Add Westend, externalize endpoints (#2171) * Add Westend, externalize endpoints * Update scanner with all current namespaces * WebEnd type overrides * Westend link to Polkascan --- i18next-scanner.config.js | 2 +- packages/app-settings/src/Developer.tsx | 25 ++++----- packages/app-settings/src/General.tsx | 55 +++++++------------ packages/app-settings/src/SelectUrl.tsx | 49 +++++++++-------- .../app-settings/src/available/endpoints.ts | 50 +++++++++++++++++ packages/app-settings/src/available/index.ts | 11 ++++ .../app-settings/src/available/languages.ts | 25 +++++++++ packages/app-settings/src/index.tsx | 24 ++++---- packages/app-settings/src/types.ts | 8 +-- packages/app-settings/src/util.tsx | 10 ++-- .../react-api/src/overrides/chain/index.ts | 6 +- .../react-api/src/overrides/chain/westend.ts | 7 +++ packages/react-components/src/ChainImg.tsx | 3 +- .../react-components/src/LinkPolkascan.tsx | 3 +- packages/react-components/src/i18n.ts | 3 + 15 files changed, 179 insertions(+), 102 deletions(-) create mode 100644 packages/app-settings/src/available/endpoints.ts create mode 100644 packages/app-settings/src/available/index.ts create mode 100644 packages/app-settings/src/available/languages.ts create mode 100644 packages/react-api/src/overrides/chain/westend.ts diff --git a/i18next-scanner.config.js b/i18next-scanner.config.js index eede4f95c1..767e240d47 100644 --- a/i18next-scanner.config.js +++ b/i18next-scanner.config.js @@ -46,7 +46,7 @@ module.exports = { debug: true, func: { list: ['t', 'i18next.t', 'i18n.t'], - extensions: ['.tsx'] + extensions: ['.tsx', '.ts'] }, trans: { component: 'Trans' diff --git a/packages/app-settings/src/Developer.tsx b/packages/app-settings/src/Developer.tsx index 0820f7b1b6..2273f62a0c 100644 --- a/packages/app-settings/src/Developer.tsx +++ b/packages/app-settings/src/Developer.tsx @@ -2,7 +2,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { AppProps, I18nProps } from '@polkadot/react-components/types'; +import { AppProps as Props } from '@polkadot/react-components/types'; import React, { useEffect, useState } from 'react'; import store from 'store'; @@ -11,14 +11,13 @@ import { registry } from '@polkadot/react-api'; import { Button, Editor, InputFile } from '@polkadot/react-components'; import { isJsonObject, stringToU8a, u8aToString } from '@polkadot/util'; -import translate from './translate'; - -interface Props extends AppProps, I18nProps {} +import { useTranslation } from './translate'; const EMPTY_CODE = '{\n\n}'; const EMPTY_TYPES = {}; -function Developer ({ className, onStatusChange, t }: Props): React.ReactElement { +function Developer ({ className, onStatusChange }: Props): React.ReactElement { + const { t } = useTranslation(); const [code, setCode] = useState(EMPTY_CODE); const [isJsonValid, setIsJsonValid] = useState(true); const [isTypesValid, setIsTypesValid] = useState(true); @@ -160,12 +159,10 @@ function Developer ({ className, onStatusChange, t }: Props): React.ReactElement ); } -export default translate( - styled(Developer)` - .editor { - height: 21rem; - margin-left: 2rem; - position: relative; - } - ` -); +export default styled(Developer)` + .editor { + height: 21rem; + margin-left: 2rem; + position: relative; + } +`; diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx index dc63d36303..00311f2c20 100644 --- a/packages/app-settings/src/General.tsx +++ b/packages/app-settings/src/General.tsx @@ -2,49 +2,43 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { I18nProps } from '@polkadot/react-components/types'; -import { Option, SetOption } from './types'; +import { Option } from './types'; import React, { useEffect, useState, useMemo } from 'react'; import { isLedgerCapable } from '@polkadot/react-api'; import { Button, ButtonCancel, Dropdown } from '@polkadot/react-components'; import uiSettings, { SettingsStruct } from '@polkadot/ui-settings'; -import translate from './translate'; +import { availableLanguages } from './available'; +import { useTranslation } from './translate'; import { createIdenticon, createOption, save, saveAndReload } from './util'; import SelectUrl from './SelectUrl'; -interface Props extends I18nProps{ +interface Props { + className?: string; isModalContent?: boolean; onClose: () => void; } -const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default'])); -const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default'])); const ledgerConnOptions = uiSettings.availableLedgerConn; -const availableLanguages: SetOption[] = [ - { - text: 'Default browser language (auto-detect)', - value: 'default' - }, - { - text: 'English', - value: 'en' - }, - { - text: '汉语', - value: 'zh' - }, - { - text: '日本語', - value: 'ja' - } -]; -function General ({ className, isModalContent, onClose, t }: Props): React.ReactElement { +export default function General ({ className, isModalContent, onClose }: Props): React.ReactElement { + const { t } = useTranslation(); // tri-state: null = nothing changed, false = no reload, true = reload required const [changed, setChanged] = useState(null); const [settings, setSettings] = useState(uiSettings.get()); + const iconOptions = useMemo((): Option[] => { + return uiSettings.availableIcons.map((o): Option => createIdenticon(t, o, ['default'])); + }, [t]); + const prefixOptions = useMemo((): Option[] => { + return uiSettings.availablePrefixes.map((o): Option => createOption(t, o, ['default'])); + }, [t]); + const translateLanguages = useMemo((): Option[] => { + return availableLanguages.map(({ text, value, withI18n }) => ({ + value, + text: withI18n ? t(text as string) : text + })); + }, [t]); useEffect((): void => { const prev = uiSettings.get(); @@ -67,13 +61,6 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React setChanged(null); }; - const translatedAvailableLanguages = useMemo(() => - availableLanguages.map(option => ({ - ...option, - text: t(option.text) - })) - , [t]); - const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings; return ( @@ -124,7 +111,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React defaultValue={i18nLang} label={t('default interface language')} onChange={_handleChange('i18nLang')} - options={translatedAvailableLanguages} + options={translateLanguages} /> @@ -155,5 +142,3 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React ); } - -export default translate(General); diff --git a/packages/app-settings/src/SelectUrl.tsx b/packages/app-settings/src/SelectUrl.tsx index de05c40246..4512e59b2f 100644 --- a/packages/app-settings/src/SelectUrl.tsx +++ b/packages/app-settings/src/SelectUrl.tsx @@ -2,18 +2,18 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { I18nProps } from '@polkadot/react-components/types'; import { Option } from './types'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; import { Dropdown, Input, Toggle } from '@polkadot/react-components'; import uiSettings from '@polkadot/ui-settings'; -import translate from './translate'; +import { availableEndpoints } from './available'; +import { useTranslation } from './translate'; import { createOption } from './util'; -interface Props extends I18nProps { +interface Props { className?: string; onChange: (url: string) => void; } @@ -27,8 +27,6 @@ interface State extends StateUrl { isCustom: boolean; } -const endpointOptions = uiSettings.availableNodes.map((o): Option => createOption(o, ['local'])); - // check the validity of the url function isValidUrl (url: string): boolean { return ( @@ -59,11 +57,22 @@ function getInitialState (): State { return { isCustom, isValid, url }; } -function SelectUrl ({ className, onChange, t }: Props): React.ReactElement { +function SelectUrl ({ className, onChange }: Props): React.ReactElement { + const { t } = useTranslation(); const [info, setInfo] = useState(getInitialState()); const { isCustom, isValid, url } = info; const help = t('Select the remote endpoint, either from the dropdown on manual entered via the custom toggle'); const label = t('remote node/endpoint to connect to'); + const translatedEndpoints = useMemo(() => { + return availableEndpoints.map((option): Option => createOption(t, option, ['local'])); + }, [t]); + + useEffect((): void => { + if (onChange && info.isValid) { + onChange(info.url); + } + }, [info]); + const _onChangeUrl = (url: string): void => setInfo({ ...info, ...makeUrl(url) }); const _onChangeCustom = (isCustom: boolean): void => setInfo({ @@ -75,12 +84,6 @@ function SelectUrl ({ className, onChange, t }: Props): React.ReactElement { - if (onChange && info.isValid) { - onChange(info.url); - } - }, [info]); - return (
{ @@ -97,7 +100,7 @@ function SelectUrl ({ className, onChange, t }: Props): React.ReactElement }