wallet-stack 1.0.0-alpha.121

package/src/icons/InfoIcon.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { PixelRatio } from 'react-native'
+import Svg, { Circle, Path } from 'react-native-svg'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  size?: number
+  color?: ColorValue
+  scaledSize?: number
+  testID?: string
+}
+
+const getSizing = (baseSize: number = 16, maxSize: number = 28) => {
+  return baseSize * PixelRatio.getFontScale() < maxSize
+    ? baseSize * PixelRatio.getFontScale()
+    : maxSize
+}
+
+function InfoIcon({
+  size = 16,
+  scaledSize = getSizing(size),
+  color = colors.contentPrimary,
+  testID,
+}: Props) {
+  return (
+    <Svg width={scaledSize} height={scaledSize} viewBox="0 0 16 16" fill="none" testID={testID}>
+      <Circle cx="8" cy="8" r="7" stroke={color} strokeWidth="1.25" />
+      <Path d="M8 12V7M8 6V5" stroke={color} strokeWidth="1.25" />
+    </Svg>
+  )
+}
+
+export default React.memo(InfoIcon)

package/src/icons/KeylessBackup.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { ViewStyle } from 'react-native'
+import Svg, { Path, Rect } from 'react-native-svg'
+import Colors from 'src/styles/colors'
+
+interface Props {
+  style?: ViewStyle
+}
+
+export default function KeylessBackup({ style }: Props) {
+  return (
+    <Svg width={80} height={80} fill="none" style={style}>
+      <Rect width={80} height={80} fill={Colors.warningSecondary} rx={40} />
+      <Path
+        fill={Colors.warningPrimary}
+        fillRule="evenodd"
+        d="M53.725 29.555v3.523c.912.541 1.545 1.514 1.545 2.658v9.272c0 1.144-.633 2.118-1.545 2.658v3.524a3.1 3.1 0 0 1-3.09 3.09H28.998a3.09 3.09 0 0 1-3.09-3.09V29.555a3.09 3.09 0 0 1 3.09-3.091h21.635a3.1 3.1 0 0 1 3.091 3.09ZM52.18 45.008v-9.272H41.362v9.272H52.18ZM28.999 29.555V51.19h21.635V48.1h-9.272a3.1 3.1 0 0 1-3.09-3.092v-9.272a3.1 3.1 0 0 1 3.09-3.09h9.272v-3.091H29Zm19.317 10.817a2.318 2.318 0 1 1-4.636 0 2.318 2.318 0 0 1 4.636 0Z"
+        clipRule="evenodd"
+      />
+      <Path
+        fill={Colors.warningPrimary}
+        d="M53.725 33.078h-.75v.427l.367.218.383-.645Zm0 14.588-.383-.645-.367.218v.427h.75Zm-1.545-11.93h.75v-.75h-.75v.75Zm0 9.272v.75h.75v-.75h-.75Zm-10.818-9.272v-.75h-.75v.75h.75Zm0 9.272h-.75v.75h.75v-.75ZM28.999 51.19h-.75v.75h.75v-.75Zm0-21.635v-.75h-.75v.75h.75ZM50.634 51.19v.75h.75v-.75h-.75Zm0-3.09h.75v-.75h-.75v.75Zm0-15.455v.75h.75v-.75h-.75Zm0-3.09h.75v-.75h-.75v.75Zm3.841 3.523v-3.523h-1.5v3.523h1.5Zm1.545 2.658c0-1.434-.796-2.64-1.912-3.303l-.766 1.29c.707.42 1.178 1.16 1.178 2.013h1.5Zm0 9.272v-9.272h-1.5v9.272h1.5Zm-1.912 3.303c1.116-.662 1.912-1.869 1.912-3.303h-1.5c0 .853-.47 1.594-1.178 2.013l.766 1.29Zm.367 2.879v-3.524h-1.5v3.524h1.5Zm-3.84 3.84a3.85 3.85 0 0 0 3.84-3.84h-1.5a2.35 2.35 0 0 1-2.34 2.34v1.5Zm-21.636 0h21.635v-1.5H29v1.5Zm-3.84-3.84a3.84 3.84 0 0 0 3.84 3.84v-1.5a2.34 2.34 0 0 1-2.34-2.34h-1.5Zm0-21.635V51.19h1.5V29.555h-1.5Zm3.84-3.841a3.84 3.84 0 0 0-3.84 3.84h1.5a2.34 2.34 0 0 1 2.34-2.34v-1.5Zm21.635 0H29v1.5h21.635v-1.5Zm3.841 3.84a3.85 3.85 0 0 0-3.84-3.84v1.5a2.35 2.35 0 0 1 2.34 2.34h1.5Zm-3.045 6.182v9.272h1.5v-9.272h-1.5Zm-10.068.75H52.18v-1.5H41.362v1.5Zm.75 8.522v-9.272h-1.5v9.272h1.5Zm10.068-.75H41.362v1.5H52.18v-1.5ZM29.749 51.19V29.555h-1.5V51.19h1.5Zm20.885-.75H29v1.5h21.635v-1.5Zm-.75-2.34v3.09h1.5V48.1h-1.5Zm-8.522.75h9.272v-1.5h-9.272v1.5Zm-3.84-3.842a3.85 3.85 0 0 0 3.84 3.841v-1.5a2.35 2.35 0 0 1-2.34-2.34h-1.5Zm0-9.272v9.272h1.5v-9.272h-1.5Zm3.84-3.84a3.85 3.85 0 0 0-3.84 3.84h1.5a2.35 2.35 0 0 1 2.34-2.34v-1.5Zm9.272 0h-9.272v1.5h9.272v-1.5Zm-.75-2.341v3.09h1.5v-3.09h-1.5ZM29 30.305h21.635v-1.5H29v1.5Zm17 13.135a3.068 3.068 0 0 0 3.067-3.068h-1.5c0 .866-.702 1.568-1.568 1.568v1.5Zm-3.069-3.068a3.068 3.068 0 0 0 3.068 3.068v-1.5a1.568 1.568 0 0 1-1.568-1.568h-1.5Zm3.068-3.068a3.068 3.068 0 0 0-3.068 3.068h1.5c0-.866.702-1.568 1.568-1.568v-1.5Zm3.069 3.068a3.068 3.068 0 0 0-3.069-3.068v1.5c.867 0 1.569.702 1.569 1.568h1.5Z"
+        mask="url(#a)"
+      />
+      <Path
+        fill={Colors.warningPrimary}
+        stroke={Colors.warningPrimary}
+        d="M67.797 51.196h-3.615v.5c0 6.115-4.931 11.065-11.015 11.065-1.937 0-3.751-.51-5.327-1.393l1.392-1.398a8.95 8.95 0 0 0 3.935.9c5.042 0 9.136-4.115 9.136-9.174v-.5h-3.615l4.554-4.574 4.555 4.574Zm-49.1-22.63v.5h3.615l-4.554 4.573-4.555-4.574h3.615v-.5c0-6.116 4.931-11.065 11.015-11.065 1.937 0 3.751.51 5.327 1.393l-1.392 1.398a8.95 8.95 0 0 0-3.935-.9c-5.042 0-9.136 4.115-9.136 9.174Z"
+      />
+    </Svg>
+  )
+}

