From 432676078997fb7d64abbbf3e10eaae383c0eb84 Mon Sep 17 00:00:00 2001 From: Alex Ruzenhack Date: Tue, 28 May 2024 15:24:23 +0100 Subject: [PATCH] feat: add icons for nano contract transactions [8] (#455) * feat(nc): add icons * refactor: move icons to /Icons and add typed properties --- src/components/Icons/ActionDot.icon.js | 5 +++ src/components/Icons/ArrowDown.icon.js | 34 ++++++++++++++ src/components/Icons/ArrowUp.icon.js | 34 ++++++++++++++ src/components/Icons/Base.icon.js | 41 +++++++++++++++++ src/components/Icons/CircleCheck.icon.js | 8 ++++ src/components/Icons/CircleClock.icon.js | 8 ++++ src/components/Icons/CircleError.icon.js | 8 ++++ src/components/Icons/CircleInfo.icon.js | 41 +++++++++++++++++ src/components/Icons/NanoContract.icon.js | 40 +++++++++++++++++ src/components/Icons/Oracle.icon.js | 44 +++++++++++++++++++ src/components/Icons/Pen.icon.js | 37 ++++++++++++++++ src/components/Icons/RandomTx.icon.js | 40 +++++++++++++++++ src/components/Icons/Registered.icon.js | 44 +++++++++++++++++++ src/components/Icons/Wallet.icon.js | 40 +++++++++++++++++ .../NanoContract/NanoContractIcon.icon.js | 29 ------------ .../NanoContract/NanoContractsListItem.js | 2 +- src/styles/themes.js | 1 + 17 files changed, 426 insertions(+), 30 deletions(-) create mode 100644 src/components/Icons/ArrowDown.icon.js create mode 100644 src/components/Icons/ArrowUp.icon.js create mode 100644 src/components/Icons/Base.icon.js create mode 100644 src/components/Icons/CircleInfo.icon.js create mode 100644 src/components/Icons/NanoContract.icon.js create mode 100644 src/components/Icons/Oracle.icon.js create mode 100644 src/components/Icons/Pen.icon.js create mode 100644 src/components/Icons/RandomTx.icon.js create mode 100644 src/components/Icons/Registered.icon.js create mode 100644 src/components/Icons/Wallet.icon.js delete mode 100644 src/components/NanoContract/NanoContractIcon.icon.js diff --git a/src/components/Icons/ActionDot.icon.js b/src/components/Icons/ActionDot.icon.js index a27bd4fee..5680cbb8f 100644 --- a/src/components/Icons/ActionDot.icon.js +++ b/src/components/Icons/ActionDot.icon.js @@ -11,6 +11,11 @@ import { COLORS } from '../../styles/themes' import { DEFAULT_ICON_SIZE } from './constants' import { getScale, getViewBox } from './helper' +/** + * @param {object} props + * @property {number} props.size + * @property {StyleSheet} props.color + */ export const ActionDot = ({ size = DEFAULT_ICON_SIZE, color = COLORS.black }) => ( ( + + + +); + +const styles = StyleSheet.create({ + /* This wrapper adjusts the icon's size to 24x24, otherwise it would be 12x7. */ + wrapper: { + paddingVertical: 8.5, + paddingHorizontal: 6, + }, +}); diff --git a/src/components/Icons/ArrowUp.icon.js b/src/components/Icons/ArrowUp.icon.js new file mode 100644 index 000000000..1be5fcd89 --- /dev/null +++ b/src/components/Icons/ArrowUp.icon.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) Hathor Labs and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import * as React from 'react' +import { View, Image, StyleSheet } from 'react-native'; +import chevronUp from '../../assets/icons/chevron-up.png'; +import { DEFAULT_ICON_SIZE } from './constants'; + +/** + * @param {object} props + * @property {number} props.size + * @property {StyleSheet} props.style + */ +export const ArrowUpIcon = ({ size = DEFAULT_ICON_SIZE, style }) => ( + + + +); + +const styles = StyleSheet.create({ + /* This wrapper adjusts the icon's size to 24x24, otherwise it would be 12x7. */ + wrapper: { + paddingVertical: 8.5, + paddingHorizontal: 6, + }, +}); diff --git a/src/components/Icons/Base.icon.js b/src/components/Icons/Base.icon.js new file mode 100644 index 000000000..c505a5c5c --- /dev/null +++ b/src/components/Icons/Base.icon.js @@ -0,0 +1,41 @@ +/** + * Copyright (c) Hathor Labs and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { StyleSheet, View } from 'react-native'; +import { COLORS } from '../../styles/themes'; + +/** + * @param {object} props + * @property {'default'|'outline'|'fill'} props.type + * @property {StyleSheet} props.style + * @property {ReactNode} props.children + */ +export const BaseIcon = ({ type = 'default', style, children }) => ( + + {children} + +); + +const styles = StyleSheet.create({ + default: {}, + outline: { + borderRadius: 8, + borderWidth: 1.3, + padding: 4, + }, + fill: { + borderRadius: 8, + borderWidth: 1.3, + borderColor: COLORS.primary, + padding: 4, + backgroundColor: COLORS.primary, + }, +}); diff --git a/src/components/Icons/CircleCheck.icon.js b/src/components/Icons/CircleCheck.icon.js index 09a125a5d..48f6895d7 100644 --- a/src/components/Icons/CircleCheck.icon.js +++ b/src/components/Icons/CircleCheck.icon.js @@ -11,6 +11,14 @@ import { COLORS } from '../../styles/themes' import { DEFAULT_ICON_SIZE } from './constants' import { getScale, getViewBox } from './helper' +/** + * @param {object} props + * @property {number} props.size + * @property {StyleSheet} props.color + * + * @description + * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true + */ export const CircleCheck = ({ size = DEFAULT_ICON_SIZE, color = COLORS.black }) => ( ( ( ( + + + + + + + + + + +); diff --git a/src/components/Icons/NanoContract.icon.js b/src/components/Icons/NanoContract.icon.js new file mode 100644 index 000000000..570fec539 --- /dev/null +++ b/src/components/Icons/NanoContract.icon.js @@ -0,0 +1,40 @@ +/** + * Copyright (c) Hathor Labs and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import * as React from 'react' +import Svg, { Path } from 'react-native-svg' +import { COLORS } from '../../styles/themes'; +import { BaseIcon } from './Base.icon'; +import { DEFAULT_ICON_SIZE } from './constants'; +import { getScale, getViewBox } from './helper'; + +/** + * @param {object} props + * @property {SvgProps|{type: 'default'|'outline'|'fill'}} props.type + * @property {number} props.size + * @property {StyleSheet} props.color + * + * @description + * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true + */ +export const NanoContractIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => ( + + + + + +); diff --git a/src/components/Icons/Oracle.icon.js b/src/components/Icons/Oracle.icon.js new file mode 100644 index 000000000..500177a53 --- /dev/null +++ b/src/components/Icons/Oracle.icon.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) Hathor Labs and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import * as React from 'react' +import Svg, { Path } from 'react-native-svg' +import { COLORS } from '../../styles/themes'; +import { BaseIcon } from './Base.icon'; +import { DEFAULT_ICON_SIZE } from './constants'; +import { getScale, getViewBox } from './helper'; + +/** + * @param {object} props + * @property {SvgProps|{type: 'default'|'outline'|'fill'}} props.type + * @property {number} props.size + * @property {StyleSheet} props.color + * + * @description + * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true + */ +export const OracleIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => ( + + + + + + +); diff --git a/src/components/Icons/Pen.icon.js b/src/components/Icons/Pen.icon.js new file mode 100644 index 000000000..03d4204c8 --- /dev/null +++ b/src/components/Icons/Pen.icon.js @@ -0,0 +1,37 @@ +/** + * Copyright (c) Hathor Labs and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import * as React from 'react' +import Svg, { Path } from 'react-native-svg' +import { COLORS } from '../../styles/themes'; +import { BaseIcon } from './Base.icon'; +import { DEFAULT_ICON_SIZE } from './constants'; + +/** + * @param {object} props + * @property {SvgProps|{type: 'default'|'outline'|'fill'}} props.type + * @property {number} props.size + * @property {StyleSheet} props.color + * + * @description + * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true + */ +export const PenIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => ( + + + + + +); diff --git a/src/components/Icons/RandomTx.icon.js b/src/components/Icons/RandomTx.icon.js new file mode 100644 index 000000000..8cc228334 --- /dev/null +++ b/src/components/Icons/RandomTx.icon.js @@ -0,0 +1,40 @@ +/** + * Copyright (c) Hathor Labs and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import * as React from 'react' +import Svg, { Path } from 'react-native-svg' +import { COLORS } from '../../styles/themes'; +import { BaseIcon } from './Base.icon'; +import { DEFAULT_ICON_SIZE } from './constants'; +import { getScale, getViewBox } from './helper'; + +/** + * @param {object} props + * @property {SvgProps|{type: 'default'|'outline'|'fill'}} props.type + * @property {number} props.size + * @property {StyleSheet} props.color + * + * @description + * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true + */ +export const RandomTxIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => ( + + + + + +); diff --git a/src/components/Icons/Registered.icon.js b/src/components/Icons/Registered.icon.js new file mode 100644 index 000000000..31f741588 --- /dev/null +++ b/src/components/Icons/Registered.icon.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) Hathor Labs and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import * as React from 'react' +import Svg, { Path } from 'react-native-svg' +import { COLORS } from '../../styles/themes'; +import { BaseIcon } from './Base.icon'; +import { DEFAULT_ICON_SIZE } from './constants'; +import { getScale, getViewBox } from './helper'; + +/** + * @param {object} props + * @property {SvgProps|{type: 'default'|'outline'|'fill'}} props.type + * @property {number} props.size + * @property {StyleSheet} props.color + * + * @description + * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true + */ +export const RegisteredIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => ( + + + + + + +); diff --git a/src/components/Icons/Wallet.icon.js b/src/components/Icons/Wallet.icon.js new file mode 100644 index 000000000..a769fbce0 --- /dev/null +++ b/src/components/Icons/Wallet.icon.js @@ -0,0 +1,40 @@ +/** + * Copyright (c) Hathor Labs and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import * as React from 'react' +import Svg, { Path } from 'react-native-svg' +import { COLORS } from '../../styles/themes'; +import { BaseIcon } from './Base.icon'; +import { DEFAULT_ICON_SIZE } from './constants'; +import { getScale, getViewBox } from './helper'; + +/** + * @param {object} props + * @property {SvgProps|{type: 'default'|'outline'|'fill'}} props.type + * @property {number} props.size + * @property {StyleSheet} props.color + * + * @description + * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true + */ +export const WalletIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => ( + + + + + +); diff --git a/src/components/NanoContract/NanoContractIcon.icon.js b/src/components/NanoContract/NanoContractIcon.icon.js deleted file mode 100644 index 4a3737bd4..000000000 --- a/src/components/NanoContract/NanoContractIcon.icon.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright (c) Hathor Labs and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import * as React from 'react' -import Svg, { Path } from 'react-native-svg' - -/** - * @param {SvgProps} props - * - * @description - * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true - */ -export const NanoContractIcon = (props) => ( - - - -); diff --git a/src/components/NanoContract/NanoContractsListItem.js b/src/components/NanoContract/NanoContractsListItem.js index dde25bac4..06b5150be 100644 --- a/src/components/NanoContract/NanoContractsListItem.js +++ b/src/components/NanoContract/NanoContractsListItem.js @@ -11,7 +11,7 @@ import { TouchableHighlight, StyleSheet, View, Text, Image } from 'react-native' import chevronRight from '../../assets/icons/chevron-right.png'; import { COLORS } from '../../styles/themes'; import { getShortHash } from '../../utils'; -import { NanoContractIcon } from './NanoContractIcon.icon'; +import { NanoContractIcon } from '../Icons/NanoContract.icon'; /** * Renders each item of Nano Contract List. diff --git a/src/styles/themes.js b/src/styles/themes.js index ca13a8bf9..6a2f44159 100644 --- a/src/styles/themes.js +++ b/src/styles/themes.js @@ -13,6 +13,7 @@ import { HslColor } from '../HslColor'; * Light theme color scheme */ export const COLORS = { + white: '#fff', black: '#000', /** * @type {string} The main background color