feat(nc): add icons

HathorNetwork · May 13, 2024 · 06e563d · 06e563d
1 parent 303f59a
commit 06e563d
Show file tree

Hide file tree

Showing 15 changed files with 463 additions and 0 deletions.
diff --git a/src/components/Icon/ActionDot.icon.js b/src/components/Icon/ActionDot.icon.js
@@ -0,0 +1,32 @@
+/**
+ * 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/ArrowDown.icon.js b/src/components/Icon/ArrowDown.icon.js
@@ -0,0 +1,30 @@
+/**
+ * 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';
+
+/**
+ * @typedef {Object} Properties prop
+ * @property {StyleSheet} prop.style
+ *
+ * @param {Properties} properties
+ */
+export const ArrowDownIcon = ({ style }) => (
+  <View style={[styles.wrapper, style]}>
+    <Image source={chevronDown} width={24} height={24} />
+  </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,
+  },
+});
diff --git a/src/components/Icon/ArrowUp.icon.js b/src/components/Icon/ArrowUp.icon.js
@@ -0,0 +1,30 @@
+/**
+ * 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';
+
+/**
+ * @typedef {Object} Properties prop
+ * @property {StyleSheet} prop.style
+ *
+ * @param {Properties} properties
+ */
+export const ArrowUpIcon = ({ style }) => (
+  <View style={[styles.wrapper, style]}>
+    <Image source={chevronUp} width={24} height={24} />
+  </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,
+  },
+});
diff --git a/src/components/Icon/Base.icon.js b/src/components/Icon/Base.icon.js
@@ -0,0 +1,43 @@
+/**
+ * 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';
+
+/**
+ * @typedef {Object} Base base
+ * @property {'default'|'outline'|'fill'} base.type
+ * @property {StyleSheet} base.style
+ * @property {ReactNode} base.children
+ *
+ * @param {Base}
+ */
+export const BaseIcon = ({ type, 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,
+  },
+});
diff --git a/src/components/Icon/CircleCheck.icon.js b/src/components/Icon/CircleCheck.icon.js
@@ -0,0 +1,39 @@
+/**
+ * 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
@@ -0,0 +1,25 @@
+/**
+ * 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
@@ -0,0 +1,25 @@
+/**
+ * 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/Icon/CircleInfo.icon.js b/src/components/Icon/CircleInfo.icon.js
@@ -0,0 +1,32 @@
+/**
+ * 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 CircleInfoIcon = ({ size = 20, color = '#000' }) => (
+  <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='#fff' d='M0 0h20v20H0z' />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
diff --git a/src/components/Icon/NanoContract.icon.js b/src/components/Icon/NanoContract.icon.js
@@ -0,0 +1,33 @@
+/**
+ * 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 { BaseIcon } from './Base.icon';
+
+/**
+ * @param {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ *
+ * @description
+ * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
+ */
+export const NanoContractIcon = (props) => (
+  <BaseIcon type={props.type || 'default'}>
+    <Svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <Path
+        fill={props.color || '#000'}
+        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>
+);
diff --git a/src/components/Icon/Oracle.icon.js b/src/components/Icon/Oracle.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 { BaseIcon } from './Base.icon';
+
+/**
+ * @param {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ *
+ * @description
+ * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
+ */
+export const OracleIcon = (props) => (
+  <BaseIcon type={props.type || 'default'}>
+    <Svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <Path
+        fill={props.color || '#000'}
+        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'}
+        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>
+);
diff --git a/src/components/Icon/Pen.icon.js b/src/components/Icon/Pen.icon.js
@@ -0,0 +1,33 @@
+/**
+ * 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 { BaseIcon } from './Base.icon';
+
+/**
+ * @param {SvgProps|{type: 'default'|'outline'|'fill'}} props
+ *
+ * @description
+ * Svg converted from Figma using transaformer at https://react-svgr.com/playground/?native=true
+ */
+export const PenIcon = (props) => (
+  <BaseIcon type={props.type || 'default'}>
+    <Svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <Path
+        fill={props.color || '#000'}
+        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>
+);