package/src/icons/LinkArrow.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  size?: number
+  color?: ColorValue
+}
+
+const LinkArrow = ({ color = Colors.textLink, size = 32 }: Props) => {
+  return (
+    <Svg width={size} height={size} viewBox={`0 0 24 24`} fill="none">
+      <Path
+        d="M4.5 14.5C4.5 17.2614 6.73858 19.5 9.5 19.5H14.5C17.2614 19.5 19.5 17.2614 19.5 14.5V9.5C19.5 6.73858 17.2614 4.5 14.5 4.5H9.5C6.73858 4.5 4.5 6.73858 4.5 9.5V14.5Z"
+        stroke={color}
+      />
+      <Path
+        d="M8.23381 15.7656L15.1281 8.87132M15.1281 8.87132H10.8855M15.1281 8.87132V13.114"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}
+
+export default React.memo(LinkArrow)

package/src/icons/LoadingSpinner.tsx

@@ -0,0 +1,25 @@
+import LottieView from 'lottie-react-native'
+import React from 'react'
+
+interface Props {
+  width?: number
+}
+
+export default class LoadingSpinner extends React.PureComponent<Props> {
+  animation: LottieView | null | undefined
+
+  render() {
+    const { width = 40 } = this.props
+    return (
+      <LottieView
+        ref={(animation) => {
+          this.animation = animation
+        }}
+        source={require('./loadingSpinnerGreen.json')}
+        autoPlay={true}
+        loop={true}
+        style={{ width }}
+      />
+    )
+  }
+}

package/src/icons/Lock.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors from 'src/styles/colors'
+
+interface Props {
+  color?: string
+  width?: number
+  height?: number
+}
+
+const Lock = ({ color = colors.accent, width = 20, height = 20 }: Props) => (
+  <Svg width={width} height={height} fill="none" viewBox="0 0 20 20">
+    <Path
+      fill={color}
+      d="M5 18.334c-.458 0-.85-.164-1.177-.49a1.605 1.605 0 0 1-.49-1.177V8.333c0-.458.164-.85.49-1.177.326-.326.719-.49 1.177-.49h.833V5c0-1.153.407-2.135 1.22-2.948C7.865 1.24 8.847.833 10 .833s2.136.407 2.948 1.219c.813.813 1.219 1.795 1.219 2.948v1.667H15c.458 0 .85.163 1.177.489.327.327.49.72.49 1.178v8.333c0 .458-.163.85-.49 1.177-.326.326-.719.49-1.177.49H5Zm0-1.667h10V8.333H5v8.334Zm5-2.5c.458 0 .85-.163 1.178-.49.326-.326.489-.718.489-1.177 0-.458-.163-.85-.49-1.177a1.607 1.607 0 0 0-1.177-.49c-.458 0-.85.164-1.177.49-.326.326-.49.719-.49 1.177 0 .459.164.851.49 1.178.326.326.719.489 1.177.489Zm-2.5-7.5h5V5a2.41 2.41 0 0 0-.73-1.77A2.411 2.411 0 0 0 10 2.5a2.41 2.41 0 0 0-1.77.73A2.41 2.41 0 0 0 7.5 5v1.667Z"
+    />
+  </Svg>
+)
+export default Lock

package/src/icons/MagicWand.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+const MagicWand = ({
+  size = 24,
+  color = Colors.contentPrimary,
+}: {
+  size?: number
+  color?: ColorValue
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      fill={color}
+      d="m8.573 6.085-2.143 1.2 1.2-2.142L6.43 3l2.143 1.2L10.716 3l-1.2 2.143 1.2 2.142-2.143-1.2Zm10.284 8.4 2.143-1.2-1.2 2.142L21 17.57l-2.143-1.2-2.142 1.2 1.2-2.143-1.2-2.143 2.142 1.2ZM21 3l-1.2 2.143L21 7.285l-2.143-1.2-2.142 1.2 1.2-2.142L16.715 3l2.142 1.2L21 3Zm-7.422 9.239 2.091-2.091-1.817-1.817-2.09 2.091 1.816 1.817Zm.883-4.705 2.005 2.005c.334.317.334.874 0 1.209L6.465 20.749c-.335.335-.892.335-1.209 0l-2.005-2.005c-.335-.317-.335-.874 0-1.209L13.252 7.534c.335-.335.892-.335 1.209 0Z"
+    />
+  </Svg>
+)
+
+export default MagicWand

package/src/icons/Manage.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors from 'src/styles/colors'
+
+interface Props {
+  color?: string
+  testID?: string
+  size?: number
+}
+
+function Manage({ color = colors.accent, testID = 'Manage', size = 20 }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" testID={testID}>
+      <Path
+        d="M14.7917 16.875C13.9167 16.875 13.1771 16.5729 12.573 15.9688C11.9688 15.3646 11.6667 14.625 11.6667 13.75C11.6667 12.875 11.9688 12.1354 12.573 11.5312C13.1771 10.9271 13.9167 10.625 14.7917 10.625C15.6667 10.625 16.4063 10.9271 17.0105 11.5312C17.6146 12.1354 17.9167 12.875 17.9167 13.75C17.9167 14.625 17.6146 15.3646 17.0105 15.9688C16.4063 16.5729 15.6667 16.875 14.7917 16.875ZM14.7917 15.2083C15.1945 15.2083 15.5382 15.066 15.823 14.7812C16.1077 14.4965 16.25 14.1528 16.25 13.75C16.25 13.3472 16.1077 13.0035 15.823 12.7188C15.5382 12.434 15.1945 12.2917 14.7917 12.2917C14.3889 12.2917 14.0452 12.434 13.7605 12.7188C13.4757 13.0035 13.3334 13.3472 13.3334 13.75C13.3334 14.1528 13.4757 14.4965 13.7605 14.7812C14.0452 15.066 14.3889 15.2083 14.7917 15.2083ZM3.33337 14.5833V12.9167H10V14.5833H3.33337ZM5.20837 9.375C4.33337 9.375 3.59379 9.07292 2.98962 8.46875C2.38546 7.86458 2.08337 7.125 2.08337 6.25C2.08337 5.375 2.38546 4.63542 2.98962 4.03125C3.59379 3.42708 4.33337 3.125 5.20837 3.125C6.08337 3.125 6.82296 3.42708 7.42712 4.03125C8.03129 4.63542 8.33337 5.375 8.33337 6.25C8.33337 7.125 8.03129 7.86458 7.42712 8.46875C6.82296 9.07292 6.08337 9.375 5.20837 9.375ZM5.20837 7.70833C5.61115 7.70833 5.9549 7.56597 6.23962 7.28125C6.52435 6.99653 6.66671 6.65278 6.66671 6.25C6.66671 5.84722 6.52435 5.50347 6.23962 5.21875C5.9549 4.93403 5.61115 4.79167 5.20837 4.79167C4.8056 4.79167 4.46185 4.93403 4.17712 5.21875C3.8924 5.50347 3.75004 5.84722 3.75004 6.25C3.75004 6.65278 3.8924 6.99653 4.17712 7.28125C4.46185 7.56597 4.8056 7.70833 5.20837 7.70833ZM10 7.08333V5.41667H16.6667V7.08333H10Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export default React.memo(Manage)

package/src/icons/NotificationBellIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  size?: number
+  notificationMark?: ColorValue
+}
+
+const NotificationBellIcon = ({ size = 24, notificationMark }: Props) => (
+  <Svg width={size} height={size} fill="none">
+    <Path
+      d="M3 20.125V17.875H5.25V10C5.25 8.44375 5.71875 7.06075 6.65625 5.851C7.59375 4.64125 8.8125 3.84925 10.3125 3.475V2.6875C10.3125 2.21875 10.4767 1.82013 10.8052 1.49163C11.1337 1.16313 11.532 0.999253 12 1C12.4688 1 12.8674 1.16425 13.1959 1.49275C13.5244 1.82125 13.6882 2.2195 13.6875 2.6875V3.475C15.1875 3.85 16.4062 4.64238 17.3438 5.85213C18.2812 7.06188 18.75 8.4445 18.75 10V17.875H21V20.125H3ZM12 23.5C11.3813 23.5 10.8514 23.2795 10.4104 22.8385C9.96937 22.3975 9.74925 21.868 9.75 21.25H14.25C14.25 21.8688 14.0295 22.3986 13.5885 22.8396C13.1475 23.2806 12.618 23.5008 12 23.5ZM7.5 17.875H16.5V10C16.5 8.7625 16.0594 7.70313 15.1781 6.82188C14.2969 5.94063 13.2375 5.5 12 5.5C10.7625 5.5 9.70313 5.94063 8.82188 6.82188C7.94063 7.70313 7.5 8.7625 7.5 10V17.875Z"
+      fill={colors.contentPrimary}
+    />
+    {!!notificationMark && (
+      <Path
+        d="M14 6C14 3.79086 15.7909 2 18 2C20.2091 2 22 3.79086 22 6C22 8.20914 20.2091 10 18 10C15.7909 10 14 8.20914 14 6Z"
+        fill={notificationMark}
+      />
+    )}
+  </Svg>
+)
+
+export default NotificationBellIcon

package/src/icons/OpenLinkIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue
+  size?: number
+}
+
+const OpenLinkIcon = ({ color = colors.contentPrimary, size = 12 }: Props) => (
+  <Svg width={size} height={size} fill="none" viewBox="0 0 12 12">
+    <Path
+      d="M10.148 10.148H1.852V1.852H6V.667H1.852C1.194.667.667 1.2.667 1.852v8.296c0 .652.527 1.185 1.185 1.185h8.296c.652 0 1.185-.533 1.185-1.185V6h-1.185v4.148ZM7.185.667v1.185h2.127L3.487 7.677l.836.836 5.825-5.826v2.128h1.185V.667H7.185Z"
+      fill={color}
+    />
+  </Svg>
+)
+export default OpenLinkIcon

package/src/icons/Paste.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { G, Path } from 'svgs'
+
+interface Props {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export default class Paste extends React.PureComponent<Props> {
+  render() {
+    const { width = 28, height = 28, color = colors.contentPrimary } = this.props
+    return (
+      <Svg height={height} width={width} viewBox="0 0 32 32">
+        <Path
+          d="M10.5 21.5V22.5H11.5V21.5H10.5ZM21.5 10.5V11.5H22.5V10.5H21.5ZM6.5 16.5V14.5H4.5V16.5H6.5ZM6.5 12.5V10.5H4.5V12.5H6.5ZM6.5 10.5C6.5 9.76963 6.69484 9.08781 7.0347 8.50041L5.30358 7.49879C4.79231 8.38244 4.5 9.4086 4.5 10.5H6.5ZM8.50041 7.0347C9.08781 6.69484 9.76963 6.5 10.5 6.5V4.5C9.4086 4.5 8.38244 4.79231 7.4988 5.30358L8.50041 7.0347ZM10.5 6.5H12.5V4.5H10.5V6.5ZM14.5 6.5H16.5V4.5H14.5V6.5ZM16.5 6.5C17.2304 6.5 17.9122 6.69484 18.4996 7.0347L19.5012 5.30358C18.6176 4.79231 17.5914 4.5 16.5 4.5V6.5ZM19.9653 8.50041C20.3052 9.08781 20.5 9.76963 20.5 10.5H22.5C22.5 9.4086 22.2077 8.38244 21.6964 7.4988L19.9653 8.50041ZM21.5 9.5H19.5V11.5H21.5V9.5ZM17.5 9.5H15.5V11.5H17.5V9.5ZM15.5 9.5C14.4086 9.5 13.3824 9.79231 12.4988 10.3036L13.5004 12.0347C14.0878 11.6948 14.7696 11.5 15.5 11.5V9.5ZM10.3036 12.4988C9.79231 13.3824 9.5 14.4086 9.5 15.5H11.5C11.5 14.7696 11.6948 14.0878 12.0347 13.5004L10.3036 12.4988ZM9.5 15.5V17.5H11.5V15.5H9.5ZM9.5 19.5V21.5H11.5V19.5H9.5ZM10.5 20.5C9.76963 20.5 9.08781 20.3052 8.50041 19.9653L7.49879 21.6964C8.38244 22.2077 9.4086 22.5 10.5 22.5V20.5ZM7.0347 18.4996C6.69484 17.9122 6.5 17.2304 6.5 16.5H4.5C4.5 17.5914 4.79231 18.6176 5.30358 19.5012L7.0347 18.4996Z"
+          fill={color}
+        />
+        <Path
+          d="M19.9645 25.0355L19.2574 24.3284L19.9645 25.0355ZM15.5 25.5H16.4289V27.5H15.5V25.5ZM11.5 15.5V21.5H9.5V15.5H11.5ZM21.5 11.5H15.5V9.5H21.5V11.5ZM25.5 16.4289V15.5H27.5V16.4289H25.5ZM19.2574 24.3284L24.3284 19.2574L25.7426 20.6716L20.6716 25.7426L19.2574 24.3284ZM27.5 16.4289C27.5 18.0202 26.8679 19.5464 25.7426 20.6716L24.3284 19.2574C25.0786 18.5072 25.5 17.4898 25.5 16.4289H27.5ZM21.5 9.5C24.8137 9.5 27.5 12.1863 27.5 15.5H25.5C25.5 13.2909 23.7091 11.5 21.5 11.5V9.5ZM9.5 15.5C9.5 12.1863 12.1863 9.5 15.5 9.5V11.5C13.2909 11.5 11.5 13.2909 11.5 15.5H9.5ZM16.4289 25.5C17.4898 25.5 18.5072 25.0786 19.2574 24.3284L20.6716 25.7426C19.5464 26.8679 18.0202 27.5 16.4289 27.5V25.5ZM15.5 27.5C12.1863 27.5 9.5 24.8137 9.5 21.5H11.5C11.5 23.7091 13.2909 25.5 15.5 25.5V27.5Z"
+          fill={color}
+        />
+        <G mask="url(#mask0)">
+          <Path
+            d="M19 23.4505V22.25H17V23.4505H19ZM22.25 19H24.5V17H22.25V19ZM24.5 19C26.1569 19 27.5 17.6569 27.5 16H25.5C25.5 16.5523 25.0523 17 24.5 17V19ZM19 22.25C19 20.4551 20.4551 19 22.25 19V17C19.3505 17 17 19.3505 17 22.25H19ZM15.6961 27.4806C17.6172 27.0964 19 25.4096 19 23.4505H17C17 24.4562 16.2901 25.3222 15.3039 25.5194L15.6961 27.4806Z"
+            fill={color}
+          />
+        </G>
+      </Svg>
+    )
+  }
+}

package/src/icons/Phone.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue
+  size?: number
+  testID?: string
+}
+
+export default function Phone({ color = Colors.contentPrimary, size = 24, testID }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" testID={testID}>
+      <Path
+        fill={color}
+        d="M10.5 20h3a.48.48 0 0 0 .35-.15.48.48 0 0 0 0-.7.48.48 0 0 0-.35-.15h-3a.48.48 0 0 0-.35.15.48.48 0 0 0 0 .7c.1.1.217.15.35.15ZM7 23c-.55 0-1.021-.196-1.413-.588A1.922 1.922 0 0 1 5 21V3c0-.55.196-1.021.588-1.413A1.922 1.922 0 0 1 7 1h10c.55 0 1.021.196 1.413.588.392.392.588.863.587 1.412v18c0 .55-.196 1.021-.588 1.413A1.922 1.922 0 0 1 17 23H7Zm0-7h10V6H7v10Zm0 2v3h10v-3H7ZM7 4h10V3H7v1Z"
+      />
+    </Svg>
+  )
+}

