From b7bea3c1fc6024d40bb9a75601308b04a97a8183 Mon Sep 17 00:00:00 2001 From: Hahahayabanan Date: Fri, 4 Sep 2020 17:08:31 +0400 Subject: [PATCH 1/2] Replace components from akroweb --- package.json | 6 +- .../LoanProposalsTable/LoanProposalsTable.tsx | 11 +- src/components/ComingSoon/ComingSoon.tsx | 53 +--- src/components/Label/Label.tsx | 85 +----- src/components/Metric/Metric.tsx | 55 +--- src/components/NewTable/Table.style.ts | 120 -------- src/components/NewTable/Table.tsx | 272 ------------------ .../RowExpander/RowExpander.style.tsx | 17 -- .../components/RowExpander/RowExpander.tsx | 29 -- .../components/RowExpander/icons/Arrow.tsx | 12 - .../components/RowExpander/icons/index.ts | 1 - .../NewTable/components/RowExpander/index.ts | 1 - .../components/Summary/Summary.style.tsx | 16 -- .../NewTable/components/Summary/Summary.tsx | 23 -- .../NewTable/components/Summary/index.ts | 1 - src/components/NewTable/components/index.ts | 2 - src/components/NewTable/index.ts | 5 +- src/components/NewTable/models.ts | 44 --- .../ShortAddress/ShortAddress.style.ts | 14 - src/components/ShortAddress/ShortAddress.tsx | 54 +--- src/components/index.ts | 28 +- .../AuthButton/components/ProviderButton.tsx | 11 +- 22 files changed, 27 insertions(+), 833 deletions(-) delete mode 100644 src/components/NewTable/Table.style.ts delete mode 100644 src/components/NewTable/Table.tsx delete mode 100644 src/components/NewTable/components/RowExpander/RowExpander.style.tsx delete mode 100644 src/components/NewTable/components/RowExpander/RowExpander.tsx delete mode 100644 src/components/NewTable/components/RowExpander/icons/Arrow.tsx delete mode 100644 src/components/NewTable/components/RowExpander/icons/index.ts delete mode 100644 src/components/NewTable/components/RowExpander/index.ts delete mode 100644 src/components/NewTable/components/Summary/Summary.style.tsx delete mode 100644 src/components/NewTable/components/Summary/Summary.tsx delete mode 100644 src/components/NewTable/components/Summary/index.ts delete mode 100644 src/components/NewTable/components/index.ts delete mode 100644 src/components/NewTable/models.ts delete mode 100644 src/components/ShortAddress/ShortAddress.style.ts diff --git a/package.json b/package.json index 36e95d14..1da2c469 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,9 @@ "author": "Serdtsev Dmitriy", "license": "MIT", "dependencies": { - "@akropolis-web/components": "^0.5.3", - "@akropolis-web/primitives": "^0.2.0", - "@akropolis-web/styles": "^0.8.0", + "@akropolis-web/components": "^0.10.1", + "@akropolis-web/primitives": "^0.2.3", + "@akropolis-web/styles": "^0.9.0", "@apollo/react-common": "^3.1.3", "@apollo/react-hooks": "^3.1.3", "@erebos/bzz": "^0.13.0", diff --git a/src/app/pages/Lend/views/LoanProposalsTable/LoanProposalsTable.tsx b/src/app/pages/Lend/views/LoanProposalsTable/LoanProposalsTable.tsx index 846680aa..eaa164d4 100644 --- a/src/app/pages/Lend/views/LoanProposalsTable/LoanProposalsTable.tsx +++ b/src/app/pages/Lend/views/LoanProposalsTable/LoanProposalsTable.tsx @@ -52,10 +52,7 @@ function AdditionalInfoContent(props: Pick) { ); } -const makeColumns = ( - isStakingAllowed: boolean, - backgroundColor: string, -): Array> => [ +const makeColumns = (isStakingAllowed: boolean): Array> => [ { renderTitle: () => 'Borrower', cellContent: { @@ -106,7 +103,6 @@ const makeColumns = ( variant="outlined" color="primary" size="small" - backgroundColor={backgroundColor} loanSize={x.loanRequested.toString()} proposalId={x.proposalId} borrower={x.borrower} @@ -135,10 +131,7 @@ export function LoanProposalsTable(props: Props) { const classes = useStyles(); const theme = useTheme(); - const columns = useMemo(() => makeColumns(isStakingAllowed, theme.palette.background.paper), [ - isStakingAllowed, - theme, - ]); + const columns = useMemo(() => makeColumns(isStakingAllowed), [isStakingAllowed, theme]); function renderTableHeader() { return ( diff --git a/src/components/ComingSoon/ComingSoon.tsx b/src/components/ComingSoon/ComingSoon.tsx index b75a11d9..8af76425 100644 --- a/src/components/ComingSoon/ComingSoon.tsx +++ b/src/components/ComingSoon/ComingSoon.tsx @@ -1,52 +1 @@ -import * as React from 'react'; -import cn from 'classnames'; - -import { makeStyles } from 'utils/styles'; - -type Props = { - variant?: 'label' | 'default'; -}; - -export function ComingSoon(props: Props) { - const classes = useStyles(); - const { variant = 'default' } = props; - - return ( -
- Coming soon -
- ); -} - -const useStyles = makeStyles( - theme => ({ - root: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - padding: 10, - background: theme.palette.background.hint, - borderRadius: 4, - }, - isLabel: { - minWidth: 86, - padding: '6px 8px', - borderRadius: 12.5, - - '& $text': { - fontSize: 12, - lineHeight: 1.1, - fontWeight: 300, - fontStyle: 'italic', - }, - }, - text: { - whiteSpace: 'nowrap', - }, - }), - { name: 'ComingSoon' }, -); +export { ComingSoon } from '@akropolis-web/components'; diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 158a6b2d..08442129 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -1,84 +1 @@ -import * as React from 'react'; -import cn from 'classnames'; -import Typography from '@material-ui/core/Typography'; -import Tooltip from '@material-ui/core/Tooltip'; - -import { InfoIconV2 } from 'components/icons'; -import { ComingSoon } from 'components/ComingSoon/ComingSoon'; -import { makeStyles } from 'utils/styles'; - -type Props = { - hint?: React.ReactNode; - fontSize?: 'inherit' | 'medium' | 'large'; - icon?: React.ReactNode; - inline?: boolean; - withComingSoon?: boolean; -}; - -export const Label: React.FC = props => { - const { hint, inline, icon, children, withComingSoon, fontSize = 'inherit' } = props; - const classes = useStyles(props); - - return ( - - {icon && <>{icon} } - {children} - {hint && ( - - - - - - )} - {withComingSoon && ( - - - - )} - - ); -}; - -const useStyles = makeStyles( - () => ({ - title: { - display: 'flex', - alignItems: 'center', - lineHeight: 'normal', - - '&$inherit': { - fontSize: 'inherit', - fontWeight: 400, - }, - '&$medium': { - fontSize: 16, - fontWeight: 400, - }, - '&$large': { - fontSize: 22, - fontWeight: 300, - }, - }, - - inline: { - display: 'inline-flex', - }, - - infoIcon: { - marginLeft: 10, - }, - - comingSoonLabel: { - marginLeft: 13, - }, - - inherit: {}, - medium: {}, - large: {}, - }), - { name: 'Label' }, -); +export { Label } from '@akropolis-web/components'; diff --git a/src/components/Metric/Metric.tsx b/src/components/Metric/Metric.tsx index 5dbfacfd..81a28b8b 100644 --- a/src/components/Metric/Metric.tsx +++ b/src/components/Metric/Metric.tsx @@ -1,54 +1 @@ -import * as React from 'react'; - -import { makeStyles } from 'utils/styles'; - -type Props = { - title: NonNullable; - value: NonNullable; - subValue?: React.ReactNode; - chart?: React.ReactNode; -}; - -export function Metric(props: Props) { - const { title, value, subValue, chart } = props; - const classes = useStyles(); - - return ( -
-
{title}
-
- {value} - {chart &&
{chart}
} -
- {subValue &&
{subValue}
} -
- ); -} - -const useStyles = makeStyles( - () => ({ - root: {}, - title: { - marginBottom: 13, - fontSize: 16, - }, - value: { - display: 'flex', - alignItems: 'center', - fontSize: 32, - fontWeight: 300, - lineHeight: 'normal', - }, - subValue: { - marginTop: 8, - fontSize: 16, - }, - chart: { - marginBottom: 8, - marginLeft: 10, - alignSelf: 'flex-end', - lineHeight: 0, - }, - }), - { name: 'Metric' }, -); +export { Metric } from '@akropolis-web/components'; diff --git a/src/components/NewTable/Table.style.ts b/src/components/NewTable/Table.style.ts deleted file mode 100644 index a17fb662..00000000 --- a/src/components/NewTable/Table.style.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { makeStyles } from 'utils/styles'; - -export const useStyles = makeStyles( - theme => { - const crossRowBorderStyleForFirstCell = { - borderImage: `linear-gradient(to right, transparent 50px, ${theme.colors.jaguar} 50px) 1 / 0 0 1 0`, - border: '1px solid', - }; - - const crossRowBorderStyleForLastCell = { - borderImage: `linear-gradient(to right, ${theme.colors.jaguar} calc(100% - 50px), transparent calc(100% - 50px)) 1 / 0 0 1 0`, - border: '1px solid', - }; - - const crossRowBorder = `1px solid ${theme.colors.jaguar}`; - - return { - root: { - width: '100%', - borderSpacing: 0, - - '& tr:not($subtableRow) + $subtableRow $cell': { - paddingTop: 30, - }, - - '& $cell:first-child': { - paddingLeft: 0, - }, - '& $cell:last-child': { - paddingRight: 0, - }, - }, - - withOuterPadding: { - '& $cell:first-child': { - paddingLeft: 50, - }, - '& $cell:last-child': { - paddingRight: 50, - }, - - '& $topLevelTitle': { - '&:first-child': crossRowBorderStyleForFirstCell, - '&:last-child': crossRowBorderStyleForLastCell, - }, - }, - - withStripes: { - '& tr:not($rowWithExpandedContent):not(:last-child) $cellData': { - borderBottom: crossRowBorder, - }, - - '&$withOuterPadding tr:not($rowWithExpandedContent):not(:last-child) $cellData': { - '&:first-child': crossRowBorderStyleForFirstCell, - '&:last-child': crossRowBorderStyleForLastCell, - }, - }, - - cell: {}, - - title: { - textAlign: 'left', - fontWeight: 'normal', - padding: '0 10px 20px', - }, - - cellAlignLeft: { - textAlign: 'left', - }, - - cellAlignRight: { - textAlign: 'right', - }, - - cellAlignCenter: { - textAlign: 'center', - }, - - topLevelTitle: { - borderBottom: crossRowBorder, - }, - - subtableRow: { - backgroundColor: theme.colors.jaguar, - }, - - lastSubtableRow: { - '& $cell': { - paddingBottom: 30, - }, - }, - - cellData: { - fontWeight: 300, - padding: '26px 10px', - }, - - singleCellExpandedArea: { - padding: '32px 50px 23px', - backgroundColor: theme.colors.jaguar, - }, - - summaryCell: { - paddingTop: 30, - }, - - rowBeforeSummary: { - '&:not($rowWithExpandedContent) $cell': { - borderBottom: crossRowBorder, - - '&:first-child': crossRowBorderStyleForFirstCell, - '&:last-child': crossRowBorderStyleForLastCell, - }, - }, - - rowWithExpandedContent: {}, - }; - }, - { name: 'Table' }, -); diff --git a/src/components/NewTable/Table.tsx b/src/components/NewTable/Table.tsx deleted file mode 100644 index c82c4a93..00000000 --- a/src/components/NewTable/Table.tsx +++ /dev/null @@ -1,272 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import React from 'react'; -import * as R from 'ramda'; -import cn from 'classnames'; - -import { useStyles } from './Table.style'; -import * as views from './components'; -import * as M from './models'; - -type Props = { - entries: T[]; - columns: Array>; - withStripes?: boolean; - withOuterPadding?: boolean; - summary?: M.Summary; -}; - -type RowToExpandedState = Record; - -export function Table(props: Props) { - const classes = useStyles(); - - const alignPropertyToClass: Record = { - center: classes.cellAlignCenter, - left: classes.cellAlignLeft, - right: classes.cellAlignRight, - }; - - const { columns, entries, summary, withStripes, withOuterPadding } = props; - - const [rowToExpanded, setRowToExpanded] = React.useState(() => - entries.reduce( - (acc, _, index) => ({ - ...acc, - [index]: false, - }), - {}, - ), - ); - - const expandedArea: M.ExpandedArea | null = (() => { - const contentWithRowExpander = columns.find(x => x.cellContent.kind === 'for-row-expander') - ?.cellContent as M.CellContentForRowExpander | undefined; - - return contentWithRowExpander?.expandedArea || null; - })(); - - return ( - - - {columns.map(renderTitle)} - - {renderEntriesAndSummary()} -
- ); - - function renderEntriesAndSummary() { - if (summary) { - return ( - <> - {entries.map((x, index) => renderEntry(x, index, index === entries.length - 1))} - {renderSummary(summary)} - - ); - } - - return entries.map((x, index) => renderEntry(x, index)); - } - - function renderSummary(x: M.Summary) { - return ( - - - - - - ); - } - - function getAlignClass({ align }: M.Column) { - return align && alignPropertyToClass[align]; - } - - function renderTitle(column: M.Column, columnIndex: number) { - return ( - - {column.renderTitle()} - - ); - } - - function renderEntry(entry: T, rowIndex: number, beforeSummary?: boolean) { - if (expandedArea === null) { - return ( - - {renderEntryRow(entry, rowIndex, beforeSummary)} - - ); - } - - return ( - - {renderEntryRow(entry, rowIndex, beforeSummary)} - {rowToExpanded[rowIndex] && renderEntryExpandedArea(entry, expandedArea)} - - ); - } - - function renderEntryExpandedArea(entry: T, area: M.ExpandedArea) { - switch (area.kind) { - case 'single-cell': - return renderAreaWithinSingleCell(entry, area); - case 'subtable': - return renderAreaWithinSubtable(entry, area); - } - } - - function renderAreaWithinSingleCell(entry: T, area: M.ExpandedAreaWithinSingleCell) { - return ( - - - {area.renderContent(entry)} - - - ); - } - - function renderAreaWithinSubtable(entry: T, area: M.ExpandedAreaWithinSubtable) { - const subtableEntries = area.getSubtableEntries(entry); - - const adjustedSubtableColumns = (() => { - const subtableCols = area.subtableColumns; - - const subtableColsNumber = area.subtableColumns.length; - const tableColsNumber = columns.length; - - if (subtableColsNumber < tableColsNumber) { - const colsToAdd = R.repeat>( - { - renderCell: () => null, - renderTitle: () => null, - }, - tableColsNumber - subtableColsNumber, - ); - - return subtableCols.concat(colsToAdd); - } - - if (subtableColsNumber > tableColsNumber) { - console.warn('unexpected subtable columns number > table columns number'); - - return subtableCols.slice(0, subtableColsNumber); - } - - return subtableCols; - })(); - - return ( - <> - - {adjustedSubtableColumns.map(renderSubtableHeader)} - - {subtableEntries.map((x, index) => - renderSubtableEntry( - adjustedSubtableColumns, - x, - index, - index === subtableEntries.length - 1, - ), - )} - - ); - } - - function renderSubtableHeader(x: M.SubtableColumn, columnIndex: number) { - return ( - - {x.renderTitle()} - - ); - } - - function renderSubtableEntry( - subtableColumns: Array>, - subtableEntry: U, - subtableRowIndex: number, - last: boolean, - ) { - return ( - - {subtableColumns.map(makeSubtableCellRenderer(subtableEntry))} - - ); - } - - function makeSubtableCellRenderer(entry: U) { - return (column: M.SubtableColumn, columnIndex: number) => { - return ( - -
{column.renderCell(entry)}
- - ); - }; - } - - function renderEntryRow(entry: T, rowIndex: number, beforeSummary?: boolean) { - return ( - - {columns.map(makeCellRenderer(entry, rowIndex))} - - ); - } - - function makeCellRenderer(entry: T, rowIndex: number) { - return (column: M.Column, columnIndex: number) => { - switch (column.cellContent.kind) { - case 'simple': - return renderCellWithSimpleContent(entry, column.cellContent, columnIndex, column); - - case 'for-row-expander': - return renderCellWithContentForRowExpander(rowIndex, column); - } - }; - } - - function renderCellWithSimpleContent( - entry: T, - content: M.SimpleCellContent, - columnIndex: number, - column: M.Column, - ) { - return ( - - {content.render(entry)} - - ); - } - - function renderCellWithContentForRowExpander(rowIndex: number, column: M.Column) { - const handleToggle = (newValue: boolean) => - setRowToExpanded({ ...rowToExpanded, [rowIndex]: newValue }); - - return ( - - - - ); - } -} diff --git a/src/components/NewTable/components/RowExpander/RowExpander.style.tsx b/src/components/NewTable/components/RowExpander/RowExpander.style.tsx deleted file mode 100644 index 2bd71dea..00000000 --- a/src/components/NewTable/components/RowExpander/RowExpander.style.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { makeStyles } from 'utils/styles'; - -export const useStyles = makeStyles(theme => { - return { - root: { - width: '58px', - height: '30px', - borderRadius: '23px', - backgroundColor: theme.colors.blackRussian, - }, - - expanded: { - transform: 'rotate(180deg)', - backgroundColor: theme.colors.grayishNavy, - }, - }; -}); diff --git a/src/components/NewTable/components/RowExpander/RowExpander.tsx b/src/components/NewTable/components/RowExpander/RowExpander.tsx deleted file mode 100644 index d8372c5b..00000000 --- a/src/components/NewTable/components/RowExpander/RowExpander.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import cn from 'classnames'; - -import { Arrow } from './icons'; -import { useStyles } from './RowExpander.style'; - -type Props = { - expanded: boolean; - onToggle(newValue: boolean): void; -}; - -export const RowExpander: React.FC = props => { - const { expanded, onToggle } = props; - - const classes = useStyles(); - - return ( - - ); -}; diff --git a/src/components/NewTable/components/RowExpander/icons/Arrow.tsx b/src/components/NewTable/components/RowExpander/icons/Arrow.tsx deleted file mode 100644 index 1867e7ef..00000000 --- a/src/components/NewTable/components/RowExpander/icons/Arrow.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; - -export const Arrow: React.FC = () => { - return ( - - - - ); -}; diff --git a/src/components/NewTable/components/RowExpander/icons/index.ts b/src/components/NewTable/components/RowExpander/icons/index.ts deleted file mode 100644 index ac374c9c..00000000 --- a/src/components/NewTable/components/RowExpander/icons/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Arrow } from './Arrow'; diff --git a/src/components/NewTable/components/RowExpander/index.ts b/src/components/NewTable/components/RowExpander/index.ts deleted file mode 100644 index c1f39eba..00000000 --- a/src/components/NewTable/components/RowExpander/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { RowExpander } from './RowExpander'; diff --git a/src/components/NewTable/components/Summary/Summary.style.tsx b/src/components/NewTable/components/Summary/Summary.style.tsx deleted file mode 100644 index a0621927..00000000 --- a/src/components/NewTable/components/Summary/Summary.style.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { makeStyles } from 'utils/styles'; - -export const useStyles = makeStyles( - () => { - return { - root: { - display: 'flex', - justifyContent: 'space-between', - }, - - label: {}, - value: {}, - }; - }, - { name: 'Summary' }, -); diff --git a/src/components/NewTable/components/Summary/Summary.tsx b/src/components/NewTable/components/Summary/Summary.tsx deleted file mode 100644 index 322e0967..00000000 --- a/src/components/NewTable/components/Summary/Summary.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -import * as M from '../../models'; -import { useStyles } from './Summary.style'; - -type Props = { - summary: M.Summary; -}; - -export const Summary: React.FC = props => { - const { - summary: { renderLabel, renderValue }, - } = props; - - const classes = useStyles(); - - return ( -
-
{renderLabel()}
-
{renderValue()}
-
- ); -}; diff --git a/src/components/NewTable/components/Summary/index.ts b/src/components/NewTable/components/Summary/index.ts deleted file mode 100644 index 69e66c91..00000000 --- a/src/components/NewTable/components/Summary/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Summary } from './Summary'; diff --git a/src/components/NewTable/components/index.ts b/src/components/NewTable/components/index.ts deleted file mode 100644 index eaa45088..00000000 --- a/src/components/NewTable/components/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { RowExpander } from './RowExpander'; -export { Summary } from './Summary'; diff --git a/src/components/NewTable/index.ts b/src/components/NewTable/index.ts index a3e876c6..f32c0da4 100644 --- a/src/components/NewTable/index.ts +++ b/src/components/NewTable/index.ts @@ -1,4 +1 @@ -import * as models from './models'; - -export { models }; -export { Table as Component } from './Table'; +export { Table } from '@akropolis-web/components'; diff --git a/src/components/NewTable/models.ts b/src/components/NewTable/models.ts deleted file mode 100644 index 9cd0c7c3..00000000 --- a/src/components/NewTable/models.ts +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; - -export type AlignProperty = 'left' | 'right' | 'center'; - -export type Column = { - cellContent: CellContent; - align?: AlignProperty; - renderTitle(): React.ReactNode; -}; - -export type CellContent = SimpleCellContent | CellContentForRowExpander; - -export type SimpleCellContent = { - kind: 'simple'; - render(entry: T): React.ReactNode; -}; - -export type CellContentForRowExpander = { - kind: 'for-row-expander'; - expandedArea: ExpandedArea; -}; - -export type ExpandedArea = ExpandedAreaWithinSingleCell | ExpandedAreaWithinSubtable; - -export type ExpandedAreaWithinSingleCell = { - kind: 'single-cell'; - renderContent(entry: T): React.ReactNode; -}; - -export type ExpandedAreaWithinSubtable = { - kind: 'subtable'; - getSubtableEntries(entry: T): U[]; - subtableColumns: Array>; -}; - -export type SubtableColumn = { - renderTitle(): React.ReactNode; - renderCell(subtableEntry: T): React.ReactNode; -}; - -export type Summary = { - renderLabel(): React.ReactNode; - renderValue(): React.ReactNode; -}; diff --git a/src/components/ShortAddress/ShortAddress.style.ts b/src/components/ShortAddress/ShortAddress.style.ts deleted file mode 100644 index 529f54da..00000000 --- a/src/components/ShortAddress/ShortAddress.style.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { makeStyles, rgba } from 'utils/styles'; - -export const useStyles = makeStyles(theme => { - return { - shortAddress: { - fontSize: 'inherit', - color: 'inherit', - }, - tooltip: { - cursor: 'pointer', - borderBottom: `1px dashed ${rgba(theme.palette.text.primary, 0.5)}`, - }, - }; -}); diff --git a/src/components/ShortAddress/ShortAddress.tsx b/src/components/ShortAddress/ShortAddress.tsx index 89bf139c..e7ba0cda 100644 --- a/src/components/ShortAddress/ShortAddress.tsx +++ b/src/components/ShortAddress/ShortAddress.tsx @@ -1,53 +1 @@ -import React, { useState, useCallback, useRef } from 'react'; -import Tooltip from '@material-ui/core/Tooltip'; -import CopyToClipboard from 'react-copy-to-clipboard'; - -import { useTheme } from 'utils/styles'; -import { getShortAddress } from 'utils/format'; - -import { useStyles } from './ShortAddress.style'; - -function ShortAddress({ address, disableCopy }: { address: string; disableCopy?: boolean }) { - const classes = useStyles(); - const theme = useTheme(); - - const [tooltipTitle, setTooltipTitle] = useState<'copy' | 'copied!'>('copy'); - const closeTimeout = useRef(0); - - const shortAddress = getShortAddress(address); - - const handleCopy = useCallback(() => { - setTooltipTitle('copied!'); - }, []); - - const handleTooltipClose = useCallback(() => { - if (tooltipTitle !== 'copy') { - closeTimeout.current = window.setTimeout( - () => setTooltipTitle('copy'), - theme.transitions.duration.shorter, - ); - } - }, [tooltipTitle]); - - const handleTooltipOpen = useCallback(() => { - clearTimeout(closeTimeout.current); - }, [tooltipTitle]); - - return disableCopy ? ( - {shortAddress} - ) : ( - - - {shortAddress} - - - ); -} - -export { ShortAddress }; +export { ShortAddress } from '@akropolis-web/components'; diff --git a/src/components/index.ts b/src/components/index.ts index b583f1fe..9e80ec73 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,27 +1,29 @@ -import * as NewTable from './NewTable'; - -export { NewTable }; -export { default as Box } from '@material-ui/core/Box'; -export { default as ButtonBase } from '@material-ui/core/ButtonBase'; -export { default as CircularProgress } from '@material-ui/core/CircularProgress'; -export { default as CssBaseline } from '@material-ui/core/CssBaseline'; -export { default as Divider } from '@material-ui/core/Divider'; +export { Table as NewTable } from './NewTable'; +export { + Box, + ButtonBase, + CircularProgress, + CssBaseline, + Grid, + Typography, + TypographyProps, + IconButton, + Link, + LinkProps, + Divider, + Skeleton, +} from '@akropolis-web/components'; export { default as Dialog } from '@material-ui/core/Dialog'; export { default as DialogContent } from '@material-ui/core/DialogContent'; export { default as DialogTitle } from '@material-ui/core/DialogTitle'; -export { default as Grid } from '@material-ui/core/Grid'; -export { default as Typography, TypographyProps } from '@material-ui/core/Typography'; -export { default as IconButton } from '@material-ui/core/IconButton'; export { default as Badge } from '@material-ui/core/Badge'; export { default as Tooltip } from '@material-ui/core/Tooltip'; export { default as Card } from '@material-ui/core/Card'; export { default as CardContent } from '@material-ui/core/CardContent'; export { default as FormControlLabel } from '@material-ui/core/FormControlLabel'; export { default as Radio } from '@material-ui/core/Radio'; -export { default as Link, LinkProps } from '@material-ui/core/Link'; export { default as Tab } from '@material-ui/core/Tab'; -export { default as Skeleton } from '@material-ui/lab/Skeleton'; export { default as TabsList } from '@material-ui/lab/TabList'; export { default as TabPanel } from '@material-ui/lab/TabPanel'; export { default as TabContext } from '@material-ui/lab/TabContext'; diff --git a/src/features/auth/AuthButton/components/ProviderButton.tsx b/src/features/auth/AuthButton/components/ProviderButton.tsx index bb9fd6eb..7150e42b 100644 --- a/src/features/auth/AuthButton/components/ProviderButton.tsx +++ b/src/features/auth/AuthButton/components/ProviderButton.tsx @@ -7,7 +7,7 @@ import { useCommunication } from 'utils/react'; import { ButtonBase, Loading, Typography, Box, ShortAddress, Grid, Button } from 'components'; import { WalletType } from 'services/api'; import { tKeys, useTranslate } from 'services/i18n'; -import { makeStyles, useTheme, Theme } from 'utils/styles'; +import { makeStyles, Theme } from 'utils/styles'; import { zeroAddress } from 'utils/mock'; import { Bitski, Fortmatic, Metamask, Portis, WalletConnect } from 'components/icons/wallets'; @@ -43,7 +43,6 @@ export function ProviderButton({ fullWidth, }: ProviderButtonProps) { const classes = useStyles(); - const theme = useTheme(); const connecting = useCommunication(connect, [connect]); const Icon = iconByWallet[type]; @@ -80,13 +79,7 @@ export function ProviderButton({ - From 09c2d00a68f369c3ad56e9944b2657e4103d5b68 Mon Sep 17 00:00:00 2001 From: Hahahayabanan Date: Fri, 4 Sep 2020 17:13:04 +0400 Subject: [PATCH 2/2] Replace jazzicon --- src/components/AccountAddress/AccountAddress.tsx | 5 ++--- src/components/AddressIcon/index.ts | 1 + 2 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 src/components/AddressIcon/index.ts diff --git a/src/components/AccountAddress/AccountAddress.tsx b/src/components/AccountAddress/AccountAddress.tsx index c9f21012..0a5c265b 100644 --- a/src/components/AccountAddress/AccountAddress.tsx +++ b/src/components/AccountAddress/AccountAddress.tsx @@ -1,11 +1,10 @@ import * as React from 'react'; import Grid from '@material-ui/core/Grid'; import Avatar from '@material-ui/core/Avatar'; -import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'; -import {} from 'components'; import { makeStyles } from 'utils/styles'; +import { AddressIcon } from '../AddressIcon'; import { ShortAddress } from '../ShortAddress/ShortAddress'; type Props = { address: string; size: 'big' | 'small' }; @@ -18,7 +17,7 @@ export function AccountAddress(props: Props) { - + diff --git a/src/components/AddressIcon/index.ts b/src/components/AddressIcon/index.ts new file mode 100644 index 00000000..1f4659a3 --- /dev/null +++ b/src/components/AddressIcon/index.ts @@ -0,0 +1 @@ +export { AddressIcon } from '@akropolis-web/components';