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

@@ -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 }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'

src/components/Icons/ArrowDown.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 chevronDown from '../../assets/icons/chevron-down.png';
+import { DEFAULT_ICON_SIZE } from './constants';
+
+/**
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.style
+ */
+export const ArrowDownIcon = ({ size = DEFAULT_ICON_SIZE, style }) => (
+  <View style={[styles.wrapper, style]}>
+    <Image
+      source={chevronDown}
+      width={size}
+      height={size}
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  /* This wrapper adjusts the icon's size to 24x24, otherwise it would be 12x7. */
+  wrapper: {
+    paddingVertical: 8.5,
+    paddingHorizontal: 6,
+  },
+});

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 }) => (
+  <View style={[styles.wrapper, style]}>
+    <Image
+      source={chevronUp}
+      width={size}
+      height={size}
+    />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  /* This wrapper adjusts the icon's size to 24x24, otherwise it would be 12x7. */
+  wrapper: {
+    paddingVertical: 8.5,
+    paddingHorizontal: 6,
+  },
+});

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 }) => (
+  <View style={[
+    styles[type],
+    style
+  ]}
+  >
+    {children}
+  </View>
+);
+
+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,
+  },
+});

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 }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'

src/components/Icons/CircleClock.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 CircleClock = ({ size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'

src/components/Icons/CircleError.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 CircleError = ({ size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'

src/components/Icons/CircleInfo.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 * as React from 'react'
+import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg'
+import { COLORS } from '../../styles/themes';
+
+/**
+ * @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 CircleInfoIcon = ({ size = 20, color = COLORS.white }) => (
+  <Svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={size}
+    height={size}
+    viewBox={`0 0 ${size} ${size}`}
+    transform={`scale(${size / 20})`}
+    fill='none'
+  >
+    <G clipPath='url(#a)'>
+      <Path
+        fill='#004F7E'
+        d='M9.167 5.833h1.666V7.5H9.167V5.833Zm0 3.334h1.666v5H9.167v-5Zm.833-7.5A8.336 8.336 0 0 0 1.667 10c0 4.6 3.733 8.333 8.333 8.333S18.333 14.6 18.333 10 14.6 1.667 10 1.667Zm0 15A6.675 6.675 0 0 1 3.333 10 6.676 6.676 0 0 1 10 3.333 6.676 6.676 0 0 1 16.667 10 6.675 6.675 0 0 1 10 16.667Z'
+      />
+    </G>
+    <Defs>
+      <ClipPath id='a'>
+        <Path fill={color} d='M0 0h20v20H0z' />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);

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 }) => (
+  <BaseIcon type={type}>
+    <Svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
+      fill='none'
+    >
+      <Path
+        fill={color}
+        d='M6.101 21.298a2.33 2.33 0 0 1-1.697-.69 2.278 2.278 0 0 1-.702-1.689v-1.198c0-.47.167-.871.501-1.205a1.644 1.644 0 0 1 1.206-.502H6.5V4.41c0-.47.167-.871.501-1.206a1.643 1.643 0 0 1 1.206-.501H18.59c.47 0 .871.167 1.206.501.334.335.501.736.501 1.206v14.51c0 .665-.234 1.228-.702 1.688a2.33 2.33 0 0 1-1.697.691H6.101ZM17.899 19.9c.283 0 .52-.094.712-.282a.938.938 0 0 0 .288-.698V4.41a.3.3 0 0 0-.087-.221.3.3 0 0 0-.22-.087H8.206a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.22v11.606h7.314c.469 0 .87.168 1.205.502.334.334.501.736.501 1.205v1.198c0 .278.094.51.282.698.188.188.42.282.698.282ZM9.894 8.49a.676.676 0 0 1-.496-.205.674.674 0 0 1-.206-.494c0-.193.069-.357.206-.494a.677.677 0 0 1 .496-.206h7.015a.67.67 0 0 1 .49.206.671.671 0 0 1 .207.492c0 .194-.069.36-.206.496a.672.672 0 0 1-.491.205H9.894Zm0 2.885a.676.676 0 0 1-.496-.206.674.674 0 0 1-.206-.494c0-.192.069-.357.206-.494a.677.677 0 0 1 .496-.205h7.015a.67.67 0 0 1 .49.206.671.671 0 0 1 .207.491c0 .194-.069.36-.206.497a.671.671 0 0 1-.491.205H9.894Zm-3.791 8.524h9.417v-2.178a.3.3 0 0 0-.086-.221.3.3 0 0 0-.221-.087H5.409a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.221v1.198c0 .278.096.51.288.698a.98.98 0 0 0 .714.282Zm-.005 0h-.997 10.42-9.423Z'
+      />
+    </Svg>
+  </BaseIcon>
+);

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 }) => (
+  <BaseIcon type={type}>
+    <Svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
+      fill='none'
+    >
+      <Path
+        fill={color}
+        d='M12 20.5c-.096 0-.189-.008-.28-.024a1.45 1.45 0 0 1-.261-.072c-1.98-.708-3.552-1.954-4.715-3.738C5.581 14.882 5 12.95 5 10.872V6.637c0-.34.098-.648.295-.924a1.66 1.66 0 0 1 .764-.596l5.367-2.011C11.62 3.036 11.81 3 12 3c.19 0 .383.035.579.106l5.367 2.011c.31.122.563.32.76.596.196.276.294.584.294.924v4.235c0 2.079-.581 4.01-1.744 5.794-1.163 1.784-2.734 3.03-4.712 3.738A1.558 1.558 0 0 1 12 20.5Zm0-1.302c1.64-.527 2.993-1.569 4.06-3.127 1.068-1.558 1.602-3.289 1.602-5.193v-4.25a.3.3 0 0 0-.193-.276L12.1 4.355A.27.27 0 0 0 12 4.337a.27.27 0 0 0-.101.018L6.53 6.352a.3.3 0 0 0-.193.276v4.25c0 1.904.534 3.635 1.602 5.193 1.067 1.558 2.42 2.6 4.06 3.127Z'
+      />
+      <Path
+        fill={color}
+        d='M11.339 13.422c.202-.062.423-.093.662-.093.23 0 .45.031.658.093.208.061.4.15.574.268.17.083.348.12.532.113a.683.683 0 0 0 .475-.211.607.607 0 0 0 .19-.464.507.507 0 0 0-.228-.415 3.693 3.693 0 0 0-2.206-.71c-.404-.001-.785.057-1.145.175-.36.117-.704.293-1.032.527a.509.509 0 0 0-.24.414.587.587 0 0 0 .194.469.68.68 0 0 0 .47.214c.183.008.36-.03.531-.116.174-.114.363-.202.565-.264ZM10.072 10.497a5.364 5.364 0 0 1 1.923-.336c.693 0 1.335.112 1.926.336.591.224 1.118.52 1.582.886.154.116.323.17.506.165a.671.671 0 0 0 .469-.204.587.587 0 0 0 .187-.467.597.597 0 0 0-.236-.441 7.195 7.195 0 0 0-2.032-1.177 6.697 6.697 0 0 0-2.4-.426c-.854 0-1.653.142-2.398.426a7.247 7.247 0 0 0-2.032 1.175.592.592 0 0 0-.037.912c.13.129.284.196.463.202a.776.776 0 0 0 .5-.165c.464-.366.99-.662 1.579-.886Z'
+      />
+    </Svg>
+  </BaseIcon>
+);

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 }) => (
+  <BaseIcon type={type}>
+    <Svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={size}
+      height={size}
+      fill='none'
+    >
+      <Path
+        fill={color}
+        d='M5.1 18.9h1.182L16.538 8.65 15.35 7.462 5.1 17.726v1.173Zm-.542 1.398a.825.825 0 0 1-.606-.25.825.825 0 0 1-.25-.606v-1.6a1.713 1.713 0 0 1 .507-1.213L16.73 4.1c.137-.125.29-.223.456-.293.167-.07.344-.105.53-.105a1.474 1.474 0 0 1 1.022.413L19.9 5.284c.138.136.24.29.303.463a1.518 1.518 0 0 1-.001 1.065c-.065.17-.165.324-.302.46L7.371 19.792a1.704 1.704 0 0 1-1.214.506h-1.6ZM15.937 8.063l-.587-.601 1.188 1.188-.601-.587Z'
+      />
+    </Svg>
+  </BaseIcon>
+);

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 }) => (
+  <BaseIcon type={type}>
+    <Svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
+      fill='none'
+    >
+      <Path
+        fill={color}
+        d='M15.478 18.608c.194 0 .36-.07.5-.21.141-.141.211-.308.211-.502 0-.193-.07-.36-.21-.5a.684.684 0 0 0-.501-.211c-.194 0-.36.07-.501.21a.684.684 0 0 0-.21.501c0 .194.07.36.21.501.14.14.307.21.5.21Zm2.461 0c.194 0 .361-.07.501-.21.14-.141.211-.308.211-.502 0-.193-.07-.36-.21-.5a.684.684 0 0 0-.502-.211c-.193 0-.36.07-.5.21a.684.684 0 0 0-.211.501c0 .194.07.36.21.501.14.14.308.21.501.21Zm2.462 0c.194 0 .36-.07.5-.21.141-.141.212-.308.212-.502 0-.193-.07-.36-.211-.5a.684.684 0 0 0-.501-.211c-.194 0-.36.07-.501.21a.684.684 0 0 0-.21.501c0 .194.07.36.21.501.14.14.307.21.501.21Zm-15.013 1.69c-.469 0-.87-.167-1.205-.501a1.643 1.643 0 0 1-.501-1.206V5.388c0-.469.167-.87.501-1.205a1.643 1.643 0 0 1 1.205-.501h13.223c.47 0 .872.167 1.206.501.334.334.501.736.501 1.205v5.106c0 .194-.068.36-.206.497a.672.672 0 0 1-.491.205.676.676 0 0 1-.496-.205.677.677 0 0 1-.206-.497V5.388a.294.294 0 0 0-.096-.211.294.294 0 0 0-.212-.096H5.388a.294.294 0 0 0-.211.096.294.294 0 0 0-.096.211v13.203c0 .077.032.148.096.212a.294.294 0 0 0 .211.096h5.232a.67.67 0 0 1 .491.206.67.67 0 0 1 .206.491c0 .195-.068.36-.206.497a.671.671 0 0 1-.49.205H5.387Zm-.307-2.456v1.057V5.081v6.19-.075 6.646Zm2.27-2.03c0 .194.068.36.205.496a.677.677 0 0 0 .497.205h2.686c.194 0 .36-.068.497-.205a.674.674 0 0 0 .205-.494.673.673 0 0 0-.205-.494.676.676 0 0 0-.497-.206H8.053a.676.676 0 0 0-.497.206.672.672 0 0 0-.205.492Zm0-3.824c0 .194.068.36.205.496a.677.677 0 0 0 .497.205h5.93c.194 0 .36-.068.496-.205a.674.674 0 0 0 .206-.494.673.673 0 0 0-.206-.494.676.676 0 0 0-.496-.206h-5.93a.675.675 0 0 0-.497.206.672.672 0 0 0-.205.492Zm0-3.824c0 .194.068.36.205.496a.677.677 0 0 0 .497.205h7.899a.67.67 0 0 0 .491-.205.673.673 0 0 0 .206-.494.672.672 0 0 0-.206-.494.671.671 0 0 0-.491-.206h-7.9a.676.676 0 0 0-.495.206.672.672 0 0 0-.206.492Zm10.59 14.09c-1.21 0-2.238-.423-3.087-1.27-.849-.849-1.273-1.877-1.273-3.087 0-1.209.424-2.238 1.271-3.086.848-.85 1.877-1.274 3.086-1.274 1.21 0 2.238.424 3.087 1.272.849.848 1.273 1.877 1.273 3.086 0 1.209-.424 2.238-1.272 3.087-.848.848-1.876 1.273-3.085 1.273Z'
+      />
+    </Svg>
+  </BaseIcon>
+);