package/src/icons/Preferences.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors from 'src/styles/colors'
+
+interface Props {
+  size?: number
+  color?: string
+}
+
+function Preferences({ color = colors.contentPrimary, size = 24 }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        fill={color}
+        d="M5 20v-7H3v-2h6v2H7v7H5ZM5 9V4h2v5H5Zm4 0V7h2V4h2v3h2v2H9Zm2 11v-9h2v9h-2Zm6 0v-3h-2v-2h6v2h-2v3h-2Zm0-7V4h2v9h-2Z"
+      />
+    </Svg>
+  )
+}
+
+export default Preferences

package/src/icons/QRCode.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+const QRCode = ({ color = Colors.contentPrimary }: { color?: ColorValue }) => (
+  <Svg width={18} height={18}>
+    <Path
+      fill={color}
+      d="M0 8h2v2H0V8Zm8-6h2v4H8V2ZM6 8h4v4H8v-2H6V8Zm6 0h2v2h2V8h2v2h-2v2h2v4h-2v2h-2v-2h-4v2H8v-4h4v-2h2v-2h-2V8Zm4 8v-4h-2v4h2ZM12 0h6v6h-6V0Zm2 2v2h2V2h-2ZM0 0h6v6H0V0Zm2 2v2h2V2H2ZM0 12h6v6H0v-6Zm2 2v2h2v-2H2Z"
+    />
+  </Svg>
+)
+
+export default QRCode

