From 6c9c73edb8fe29155a0541e13fa8bbb9e9fec77d Mon Sep 17 00:00:00 2001
From: Alex Ruzenhack <alex.ruzenhack@gmail.com>
Date: Thu, 23 May 2024 17:18:12 +0100
Subject: [PATCH] refactor: move icons to /Icons and add typed properties

---
 src/components/Icon/ActionDot.icon.js         | 32 ---------------
 src/components/Icon/CircleCheck.icon.js       | 39 -------------------
 src/components/Icon/CircleClock.icon.js       | 25 ------------
 src/components/Icon/CircleError.icon.js       | 25 ------------
 src/components/Icons/ActionDot.icon.js        |  5 +++
 .../{Icon => Icons}/ArrowDown.icon.js         | 16 +++++---
 .../{Icon => Icons}/ArrowUp.icon.js           | 16 +++++---
 src/components/{Icon => Icons}/Base.icon.js   | 12 +++---
 src/components/Icons/CircleCheck.icon.js      |  8 ++++
 src/components/Icons/CircleClock.icon.js      |  8 ++++
 src/components/Icons/CircleError.icon.js      |  8 ++++
 .../{Icon => Icons}/CircleInfo.icon.js        | 13 ++++++-
 .../{Icon => Icons}/NanoContract.icon.js      | 20 ++++++----
 src/components/{Icon => Icons}/Oracle.icon.js | 22 +++++++----
 src/components/{Icon => Icons}/Pen.icon.js    | 18 +++++----
 .../{Icon => Icons}/RandomTx.icon.js          | 20 ++++++----
 .../{Icon => Icons}/Registered.icon.js        | 22 +++++++----
 src/components/{Icon => Icons}/Wallet.icon.js | 20 ++++++----
 .../NanoContract/NanoContractIcon.icon.js     | 29 --------------
 .../NanoContract/NanoContractsListItem.js     |  2 +-
 20 files changed, 144 insertions(+), 216 deletions(-)
 delete mode 100644 src/components/Icon/ActionDot.icon.js
 delete mode 100644 src/components/Icon/CircleCheck.icon.js
 delete mode 100644 src/components/Icon/CircleClock.icon.js
 delete mode 100644 src/components/Icon/CircleError.icon.js
 rename src/components/{Icon => Icons}/ArrowDown.icon.js (66%)
 rename src/components/{Icon => Icons}/ArrowUp.icon.js (66%)
 rename src/components/{Icon => Icons}/Base.icon.js (73%)
 rename src/components/{Icon => Icons}/CircleInfo.icon.js (70%)
 rename src/components/{Icon => Icons}/NanoContract.icon.js (76%)
 rename src/components/{Icon => Icons}/Oracle.icon.js (78%)
 rename src/components/{Icon => Icons}/Pen.icon.js (68%)
 rename src/components/{Icon => Icons}/RandomTx.icon.js (83%)
 rename src/components/{Icon => Icons}/Registered.icon.js (73%)
 rename src/components/{Icon => Icons}/Wallet.icon.js (76%)
 delete mode 100644 src/components/NanoContract/NanoContractIcon.icon.js

