From 3d43241a5a5a3c4882ca61f1e4fcbd43d462acd6 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 26 Aug 2019 14:57:57 +0200 Subject: [PATCH] Add ChainImg component (#1540) --- package.json | 2 +- packages/apps/src/SideBar/index.tsx | 82 +++++++++---------- .../src/ChainImg.tsx} | 53 +++++++++++- .../SideBar => react-components/src}/gif.d.ts | 0 packages/react-components/src/index.tsx | 1 + yarn.lock | 8 +- 6 files changed, 94 insertions(+), 52 deletions(-) rename packages/{apps/src/SideBar/logos.ts => react-components/src/ChainImg.tsx} (50%) rename packages/{apps/src/SideBar => react-components/src}/gif.d.ts (100%) diff --git a/package.json b/package.json index 40269486fe..afb0e9df17 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@babel/core": "^7.5.5", "@babel/runtime": "^7.5.5", "@polkadot/dev-react": "^0.31.0-beta.3", - "@polkadot/ts": "^0.1.64", + "@polkadot/ts": "^0.1.65", "autoprefixer": "^9.6.1", "empty": "^0.10.1", "gh-pages": "^2.1.1", diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx index d7bf58e685..de41640ae7 100644 --- a/packages/apps/src/SideBar/index.tsx +++ b/packages/apps/src/SideBar/index.tsx @@ -15,7 +15,7 @@ import styled from 'styled-components'; import { Responsive } from 'semantic-ui-react'; import routing from '@polkadot/apps-routing'; import { withCalls, withMulti } from '@polkadot/react-api'; -import { Button, Icon, Menu, media } from '@polkadot/react-components'; +import { Button, ChainImg, Icon, Menu, media } from '@polkadot/react-components'; import { classes } from '@polkadot/react-components/util'; import { logoBackground, logoPadding } from '@polkadot/react-components/styles/theme'; import { BestNumber, Chain } from '@polkadot/react-query'; @@ -23,15 +23,14 @@ import { BestNumber, Chain } from '@polkadot/react-query'; import translate from '../translate'; import Item from './Item'; import NodeInfo from './NodeInfo'; -import getLogo from './logos'; interface Props extends ApiProps, I18nProps { + className?: string; collapse: () => void; handleResize: () => void; isCollapsed: boolean; menuOpen: boolean; system_chain?: string; - system_name?: string; toggleMenu: () => void; } @@ -39,32 +38,6 @@ interface State { modals: Record; } -const Toggle = styled.img` - background: ${logoBackground}; - padding: ${logoPadding}; - border-radius: 50%; - cursor: pointer; - left: 0.9rem; - opacity: 0; - position: absolute; - top: 0px; - transition: opacity 0.2s ease-in, top 0.2s ease-in; - width: 2.8rem; - - &.delayed { - transition-delay: 0.4s; - } - &.open { - opacity: 1; - top: 0.9rem; - } - - ${media.DESKTOP` - opacity: 0 !important; - top: -2.9rem !important; - `} -`; - class SideBar extends React.PureComponent { public state: State; @@ -84,19 +57,16 @@ class SideBar extends React.PureComponent { } public render (): React.ReactNode { - const { handleResize, isCollapsed, system_name, toggleMenu, menuOpen } = this.props; - const logo = getLogo(system_name); + const { className, handleResize, isCollapsed, toggleMenu, menuOpen } = this.props; return ( - {this.renderModals()}
@@ -149,15 +119,11 @@ class SideBar extends React.PureComponent { } private renderLogo (): React.ReactNode { - const { api, isApiReady, system_chain, system_name } = this.props; - const logo = getLogo(system_name, system_chain); + const { api, isApiReady } = this.props; return (
- polkadot +
{isApiReady && @@ -265,10 +231,36 @@ class SideBar extends React.PureComponent { } export default withMulti( - SideBar, + styled(SideBar)` + .toggleImg { + background: ${logoBackground}; + padding: ${logoPadding}; + border-radius: 50%; + cursor: pointer; + left: 0.9rem; + opacity: 0; + position: absolute; + top: 0px; + transition: opacity 0.2s ease-in, top 0.2s ease-in; + width: 2.8rem; + + &.delayed { + transition-delay: 0.4s; + } + + &.open { + opacity: 1; + top: 0.9rem; + } + + ${media.DESKTOP` + opacity: 0 !important; + top: -2.9rem !important; + `} + } + `, translate, withCalls( - 'rpc.system.chain', - 'rpc.system.name' + 'rpc.system.chain' ) ); diff --git a/packages/apps/src/SideBar/logos.ts b/packages/react-components/src/ChainImg.tsx similarity index 50% rename from packages/apps/src/SideBar/logos.ts rename to packages/react-components/src/ChainImg.tsx index 41240597a3..d7a643d07e 100644 --- a/packages/apps/src/SideBar/logos.ts +++ b/packages/react-components/src/ChainImg.tsx @@ -1,7 +1,14 @@ +/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2019 @polkadot/apps 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 { ApiProps } from '@polkadot/react-api/types'; + +import React from 'react'; +import { withCalls } from '@polkadot/react-api'; +import { Text } from '@polkadot/types'; + // the imports here as a bit all-over, non-aphabetical - since we expect this to grow, // rather organise based on type, grouping chains and nodes as opposed to location @@ -30,6 +37,48 @@ const NODES: Record = { 'substrate-node': substrate }; -export default function getLogo (node: string = '', chain: string = ''): any { - return CHAINS[chain] || NODES[node] || EMPTY; +// overrides as specified +const LOGOS: Record = { + empty: EMPTY, + alexander: polkadot, + kusama: chainKusama, + polkadot, + substrate +}; + +interface Props extends ApiProps { + className?: string; + logo?: keyof typeof LOGOS; + onClick?: () => any; + system_chain?: Text; + system_name?: Text; } + +function getLogo (node: Text | string = '', chain: Text | string = ''): any { + return CHAINS[chain.toString()] || NODES[node.toString()]; +} + +function getOverride (logo: string = ''): any { + return LOGOS[logo]; +} + +class ChainImg extends React.PureComponent { + public render (): React.ReactNode { + const { className, logo, onClick, system_chain, system_name } = this.props; + const img = getOverride(logo) || getLogo(system_name, system_chain) || EMPTY; + + return ( + chain logo + ); + } +} + +export default withCalls( + 'rpc.system.chain', + 'rpc.system.name' +)(ChainImg); diff --git a/packages/apps/src/SideBar/gif.d.ts b/packages/react-components/src/gif.d.ts similarity index 100% rename from packages/apps/src/SideBar/gif.d.ts rename to packages/react-components/src/gif.d.ts diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index 5f7a475b31..3b634d18d4 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -16,6 +16,7 @@ export { default as Call } from './Call'; export { default as Card } from './Card'; export { default as CardGrid } from './CardGrid'; export { default as CardSummary } from './CardSummary'; +export { default as ChainImg } from './ChainImg'; export { default as Chart } from './Chart'; export { default as Columar } from './Columar'; export { default as Column } from './Column'; diff --git a/yarn.lock b/yarn.lock index 0330971f16..bf6b497d59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2128,10 +2128,10 @@ isomorphic-fetch "^2.2.1" websocket "^1.0.29" -"@polkadot/ts@^0.1.64": - version "0.1.64" - resolved "https://registry.yarnpkg.com/@polkadot/ts/-/ts-0.1.64.tgz#b92fd061fd936de6789f0857a0c8b41e087575b6" - integrity sha512-k+V6xYZ1FBw4VeYdKcVZBOvfH5rv/X4BijO8e6iEyVQDvM/kUh2USqqQaUEumJi9m9Vxw+4fMuQ07jDqMeTrGw== +"@polkadot/ts@^0.1.65": + version "0.1.65" + resolved "https://registry.yarnpkg.com/@polkadot/ts/-/ts-0.1.65.tgz#96eaff7ec06794b608d333ffa89eb820d3c8af36" + integrity sha512-pJjzp7Pn4Qa/dNoTwIb0SGWnW3m9AAaQbZD3v1Pqs2MEuhcoUpKmBVO2n1L76oglNphTMhl4BtvrrJNlPd096Q== dependencies: "@types/chrome" "^0.0.86"