package/src/icons/RadioButton.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import { Circle, Svg } from 'svgs'
+
+interface Props {
+  width?: number
+  height?: number
+  color?: string
+  selected?: boolean
+  disabled?: boolean
+}
+
+export default class RadioButton extends React.PureComponent<Props> {
+  render() {
+    const {
+      width = 20,
+      height = 20,
+      color = colors.accent,
+      selected = true,
+      disabled = false,
+    } = this.props
+
+    let stroke
+    if (disabled) {
+      stroke = colors.disabled
+    } else if (selected) {
+      stroke = color
+    } else if (!selected) {
+      stroke = colors.inactive
+    }
+    const fill = selected && !disabled ? color : 'none'
+    return (
+      <Svg height={height} width={width} viewBox="0 0 20 20" fill="none">
+        <Circle cx="10" cy="10" r="9" stroke={stroke} strokeWidth={2} />
+        <Circle cx="10" cy="10" r="6" fill={fill} />
+      </Svg>
+    )
+  }
+}

package/src/icons/RedLoadingSpinnerToInfo.tsx

@@ -0,0 +1,16 @@
+import LottieView from 'lottie-react-native'
+import React from 'react'
+
+const RedLoadingSpinnerToInfo = () => {
+  return (
+    <LottieView
+      source={require('./lottie-json/redLoadingSpinnerToInfo.json')}
+      autoPlay={true}
+      loop={false}
+      style={{ height: 64 }}
+      testID="RedLoadingSpinnerToInfo"
+    />
+  )
+}
+
+export default RedLoadingSpinnerToInfo