diff --git a/src/components/Icon/ActionDot.icon.js b/src/components/Icon/ActionDot.icon.js
deleted file mode 100644
index d245a076d..000000000
--- a/src/components/Icon/ActionDot.icon.js
+++ /dev/null
@@ -1,32 +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, { G, Path, Defs, ClipPath } from 'react-native-svg'
-
-export const ActionDotIcon = () => (
-  <Svg
-    xmlns='http://www.w3.org/2000/svg'
-    width={24}
-    height={24}
-    fill='none'
-  >
-    <G clipPath='url(#a)' opacity={0.7}>
-      <Path
-        fill='#000'
-        fillRule='evenodd'
-        d='M6.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm7 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'
-        clipRule='evenodd'
-      />
-    </G>
-    <Defs>
-      <ClipPath id='a'>
-        <Path fill='#fff' d='M0 0h24v24H0z' />
-      </ClipPath>
-    </Defs>
-  </Svg>
-)
diff --git a/src/components/Icon/CircleCheck.icon.js b/src/components/Icon/CircleCheck.icon.js
deleted file mode 100644
index 7304e1735..000000000
--- a/src/components/Icon/CircleCheck.icon.js
+++ /dev/null
@@ -1,39 +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, { Mask, Path } from 'react-native-svg'
-
-export const CircleCheckIcon = ({ size = 24, color = '#000' }) => (
-  <Svg
-    xmlns='http://www.w3.org/2000/svg'
-    width={size}
-    height={size}
-    viewBox={`0 0 ${size} ${size}`}
-    transform={`scale(${size / 24})`}
-    fill='none'
-  >
-    <Mask id='a' fill='#fff'>
-      <Path
-        fillRule='evenodd'
-        d='M19.5 12a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Zm1.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5-1.94A.75.75 0 0 0 14.94 9l-4.44 4.44L9.06 12A.75.75 0 0 0 8 13.06l2.5 2.5 5.5-5.5Z'
-        clipRule='evenodd'
-      />
-    </Mask>
-    <Path
-      fill={color}
-      fillRule='evenodd'
-      d='M19.5 12a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Zm1.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5-1.94A.75.75 0 0 0 14.94 9l-4.44 4.44L9.06 12A.75.75 0 0 0 8 13.06l2.5 2.5 5.5-5.5Z'
-      clipRule='evenodd'
-    />
-    <Path
-      fill={color}
-      d='m16 9-1.06 1.06L16 9Zm0 1.06L14.94 9 16 10.06ZM14.94 9 16 10.06 14.94 9Zm-4.44 4.44L9.44 14.5l1.06 1.06 1.06-1.06-1.06-1.06ZM9.06 12 8 13.06 9.06 12ZM8 12l1.06 1.06L8 12Zm0 1.06L9.06 12 8 13.06Zm2.5 2.5-1.06 1.061 1.06 1.061 1.06-1.06-1.06-1.061ZM12 21a9 9 0 0 0 9-9h-3a6 6 0 0 1-6 6v3Zm-9-9a9 9 0 0 0 9 9v-3a6 6 0 0 1-6-6H3Zm9-9a9 9 0 0 0-9 9h3a6 6 0 0 1 6-6V3Zm9 9a9 9 0 0 0-9-9v3a6 6 0 0 1 6 6h3Zm-9 10.5c5.799 0 10.5-4.701 10.5-10.5h-3a7.5 7.5 0 0 1-7.5 7.5v3ZM1.5 12c0 5.799 4.701 10.5 10.5 10.5v-3A7.5 7.5 0 0 1 4.5 12h-3ZM12 1.5C6.201 1.5 1.5 6.201 1.5 12h3A7.5 7.5 0 0 1 12 4.5v-3ZM22.5 12c0-5.799-4.701-10.5-10.5-10.5v3a7.5 7.5 0 0 1 7.5 7.5h3Zm-7.56-1.94a.75.75 0 0 1 0-1.06l2.12 2.121a2.25 2.25 0 0 0 0-3.182l-2.12 2.122Zm1.06 0a.75.75 0 0 1-1.06 0l2.12-2.12a2.25 2.25 0 0 0-3.181 0L16 10.06Zm-4.44 4.44L16 10.06 13.88 7.94l-4.44 4.439 2.122 2.121ZM8 13.06l1.44 1.44 2.12-2.121-1.439-1.44-2.12 2.122Zm1.06 0a.75.75 0 0 1-1.06 0l2.121-2.12a2.25 2.25 0 0 0-3.182 0l2.122 2.12Zm0-1.06a.75.75 0 0 1 0 1.06l-2.12-2.12a2.25 2.25 0 0 0 0 3.181l2.12-2.12Zm2.5 2.5L9.06 12l-2.12 2.121 2.5 2.5 2.12-2.12ZM14.94 9l-5.5 5.5 2.12 2.121 5.5-5.5-2.12-2.12Z'
-      mask='url(#a)'
-    />
-  </Svg>
-)
diff --git a/src/components/Icon/CircleClock.icon.js b/src/components/Icon/CircleClock.icon.js
deleted file mode 100644
index b20b33146..000000000
--- a/src/components/Icon/CircleClock.icon.js
+++ /dev/null
@@ -1,25 +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'
-
-export const CircleClockIcon = ({ size = 24, color = '#000' }) => (
-  <Svg
-    xmlns='http://www.w3.org/2000/svg'
-    width={size}
-    height={size}
-    viewBox={`0 0 ${size} ${size}`}
-    transform={`scale(${size / 24})`}
-    fill='none'
-  >
-    <Path
-      fill={color}
-      d='M12.71 11.716V7.758a.67.67 0 0 0-.206-.492.67.67 0 0 0-.492-.205.675.675 0 0 0-.496.205.671.671 0 0 0-.205.492v4.177a.83.83 0 0 0 .251.6l3.4 3.413a.668.668 0 0 0 .486.212.674.674 0 0 0 .504-.213.678.678 0 0 0 .212-.494.692.692 0 0 0-.211-.498l-3.243-3.239Zm-.708 9.582a9.049 9.049 0 0 1-3.626-.733 9.395 9.395 0 0 1-2.954-1.99 9.407 9.407 0 0 1-1.988-2.951 9.034 9.034 0 0 1-.732-3.622 9.05 9.05 0 0 1 .733-3.626 9.395 9.395 0 0 1 1.99-2.954 9.405 9.405 0 0 1 2.951-1.988 9.034 9.034 0 0 1 3.622-.732 9.05 9.05 0 0 1 3.626.733 9.394 9.394 0 0 1 2.954 1.99 9.406 9.406 0 0 1 1.988 2.951 9.034 9.034 0 0 1 .732 3.622 9.05 9.05 0 0 1-.733 3.626 9.395 9.395 0 0 1-1.99 2.954 9.407 9.407 0 0 1-2.951 1.988 9.034 9.034 0 0 1-3.622.732ZM12 19.9c2.185 0 4.047-.77 5.588-2.311 1.54-1.54 2.311-3.403 2.311-5.588s-.77-4.047-2.311-5.588c-1.54-1.54-3.403-2.311-5.588-2.311s-4.047.77-5.588 2.311C4.872 7.952 4.101 9.815 4.101 12s.77 4.047 2.311 5.588c1.54 1.54 3.403 2.311 5.588 2.311Z'
-    />
-  </Svg>
-)
diff --git a/src/components/Icon/CircleError.icon.js b/src/components/Icon/CircleError.icon.js
deleted file mode 100644
index 2e441b317..000000000
--- a/src/components/Icon/CircleError.icon.js
+++ /dev/null
@@ -1,25 +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'
-
-export const CircleErrorIcon = ({ size = 24, color = '#000' }) => (
-  <Svg
-    xmlns='http://www.w3.org/2000/svg'
-    width={size}
-    height={size}
-    viewBox={`0 0 ${size} ${size}`}
-    transform={`scale(${size / 24})`}
-    fill='none'
-  >
-    <Path
-      fill={color}
-      d='M11.997 16.63a.75.75 0 0 0 .55-.217.737.737 0 0 0 .22-.548.751.751 0 0 0-.217-.55.737.737 0 0 0-.547-.22.751.751 0 0 0-.55.217.737.737 0 0 0-.22.548c0 .22.072.404.217.55.145.147.327.22.547.22Zm.013-3.553a.673.673 0 0 0 .494-.206.677.677 0 0 0 .206-.496v-4.52a.67.67 0 0 0-.206-.491.67.67 0 0 0-.492-.206.675.675 0 0 0-.496.206.671.671 0 0 0-.205.49v4.521c0 .194.068.36.205.496a.674.674 0 0 0 .494.206Zm-.008 8.221a9.049 9.049 0 0 1-3.626-.733 9.395 9.395 0 0 1-2.954-1.99 9.407 9.407 0 0 1-1.988-2.951 9.034 9.034 0 0 1-.732-3.622 9.05 9.05 0 0 1 .733-3.626 9.395 9.395 0 0 1 1.99-2.954 9.405 9.405 0 0 1 2.951-1.988 9.034 9.034 0 0 1 3.622-.732 9.05 9.05 0 0 1 3.626.733 9.394 9.394 0 0 1 2.954 1.99 9.406 9.406 0 0 1 1.988 2.951 9.034 9.034 0 0 1 .732 3.622 9.05 9.05 0 0 1-.733 3.626 9.395 9.395 0 0 1-1.99 2.954 9.407 9.407 0 0 1-2.951 1.988 9.034 9.034 0 0 1-3.622.732ZM12 19.9c2.198 0 4.064-.767 5.598-2.3 1.534-1.534 2.301-3.4 2.301-5.599 0-2.198-.767-4.064-2.3-5.598C16.064 4.868 14.198 4.1 12 4.1c-2.198 0-4.064.767-5.598 2.3C4.868 7.936 4.1 9.802 4.1 12c0 2.198.767 4.064 2.3 5.598C7.936 19.132 9.802 19.9 12 19.9Z'
-    />
-  </Svg>
-)
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 }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'
diff --git a/src/components/Icon/ArrowDown.icon.js b/src/components/Icons/ArrowDown.icon.js
similarity index 66%
rename from src/components/Icon/ArrowDown.icon.js
rename to src/components/Icons/ArrowDown.icon.js
index b92fb7ad7..5c28d5f82 100644
--- a/src/components/Icon/ArrowDown.icon.js
+++ b/src/components/Icons/ArrowDown.icon.js
@@ -8,16 +8,20 @@
 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';
 
 /**
- * @typedef {Object} Properties prop
- * @property {StyleSheet} prop.style
- *
- * @param {Properties} properties
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.style
  */