package/src/icons/Refresh.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  height?: number
+  color?: string
+}
+
+const Refresh = ({ color = colors.contentPrimary, height = 16 }: Props) => (
+  <Svg
+    width={height}
+    height={height}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    testID="Refresh"
+    viewBox="0 0 24 24"
+  >
+    <Path
+      d="M17.362 3.285A10 10 0 0 0 11.025 1l-.002.408a9.592 9.592 0 1 1-7.13 3.15v3.177h.409V3.869H1.228v.409h2.369a10 10 0 1 0 13.765-.993Z"
+      fill={color}
+      stroke={color}
+      strokeWidth={1.5}
+      strokeMiterlimit={5}
+      strokeLinejoin="round"
+    />
+  </Svg>
+)
+
+export default Refresh

package/src/icons/Reward.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+const Reward = ({ size = 34 }: { size?: number } = {}) => (
+  <Svg width={size} height={size} viewBox="0 0 34 34" fill="none">
+    <Path fill="#FD56B5" d="M7.067 14.684 1 33l17.492-6.488" />
+    <Path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M7.067 14.684 1 33l17.492-6.488"
+    />
+    <Path
+      fill="#FFDDF0"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.251 16.901c3.231 3.411 4.605 7.49 3.07 9.112-.423.447-1.024.662-1.74.664-1.88.01-4.552-1.433-6.892-3.905-3.231-3.41-4.605-7.49-3.07-9.112 1.536-1.621 5.4-.172 8.632 3.241Z"
+    />
+    <Path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M9.085 20.825s4.953-5.964 5.326-11.247M10.687 22.77S21.704 11.91 23.354 4.16M12.536 24.464s8.793-7.736 17.656-7.469M17.982 7.973l1.059-2.434M29.171 13.261l2.521-.296M11.226 9.577l.002-.753M20.111 16.267l.525-.51M22.675 27.742l.692.177M14.814 6.314c-2.023-1.14-1.287-2.646-.07-2.725 1.858-.12 1.907-3.065-1.896-2.522M23.879 13.455c-.94-2.047-.299-3.44 1.29-3.306 1.697.144 4.276 1.45 4.007-1.896-.308-3.826 1.935-4.182 3.824-3.16M23.895 23.405c.79-1.978 2.45-1.73 3.025-.048.575 1.682 2.745 2.396 3.829-.25"
+    />
+  </Svg>
+)
+
+export default Reward

package/src/icons/ScanIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue
+  size?: number
+}
+
+const ScanIcon = ({ color = colors.contentPrimary, size = 24 }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <G clipPath="url(#clip0_116_49741)">
+      <Path
+        d="M5 19H7C7.28333 19 7.52083 19.0958 7.7125 19.2875C7.90417 19.4792 8 19.7167 8 20C8 20.2833 7.90417 20.5208 7.7125 20.7125C7.52083 20.9042 7.28333 21 7 21H4C3.71667 21 3.47917 20.9042 3.2875 20.7125C3.09583 20.5208 3 20.2833 3 20V17C3 16.7167 3.09583 16.4792 3.2875 16.2875C3.47917 16.0958 3.71667 16 4 16C4.28333 16 4.52083 16.0958 4.7125 16.2875C4.90417 16.4792 5 16.7167 5 17V19ZM19 19V17C19 16.7167 19.0958 16.4792 19.2875 16.2875C19.4792 16.0958 19.7167 16 20 16C20.2833 16 20.5208 16.0958 20.7125 16.2875C20.9042 16.4792 21 16.7167 21 17V20C21 20.2833 20.9042 20.5208 20.7125 20.7125C20.5208 20.9042 20.2833 21 20 21H17C16.7167 21 16.4792 20.9042 16.2875 20.7125C16.0958 20.5208 16 20.2833 16 20C16 19.7167 16.0958 19.4792 16.2875 19.2875C16.4792 19.0958 16.7167 19 17 19H19ZM5 5V7C5 7.28333 4.90417 7.52083 4.7125 7.7125C4.52083 7.90417 4.28333 8 4 8C3.71667 8 3.47917 7.90417 3.2875 7.7125C3.09583 7.52083 3 7.28333 3 7V4C3 3.71667 3.09583 3.47917 3.2875 3.2875C3.47917 3.09583 3.71667 3 4 3H7C7.28333 3 7.52083 3.09583 7.7125 3.2875C7.90417 3.47917 8 3.71667 8 4C8 4.28333 7.90417 4.52083 7.7125 4.7125C7.52083 4.90417 7.28333 5 7 5H5ZM19 5H17C16.7167 5 16.4792 4.90417 16.2875 4.7125C16.0958 4.52083 16 4.28333 16 4C16 3.71667 16.0958 3.47917 16.2875 3.2875C16.4792 3.09583 16.7167 3 17 3H20C20.2833 3 20.5208 3.09583 20.7125 3.2875C20.9042 3.47917 21 3.71667 21 4V7C21 7.28333 20.9042 7.52083 20.7125 7.7125C20.5208 7.90417 20.2833 8 20 8C19.7167 8 19.4792 7.90417 19.2875 7.7125C19.0958 7.52083 19 7.28333 19 7V5Z"
+        fill={color}
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_116_49741">
+        <Rect width={size} height={size} fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+)
+
+export default ScanIcon