-export const ArrowDownIcon = ({ style }) => (
+export const ArrowDownIcon = ({ size = DEFAULT_ICON_SIZE, style }) => (
   <View style={[styles.wrapper, style]}>
-    <Image source={chevronDown} width={24} height={24} />
+    <Image
+      source={chevronDown}
+      width={size}
+      height={size}
+    />
   </View>
 );
 
diff --git a/src/components/Icon/ArrowUp.icon.js b/src/components/Icons/ArrowUp.icon.js
similarity index 66%
rename from src/components/Icon/ArrowUp.icon.js
rename to src/components/Icons/ArrowUp.icon.js
index 61f079105..1be5fcd89 100644
--- a/src/components/Icon/ArrowUp.icon.js
+++ b/src/components/Icons/ArrowUp.icon.js
@@ -8,16 +8,20 @@
 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';
 
 /**
- * @typedef {Object} Properties prop
- * @property {StyleSheet} prop.style
- *
- * @param {Properties} properties
+ * @param {object} props
+ * @property {number} props.size
+ * @property {StyleSheet} props.style
  */
-export const ArrowUpIcon = ({ style }) => (
+export const ArrowUpIcon = ({ size = DEFAULT_ICON_SIZE, style }) => (
   <View style={[styles.wrapper, style]}>
-    <Image source={chevronUp} width={24} height={24} />
+    <Image
+      source={chevronUp}
+      width={size}
+      height={size}
+    />
   </View>
 );
 
diff --git a/src/components/Icon/Base.icon.js b/src/components/Icons/Base.icon.js
similarity index 73%
rename from src/components/Icon/Base.icon.js
rename to src/components/Icons/Base.icon.js
index 6166e3321..c505a5c5c 100644
--- a/src/components/Icon/Base.icon.js
+++ b/src/components/Icons/Base.icon.js
@@ -9,14 +9,12 @@ import { StyleSheet, View } from 'react-native';
 import { COLORS } from '../../styles/themes';
 
 /**
- * @typedef {Object} Base base
- * @property {'default'|'outline'|'fill'} base.type
- * @property {StyleSheet} base.style
- * @property {ReactNode} base.children
- *
- * @param {Base}
+ * @param {object} props
+ * @property {'default'|'outline'|'fill'} props.type
+ * @property {StyleSheet} props.style
+ * @property {ReactNode} props.children
  */
-export const BaseIcon = ({ type, style, children }) => (
+export const BaseIcon = ({ type = 'default', style, children }) => (
   <View style={[
     styles[type],
     style
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 }) => (
   <Svg
     xmlns='http://www.w3.org/2000/svg'
diff --git a/src/components/Icons/CircleClock.icon.js b/src/components/Icons/CircleClock.icon.js
index 9567ed7ca..ec5d03d6b 100644
--- a/src/components/Icons/CircleClock.icon.js
+++ b/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'
diff --git a/src/components/Icons/CircleError.icon.js b/src/components/Icons/CircleError.icon.js
index 34a063eb1..383d9b16d 100644
--- a/src/components/Icons/CircleError.icon.js
+++ b/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'
diff --git a/src/components/Icon/CircleInfo.icon.js b/src/components/Icons/CircleInfo.icon.js
similarity index 70%
rename from src/components/Icon/CircleInfo.icon.js
rename to src/components/Icons/CircleInfo.icon.js
index 56ce67d1c..e11e6f9b4 100644
--- a/src/components/Icon/CircleInfo.icon.js
+++ b/src/components/Icons/CircleInfo.icon.js
@@ -7,8 +7,17 @@
 
 import * as React from 'react'
 import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg'
+import { COLORS } from '../../styles/themes';
 
-export const CircleInfoIcon = ({ size = 20, color = '#000' }) => (
+/**
+ * @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}
@@ -25,7 +34,7 @@ export const CircleInfoIcon = ({ size = 20, color = '#000' }) => (
     </G>
     <Defs>
       <ClipPath id='a'>
-        <Path fill='#fff' d='M0 0h20v20H0z' />
+        <Path fill={color} d='M0 0h20v20H0z' />
       </ClipPath>
     </Defs>
   </Svg>
diff --git a/src/components/Icon/NanoContract.icon.js b/src/components/Icons/NanoContract.icon.js
similarity index 76%
rename from src/components/Icon/NanoContract.icon.js
rename to src/components/Icons/NanoContract.icon.js
index a29e67372..7f68f545d 100644
--- a/src/components/Icon/NanoContract.icon.js
+++ b/src/components/Icons/NanoContract.icon.js
@@ -7,25 +7,31 @@
 
 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 {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ * @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 = (props) => (
-  <BaseIcon type={props.type || 'default'}>
+export const NanoContractIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
+  <BaseIcon type={type}>
     <Svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
       fill='none'
-      {...props}
     >
       <Path
-        fill={props.color || '#000'}
+        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>
diff --git a/src/components/Icon/Oracle.icon.js b/src/components/Icons/Oracle.icon.js
similarity index 78%
rename from src/components/Icon/Oracle.icon.js
rename to src/components/Icons/Oracle.icon.js
index 841b0fd62..892df1348 100644
--- a/src/components/Icon/Oracle.icon.js
+++ b/src/components/Icons/Oracle.icon.js
@@ -7,29 +7,35 @@
 
 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 {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ * @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 = (props) => (
-  <BaseIcon type={props.type || 'default'}>
+export const OracleIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
+  <BaseIcon type={type}>
     <Svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
       fill='none'
-      {...props}
     >
       <Path
-        fill={props.color || '#000'}
+        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={props.color || '#000'}
+        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>
diff --git a/src/components/Icon/Pen.icon.js b/src/components/Icons/Pen.icon.js
similarity index 68%
rename from src/components/Icon/Pen.icon.js
rename to src/components/Icons/Pen.icon.js
index 69c454e3b..03d4204c8 100644
--- a/src/components/Icon/Pen.icon.js
+++ b/src/components/Icons/Pen.icon.js
@@ -7,25 +7,29 @@
 
 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 {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ * @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 = (props) => (
-  <BaseIcon type={props.type || 'default'}>
+export const PenIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
+  <BaseIcon type={type}>
     <Svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width={size}
+      height={size}
       fill='none'
-      {...props}
     >
       <Path
-        fill={props.color || '#000'}
+        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>
diff --git a/src/components/Icon/RandomTx.icon.js b/src/components/Icons/RandomTx.icon.js
similarity index 83%
rename from src/components/Icon/RandomTx.icon.js
rename to src/components/Icons/RandomTx.icon.js
index 2e7e2af2f..9233dd723 100644
--- a/src/components/Icon/RandomTx.icon.js
+++ b/src/components/Icons/RandomTx.icon.js
@@ -7,25 +7,31 @@
 
 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 {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ * @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 = (props) => (
-  <BaseIcon type={props.type || 'default'}>
+export const RandomTxIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
+  <BaseIcon type={type}>
     <Svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
       fill='none'
-      {...props}
     >
       <Path
-        fill={props.color || '#000'}
+        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>
diff --git a/src/components/Icon/Registered.icon.js b/src/components/Icons/Registered.icon.js
similarity index 73%
rename from src/components/Icon/Registered.icon.js
rename to src/components/Icons/Registered.icon.js
index 1692a383a..53ff1d202 100644
--- a/src/components/Icon/Registered.icon.js
+++ b/src/components/Icons/Registered.icon.js
@@ -7,29 +7,35 @@
 
 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 {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ * @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 = (props) => (
-  <BaseIcon type={props.type || 'default'}>
+export const RegisteredIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
+  <BaseIcon type={type}>
     <Svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
       fill='none'
-      {...props}
     >
       <Path
-        fill={props.color || '#000'}
+        fill={color}
         d='M12.3 21.596a9.05 9.05 0 0 1-3.626-.733 9.395 9.395 0 0 1-2.954-1.99 9.405 9.405 0 0 1-1.988-2.951A9.034 9.034 0 0 1 3 12.3a9.05 9.05 0 0 1 .733-3.626 9.395 9.395 0 0 1 1.99-2.954 9.406 9.406 0 0 1 2.951-1.988A9.034 9.034 0 0 1 12.296 3a9.05 9.05 0 0 1 3.626.733 9.394 9.394 0 0 1 2.954 1.99 9.406 9.406 0 0 1 1.988 2.951 9.034 9.034 0 0 1 .732 3.622 9.05 9.05 0 0 1-.733 3.626 9.395 9.395 0 0 1-1.99 2.954 9.405 9.405 0 0 1-2.951 1.988 9.033 9.033 0 0 1-3.622.732Zm-.002-1.399c2.198 0 4.064-.767 5.598-2.3 1.534-1.534 2.301-3.4 2.301-5.599 0-2.198-.767-4.064-2.3-5.598-1.534-1.534-3.4-2.301-5.599-2.301-2.198 0-4.064.767-5.598 2.3-1.534 1.534-2.301 3.4-2.301 5.599 0 2.198.767 4.064 2.3 5.598 1.534 1.534 3.4 2.301 5.599 2.301Z'
       />
       <Path
-        fill={props.color || '#000'}
+        fill={color}
         d='M9.87 16V8.954h2.846c1.514 0 2.422.845 2.422 2.188v.01c0 .932-.493 1.704-1.328 2.006L15.348 16h-1.44l-1.383-2.651H11.13V16h-1.26Zm1.259-3.618h1.455c.796 0 1.26-.444 1.26-1.201v-.01c0-.737-.484-1.196-1.284-1.196h-1.431v2.407Z'
       />
     </Svg>
diff --git a/src/components/Icon/Wallet.icon.js b/src/components/Icons/Wallet.icon.js
similarity index 76%
rename from src/components/Icon/Wallet.icon.js
rename to src/components/Icons/Wallet.icon.js
index 42e9ab28a..c2f1df00b 100644
--- a/src/components/Icon/Wallet.icon.js
+++ b/src/components/Icons/Wallet.icon.js
@@ -7,25 +7,31 @@
 
 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 {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ * @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 = (props) => (
-  <BaseIcon type={props.type || 'default'}>
+export const WalletIcon = ({ type = 'default', size = DEFAULT_ICON_SIZE, color = COLORS.black }) => (
+  <BaseIcon type={type}>
     <Svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width={size}
+      height={size}
+      viewBox={getViewBox(size)}
+      transform={getScale(size, DEFAULT_ICON_SIZE)}
       fill='none'
-      {...props}
     >
       <Path
-        fill={props.color || '#000'}
+        fill={color}
         d='M5.101 17.758v1.161V5.081v12.677Zm.308 2.56c-.471 0-.873-.167-1.207-.5a1.644 1.644 0 0 1-.5-1.207V5.388c0-.47.167-.873.5-1.206.334-.334.736-.5 1.207-.5h13.203c.47 0 .873.166 1.206.5.333.333.5.736.5 1.206V8.17H18.92V5.388a.3.3 0 0 0-.086-.22.3.3 0 0 0-.221-.087H5.409a.3.3 0 0 0-.221.086.3.3 0 0 0-.087.221v13.223a.3.3 0 0 0 .087.222.3.3 0 0 0 .22.086h13.203a.3.3 0 0 0 .222-.086.3.3 0 0 0 .086-.221V15.83h1.4v2.781c0 .471-.168.874-.5 1.207-.334.333-.736.5-1.207.5H5.409Zm7.938-3.96a1.68 1.68 0 0 1-1.236-.511 1.685 1.685 0 0 1-.51-1.234V9.387c0-.484.17-.896.511-1.236.341-.34.753-.51 1.234-.51h6.206c.485 0 .897.17 1.236.512.34.341.51.752.51 1.234v5.226c0 .484-.17.896-.511 1.236-.341.34-.753.51-1.234.51h-6.206Zm6.244-1.398a.3.3 0 0 0 .221-.087.3.3 0 0 0 .087-.221V9.348a.3.3 0 0 0-.087-.221.3.3 0 0 0-.22-.087h-6.284a.3.3 0 0 0-.222.087.3.3 0 0 0-.086.221v5.304a.3.3 0 0 0 .086.221.3.3 0 0 0 .222.087h6.283Zm-3.633-1.48c.413 0 .763-.144 1.05-.43.288-.287.431-.636.431-1.049 0-.412-.143-.762-.43-1.05a1.424 1.424 0 0 0-1.048-.43c-.412 0-.762.142-1.05.429a1.424 1.424 0 0 0-.431 1.049c0 .412.143.762.43 1.05.286.287.636.43 1.048.43Z'
       />
     </Svg>
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) => (
-  <Svg
-    xmlns='http://www.w3.org/2000/svg'
-    width={15}
-    height={17}
-    fill='none'
-  >
-    <Path
-      fill='#fff'
-      d='M2.168 16.808c-.6 0-1.111-.208-1.534-.625A2.059 2.059 0 0 1 0 14.658v-1.083c0-.425.151-.788.453-1.09a1.485 1.485 0 0 1 1.09-.453h.986V1.542c0-.424.151-.787.453-1.089A1.485 1.485 0 0 1 4.072 0h9.385c.425 0 .788.151 1.09.453.302.302.453.665.453 1.09v13.115c0 .6-.211 1.11-.634 1.525a2.107 2.107 0 0 1-1.534.625H2.168Zm10.664-1.265c.256 0 .47-.085.644-.254.173-.17.26-.38.26-.631V1.543a.27.27 0 0 0-.079-.2.27.27 0 0 0-.2-.079H4.072a.27.27 0 0 0-.2.079.27.27 0 0 0-.079.2v10.49h6.61c.425 0 .788.15 1.09.452.302.302.453.665.453 1.09v1.083c0 .25.085.46.255.63.17.17.38.255.63.255ZM5.597 5.232a.611.611 0 0 1-.449-.186.61.61 0 0 1-.186-.447c0-.174.062-.322.186-.446a.612.612 0 0 1 .449-.186h6.34c.171 0 .32.062.444.186a.607.607 0 0 1 .186.445.61.61 0 0 1-.186.448.607.607 0 0 1-.444.186h-6.34Zm0 2.607a.611.611 0 0 1-.449-.186.61.61 0 0 1-.186-.447c0-.174.062-.322.186-.446a.612.612 0 0 1 .449-.186h6.34c.171 0 .32.063.444.187a.607.607 0 0 1 .186.444.61.61 0 0 1-.186.448.607.607 0 0 1-.444.186h-6.34ZM2.17 15.543h8.512v-1.968a.27.27 0 0 0-.079-.2.27.27 0 0 0-.2-.078h-8.86a.27.27 0 0 0-.2.078.27.27 0 0 0-.079.2v1.083c0 .25.087.46.26.63.174.17.39.255.646.255Zm-.004 0h-.902 9.418-8.516Z'
-    />
-  </Svg>
-);
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.