package/src/icons/Search.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  height?: number
+  color?: string
+  width?: number
+}
+
+export default class Search extends React.PureComponent<Props> {
+  render() {
+    const { width = 14, height = 15, color = colors.contentPrimary } = this.props
+    return (
+      <Svg width={width} height={height} viewBox="0 0 14 15" fill="none">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.162 5.946a3.784 3.784 0 107.568 0 3.784 3.784 0 00-7.568 0zM0 5.946a5.946 5.946 0 008.929 5.145l3.225 3.226a1.081 1.081 0 001.53-1.53l-3.11-3.108A5.946 5.946 0 100 5.946z"
+          fill={color}
+        />
+      </Svg>
+    )
+  }
+}

package/src/icons/Share.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+export interface Props {
+  size?: number
+  color?: string
+}
+
+function Share({ color = colors.accent, size = 32 }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+      <Path
+        d="m16 5-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4Zm4 5v11c0 1.1-.9 2-2 2H6a2 2 0 0 1-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3a2 2 0 0 1 2 2Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export default React.memo(Share)

package/src/icons/Social.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
+
+const Social = () => (
+  <Svg width={20} height={14}>
+    <Path
+      fill={Colors.contentPrimary}
+      stroke={Colors.contentPrimary}
+      d="m2.056 11.589-1.32.911H13.264l-1.32-.911c-.483-.334-1.258-.665-2.12-.912-.87-.25-1.872-.427-2.824-.427-.952 0-1.955.177-2.824.427-.862.247-1.637.578-2.12.912ZM.5 12.25c0-.4.196-.785.604-1.163.412-.38 1.006-.717 1.704-.997C4.206 9.53 5.892 9.25 7 9.25s2.794.28 4.192.84c.698.28 1.292.617 1.704.997.408.378.604.764.604 1.163v1.25H.5v-1.25ZM10 3.5c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3Zm-1 0c0-1.106-.894-2-2-2-1.106 0-2 .894-2 2 0 1.106.894 2 2 2 1.106 0 2-.894 2-2Zm7.5 8.75c0-1.05-.357-1.933-.925-2.666.75.178 1.502.425 2.15.74 1.16.563 1.775 1.232 1.775 1.926v1.25h-3v-1.25ZM16 3.5c0 1.654-1.346 3-3 3-.26 0-.51-.035-.752-.101.48-.86.752-1.85.752-2.899s-.273-2.04-.752-2.899A2.84 2.84 0 0 1 13 .5c1.654 0 3 1.346 3 3Z"
+    />
+  </Svg>
+)
+
+export default Social

package/src/icons/Stack.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors from 'src/styles/colors'
+
+interface Props {
+  size?: number
+  color?: string
+}
+
+function Stack({ color = colors.contentPrimary, size = 24 }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        fill={color}
+        d="M12 14 1 8l11-6 11 6-11 6Zm0 4L1.575 12.325l2.1-1.15L12 15.725l8.325-4.55 2.1 1.15L12 18Zm0 4L1.575 16.325l2.1-1.15L12 19.725l8.325-4.55 2.1 1.15L12 22Zm0-10.275L18.825 8 12 4.275 5.175 8 12 11.725Z"
+      />
+    </Svg>
+  )
+}
+
+export default Stack

package/src/icons/StarOutline.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+const StarOutline = ({ color = Colors.contentPrimary }: { color?: ColorValue }) => (
+  <Svg width={24} height={24} fill="none">
+    <Path
+      d="m22.026 9.18-7.379-.636-2.884-6.794L8.88 8.554 1.5 9.181l5.604 4.854L5.42 21.25l6.342-3.828 6.343 3.828-1.673-7.215 5.593-4.854Zm-10.263 6.323-3.859 2.33 1.027-4.393-3.408-2.956 4.495-.39 1.745-4.136 1.755 4.146 4.495.39-3.407 2.956 1.026 4.393-3.869-2.34Z"
+      fill={color}
+    />
+  </Svg>
+)
+
+export default StarOutline

package/src/icons/SwapAndDeposit.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue
+  size?: number
+  testID?: string
+}
+
+const SwapAndDeposit = ({ size = 24, color = Colors.contentPrimary, testID }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" testID={testID}>
+    <Path
+      d="m10.55 18.2 5.175-6.2h-4l.725-5.675L7.825 13H11.3l-.75 5.2ZM8 22l1-7H4l9-13h2l-1 8h6L10 22H8Z"
+      fill={color}
+    />
+  </Svg>
+)
+
+export default React.memo(SwapAndDeposit)

package/src/icons/SwapArrows.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import Colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  size?: number
+  color?: string
+  testID?: string
+}
+
+const SwapArrows = ({ size = 24, color = Colors.contentPrimary, testID }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" testID={testID}>
+    <Path
+      fill={color}
+      stroke={color}
+      d="M15.722 17.567v.5h2.624l-3.235 3.227-3.235-3.227H14.5v-7.79h1.222v7.29ZM7.833 6.433v-.5H5.21l3.235-3.227 3.236 3.227H9.056v7.79H7.833v-7.29Z"
+    />
+  </Svg>
+)
+export default React.memo(SwapArrows)