wallet-stack 1.0.0-alpha.121

package/src/icons/Clipboard.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
+
+interface Props {
+  size?: number
+}
+
+const Clipboard = ({ size = 24 }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      fill={Colors.contentPrimary}
+      d="M18.546 3.818h-3.8C14.364 2.764 13.364 2 12.181 2 11 2 10 2.764 9.618 3.818h-3.8c-1 0-1.818.818-1.818 1.818v14.546c0 1 .818 1.818 1.818 1.818h12.728c1 0 1.818-.818 1.818-1.818V5.636c0-1-.819-1.818-1.819-1.818Zm-6.364 0c.5 0 .909.41.909.91s-.41.908-.91.908-.908-.409-.908-.909.409-.909.909-.909Zm6.364 16.364H5.818V5.636h1.818v2.728h9.091V5.636h1.819v14.546Z"
+    />
+  </Svg>
+)
+export default Clipboard

package/src/icons/ClockIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  height?: number
+  width?: number
+  color?: string
+}
+
+export default class ClockIcon extends React.PureComponent<Props> {
+  render() {
+    const { height = 32, width = 32, color = colors.accent } = this.props
+    return (
+      <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M14.04 15.64 11.2 12.8v-4h1.6v3.34l2.36 2.36-1.12 1.14ZM11.2 7.2V5.6h1.6v1.6h-1.6Zm5.6 5.6v-1.6h1.6v1.6h-1.6Zm-5.6 5.6v-1.6h1.6v1.6h-1.6Zm-5.6-5.6v-1.6h1.6v1.6H5.6ZM12 20a7.785 7.785 0 0 1-3.12-.63 8.091 8.091 0 0 1-2.54-1.71 8.074 8.074 0 0 1-1.71-2.54A7.804 7.804 0 0 1 4 12c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54a8.073 8.073 0 0 1 2.54-1.71A7.804 7.804 0 0 1 12 4c1.107 0 2.147.21 3.12.63.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12 0 1.107-.21 2.147-.63 3.12-.42.973-.99 1.82-1.71 2.54a8.085 8.085 0 0 1-2.54 1.71c-.973.42-2.013.63-3.12.63Zm0-1.6c1.787 0 3.3-.62 4.54-1.86 1.24-1.24 1.86-2.753 1.86-4.54s-.62-3.3-1.86-4.54C15.3 6.22 13.787 5.6 12 5.6s-3.3.62-4.54 1.86C6.22 8.7 5.6 10.213 5.6 12s.62 3.3 1.86 4.54C8.7 17.78 10.213 18.4 12 18.4Z"
+          fill={color}
+        />
+      </Svg>
+    )
+  }
+}

package/src/icons/CloudCheck.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 CloudCheck = ({ color = colors.accent, width = 20, height = 14 }: Props) => (
+  <Svg width={width} height={height} fill="none" viewBox="0 0 20 14">
+    <Path
+      fill={color}
+      d="m8.625 11.167 4.708-4.708-1.208-1.209-3.52 3.521-1.75-1.75-1.188 1.188 2.958 2.958Zm-3.208 2.5c-1.264 0-2.344-.438-3.24-1.313C1.282 11.48.834 10.41.834 9.146c0-1.083.327-2.049.98-2.896a4.331 4.331 0 0 1 2.562-1.625 5.656 5.656 0 0 1 2.083-3.104A5.702 5.702 0 0 1 10 .333c1.625 0 3.003.566 4.135 1.698 1.132 1.132 1.698 2.51 1.698 4.136a3.64 3.64 0 0 1 2.386 1.239c.632.716.948 1.553.948 2.51 0 1.043-.365 1.928-1.094 2.657-.73.73-1.615 1.094-2.656 1.094h-10Zm0-1.667h10c.583 0 1.076-.201 1.479-.604.403-.403.604-.896.604-1.48 0-.582-.201-1.076-.604-1.478a2.012 2.012 0 0 0-1.48-.605h-1.25V6.168c0-1.153-.405-2.136-1.218-2.948C12.136 2.405 11.153 2 10 2s-2.135.406-2.947 1.219c-.813.812-1.22 1.795-1.22 2.948h-.416a2.81 2.81 0 0 0-2.063.854A2.81 2.81 0 0 0 2.5 9.084c0 .805.285 1.493.854 2.062A2.81 2.81 0 0 0 5.417 12Z"
+    />
+  </Svg>
+)
+export default CloudCheck

package/src/icons/ComingSoon.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  size?: number
+  color?: string
+}
+
+const ComingSoon = ({ size = 24, color = Colors.contentPrimary }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      fill={color}
+      d="M15 20c-2.233 0-4.125-.775-5.675-2.325C7.775 16.125 7 14.233 7 12c0-2.217.775-4.104 2.325-5.662C10.875 4.779 12.767 4 15 4c2.217 0 4.104.78 5.663 2.338C22.22 7.896 23 9.783 23 12c0 2.233-.78 4.125-2.337 5.675C19.104 19.225 17.216 20 15 20Zm0-2c1.667 0 3.083-.583 4.25-1.75C20.417 15.083 21 13.667 21 12c0-1.667-.583-3.083-1.75-4.25C18.083 6.583 16.667 6 15 6c-1.667 0-3.083.583-4.25 1.75C9.583 8.917 9 10.333 9 12c0 1.667.583 3.083 1.75 4.25C11.917 17.417 13.333 18 15 18Zm2.275-2.275L18.7 14.3 16 11.6V8h-2v4.425l3.275 3.3ZM2 9V7h4v2H2Zm-1 4v-2h5v2H1Zm1 4v-2h4v2H2Z"
+    />
+  </Svg>
+)
+export default ComingSoon

package/src/icons/CopyIcon.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 CopyIcon = ({ color = Colors.accent }: { color?: ColorValue }) => (
+  <Svg width={16} height={18} fill="none">
+    <Path
+      d="M11.655 0H1.835C.936 0 .2.736.2 1.636v11.455h1.636V1.636h9.819V0Zm2.454 3.273h-9c-.9 0-1.636.736-1.636 1.636v11.455c0 .9.736 1.636 1.636 1.636h9c.9 0 1.636-.736 1.636-1.636V4.909c0-.9-.736-1.636-1.636-1.636Zm0 13.09h-9V4.91h9v11.455Z"
+      fill={color}
+    />
+  </Svg>
+)
+
+export default CopyIcon

package/src/icons/CrossChainIndicator.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import Svg, { Circle, ClipPath, Defs, G, Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  size?: number
+  backgroundColor?: ColorValue
+  color?: ColorValue
+}
+
+function CrossChainIndicator({
+  size = 16,
+  backgroundColor = Colors.contentPrimary,
+  color = Colors.backgroundPrimary,
+}: Props) {
+  return (
+    <Svg width={size} height={size} fill="none" viewBox="0 0 16 16">
+      <G clipPath="url(#a)">
+        <Circle cx={3} cy={11} r={1.5} stroke={backgroundColor} />
+        <Circle cx={13} cy={11} r={1.5} fill={backgroundColor} stroke={backgroundColor} />
+        <Path
+          fill={backgroundColor}
+          strokeWidth={0.1}
+          stroke={backgroundColor}
+          d="M14 10a6 6 0 0 0-12 0h1.41a4.59 4.59 0 0 1 9.18 0H14Z"
+        />
+      </G>
+      <Defs>
+        <ClipPath id="a">
+          <Path fill={color} d="M1 4h14v9H1z" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  )
+}
+export default CrossChainIndicator

package/src/icons/DataDown.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue
+  testID?: string
+}
+
+const DataDown = ({ color = colors.contentPrimary, testID }: Props) => (
+  <Svg width={10} height={6} viewBox="0 0 10 6" fill="none" testID={testID}>
+    <Path d="M5 6L10 -9.53674e-07L4.29138e-07 -7.94466e-08L5 6Z" fill={color} />
+  </Svg>
+)
+
+export default React.memo(DataDown)

package/src/icons/DataUp.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue
+  testID?: string
+}
+
+const DataUp = ({ color = colors.accent, testID }: Props) => (
+  <Svg width={10} height={6} viewBox="0 0 10 6" fill="none" testID={testID}>
+    <Path d="M5 0L0 6H10L5 0Z" fill={color} />
+  </Svg>
+)
+
+export default React.memo(DataUp)

package/src/icons/DownArrowIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import colors from 'src/styles/colors'
+import { getSizing } from '../styles/accessibility'
+
+interface Props {
+  color?: string
+  height?: number
+  strokeWidth?: number
+  style?: StyleProp<ViewStyle>
+}
+
+export default function DownArrowIcon({
+  height,
+  color = colors.contentPrimary,
+  strokeWidth = 1,
+  style = {},
+}: Props) {
+  return (
+    <Svg
+      width={getSizing(height, 24)}
+      height={getSizing(height, 24)}
+      strokeWidth={strokeWidth}
+      viewBox="0 0 24 24"
+      fill="none"
+      testID="downArrowIcon"
+      style={style}
+    >
+      <Path
+        fill={color}
+        stroke={color}
+        d="m16.59 8.707.703.703L12 14.703 6.707 9.41l.703-.703 4.237 4.227.353.352.353-.352 4.237-4.227Z"
+      />
+    </Svg>
+  )
+}

package/src/icons/EarnCoins.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 EarnCoins({ color = colors.accent, testID = 'EarnCoins', size = 24 }: Props) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" testID={testID}>
+      <Path
+        d="M9 22C7.06667 22 5.41667 21.3167 4.05 19.95C2.68333 18.5833 2 16.9333 2 15C2 13.0667 2.68333 11.4167 4.05 10.05C5.41667 8.68333 7.06667 8 9 8C10.9333 8 12.5833 8.68333 13.95 10.05C15.3167 11.4167 16 13.0667 16 15C16 16.9333 15.3167 18.5833 13.95 19.95C12.5833 21.3167 10.9333 22 9 22ZM9 20C10.3833 20 11.5625 19.5125 12.5375 18.5375C13.5125 17.5625 14 16.3833 14 15C14 13.6167 13.5125 12.4375 12.5375 11.4625C11.5625 10.4875 10.3833 10 9 10C7.61667 10 6.4375 10.4875 5.4625 11.4625C4.4875 12.4375 4 13.6167 4 15C4 16.3833 4.4875 17.5625 5.4625 18.5375C6.4375 19.5125 7.61667 20 9 20ZM16.95 15.7C16.9833 15.6 17 15.4917 17 15.375V15C17 12.7833 16.2208 10.8958 14.6625 9.3375C13.1042 7.77917 11.2167 7 9 7H8.625C8.50833 7 8.4 7.01667 8.3 7.05C8.73333 5.58333 9.55417 4.375 10.7625 3.425C11.9708 2.475 13.3833 2 15 2C16.9333 2 18.5833 2.68333 19.95 4.05C21.3167 5.41667 22 7.06667 22 9C22 10.6167 21.525 12.0292 20.575 13.2375C19.625 14.4458 18.4167 15.2667 16.95 15.7Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export default React.memo(EarnCoins)

package/src/icons/Error.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { View, ViewStyle } from 'react-native'
+import colors from 'src/styles/colors'
+import Svg, { Circle, Path } from 'svgs'
+import { getSizing } from '../styles/accessibility'
+
+interface Props {
+  color: string
+  width?: number
+  style?: ViewStyle
+}
+
+export default class Error extends React.PureComponent<Props> {
+  render() {
+    const { width = getSizing(), style = {}, color = colors.contentPrimary } = this.props
+    return (
+      <View style={style}>
+        <Svg testID="ErrorIcon" width={width} height={width} viewBox="0 0 16 16" fill="none">
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.1569 4.75L11.2175 5.81066L8.97834 8.04984L11.3354 10.4069L10.2747 11.4675L7.91768 9.1105L5.56066 11.4675L4.5 10.4069L6.85702 8.04984L4.61785 5.81067L5.67851 4.75001L7.91768 6.98918L10.1569 4.75Z"
+            fill={color}
+          />
+          <Circle cx="8" cy="8" r="6.5" stroke="white" />
+        </Svg>
+      </View>
+    )
+  }
+}

package/src/icons/Exit.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
+}
+
+const Exit = ({ color = Colors.contentPrimary }: Props) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h7v2H5v14h7v2H5Zm11-4-1.375-1.45 2.55-2.55H9v-2h8.175l-2.55-2.55L16 7l5 5-5 5Z"
+      fill={color}
+    />
+  </Svg>
+)
+
+export default React.memo(Exit)

package/src/icons/ExploreTokens.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import Svg, { Path, Rect } from 'react-native-svg'
+import Colors from 'src/styles/colors'
+
+function AllTokens() {
+  return (
+    <Svg width={32} height={32} viewBox="0 0 32 32" fill="none">
+      <Rect width={32} height={32} rx={16} fill={Colors.successSecondary} />
+      <Path
+        d="M19 8C21.1217 8 23.1566 8.84285 24.6569 10.3431C26.1571 11.8434 27 13.8783 27 16C27 18.1217 26.1571 20.1566 24.6569 21.6569C23.1566 23.1571 21.1217 24 19 24C16.8783 24 14.8434 23.1571 13.3431 21.6569C11.8429 20.1566 11 18.1217 11 16C11 13.8783 11.8429 11.8434 13.3431 10.3431C14.8434 8.84285 16.8783 8 19 8ZM19 22C20.5913 22 22.1174 21.3679 23.2426 20.2426C24.3679 19.1174 25 17.5913 25 16C25 14.4087 24.3679 12.8826 23.2426 11.7574C22.1174 10.6321 20.5913 10 19 10C17.4087 10 15.8826 10.6321 14.7574 11.7574C13.6321 12.8826 13 14.4087 13 16C13 17.5913 13.6321 19.1174 14.7574 20.2426C15.8826 21.3679 17.4087 22 19 22ZM7 16C6.99995 17.2399 7.3847 18.4493 8.10116 19.4613C8.81762 20.4733 9.83048 21.2381 11 21.65V23.74C7.55 22.85 5 19.73 5 16C5 12.27 7.55 9.15 11 8.26V10.35C8.67 11.17 7 13.39 7 16Z"
+        fill={Colors.successPrimary}
+      />
+    </Svg>
+  )
+}
+
+export default React.memo(AllTokens)

package/src/icons/EyeIcon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+export interface Props {
+  size?: number
+  color?: ColorValue
+}
+
+function EyeIcon({ color = Colors.contentPrimary, size = 24 }: Props) {
+  return (
+    <Svg height={size} width={size} viewBox="0 0 24 24" fill="none" testID="EyeIcon">
+      <Path
+        fill={color}
+        stroke={color}
+        d="m19.665 12.356.108-.22-.108-.22A8.494 8.494 0 0 0 12 7.136a8.494 8.494 0 0 0-7.665 4.78l-.108.22.108.22A8.485 8.485 0 0 0 12 17.136a8.485 8.485 0 0 0 7.665-4.78Zm-16.125-.22C4.928 8.826 8.192 6.5 12 6.5c3.808 0 7.072 2.326 8.46 5.636-1.388 3.311-4.652 5.637-8.46 5.637-3.808 0-7.072-2.326-8.46-5.637Zm11.006 0a2.546 2.546 0 1 0-5.093.002 2.546 2.546 0 0 0 5.093-.002Zm-5.728 0A3.187 3.187 0 0 1 12 8.955a3.187 3.187 0 0 1 3.182 3.181A3.187 3.187 0 0 1 12 15.318a3.187 3.187 0 0 1-3.182-3.182Z"
+      />
+    </Svg>
+  )
+}
+
+export default EyeIcon

package/src/icons/ForwardChevron.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
+}
+
+function ForwardChevron({ color = colors.contentPrimary, height = 16 }: Props) {
+  return (
+    <Svg
+      height={height}
+      width={height / 2}
+      viewBox="0 0 8 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      testID="ForwardChevron"
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M.293.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L5.586 7 .293 1.707a1 1 0 0 1 0-1.414Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export default ForwardChevron

package/src/icons/GearIcon.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 {
+  size?: number
+  color?: string
+}
+
+const GearIcon = ({ size = 24, color = colors.contentPrimary }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      fill={color}
+      d="M9.2502 22L8.8502 18.8C8.63353 18.7167 8.42936 18.6167 8.2377 18.5C8.04603 18.3833 7.85853 18.2583 7.6752 18.125L4.7002 19.375L1.9502 14.625L4.5252 12.675C4.50853 12.5583 4.5002 12.4458 4.5002 12.3375V11.6625C4.5002 11.5542 4.50853 11.4417 4.5252 11.325L1.9502 9.375L4.7002 4.625L7.6752 5.875C7.85853 5.74167 8.0502 5.61667 8.2502 5.5C8.4502 5.38333 8.6502 5.28333 8.8502 5.2L9.2502 2H14.7502L15.1502 5.2C15.3669 5.28333 15.571 5.38333 15.7627 5.5C15.9544 5.61667 16.1419 5.74167 16.3252 5.875L19.3002 4.625L22.0502 9.375L19.4752 11.325C19.4919 11.4417 19.5002 11.5542 19.5002 11.6625V12.3375C19.5002 12.4458 19.4835 12.5583 19.4502 12.675L22.0252 14.625L19.2752 19.375L16.3252 18.125C16.1419 18.2583 15.9502 18.3833 15.7502 18.5C15.5502 18.6167 15.3502 18.7167 15.1502 18.8L14.7502 22H9.2502ZM11.0002 20H12.9752L13.3252 17.35C13.8419 17.2167 14.321 17.0208 14.7627 16.7625C15.2044 16.5042 15.6085 16.1917 15.9752 15.825L18.4502 16.85L19.4252 15.15L17.2752 13.525C17.3585 13.2917 17.4169 13.0458 17.4502 12.7875C17.4835 12.5292 17.5002 12.2667 17.5002 12C17.5002 11.7333 17.4835 11.4708 17.4502 11.2125C17.4169 10.9542 17.3585 10.7083 17.2752 10.475L19.4252 8.85L18.4502 7.15L15.9752 8.2C15.6085 7.81667 15.2044 7.49583 14.7627 7.2375C14.321 6.97917 13.8419 6.78333 13.3252 6.65L13.0002 4H11.0252L10.6752 6.65C10.1585 6.78333 9.67936 6.97917 9.2377 7.2375C8.79603 7.49583 8.39186 7.80833 8.0252 8.175L5.5502 7.15L4.5752 8.85L6.7252 10.45C6.64186 10.7 6.58353 10.95 6.5502 11.2C6.51686 11.45 6.5002 11.7167 6.5002 12C6.5002 12.2667 6.51686 12.525 6.5502 12.775C6.58353 13.025 6.64186 13.275 6.7252 13.525L4.5752 15.15L5.5502 16.85L8.0252 15.8C8.39186 16.1833 8.79603 16.5042 9.2377 16.7625C9.67936 17.0208 10.1585 17.2167 10.6752 17.35L11.0002 20ZM12.0502 15.5C13.0169 15.5 13.8419 15.1583 14.5252 14.475C15.2085 13.7917 15.5502 12.9667 15.5502 12C15.5502 11.0333 15.2085 10.2083 14.5252 9.525C13.8419 8.84167 13.0169 8.5 12.0502 8.5C11.0669 8.5 10.2377 8.84167 9.5627 9.525C8.8877 10.2083 8.5502 11.0333 8.5502 12C8.5502 12.9667 8.8877 13.7917 9.5627 14.475C10.2377 15.1583 11.0669 15.5 12.0502 15.5Z"
+    />
+  </Svg>
+)
+
+export default GearIcon

package/src/icons/Google.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
+
+const GoogleIcon = ({ color = Colors.contentPrimary }) => (
+  <Svg width={32} height={32} viewBox="0 0 32 32" fill="none">
+    <Path
+      fill={color}
+      d="M23.456 15.28H16.12v2.184h5.208c-.264 3.048-2.8 4.352-5.2 4.352-3.064 0-5.752-2.416-5.752-5.816 0-3.28 2.56-5.816 5.76-5.816 2.472 0 3.92 1.576 3.92 1.576l1.52-1.584S19.624 8 16.056 8C11.512 8 8 11.84 8 16c0 4.04 3.304 8 8.176 8 4.28 0 7.4-2.936 7.4-7.272 0-.92-.12-1.448-.12-1.448Z"
+    />
+  </Svg>
+)
+
+export default GoogleIcon

package/src/icons/GradientIcon.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import Colors from 'src/styles/colors'
+
+interface Props {
+  radius?: number
+  borderWidth?: number
+  children?: React.ReactNode
+}
+
+export default function GradientIcon({ radius = 50, borderWidth = 1, children }: Props) {
+  const gradientBackgroundStyles = [
+    styles.background,
+    {
+      borderRadius: radius,
+      height: radius - borderWidth * 2,
+      width: radius - borderWidth * 2,
+    },
+  ]
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height: radius,
+          width: radius,
+          borderRadius: radius,
+        },
+      ]}
+    >
+      {borderWidth > 0 && (
+        <LinearGradient
+          colors={[Colors.brandGradientLeft, Colors.brandGradientRight]}
+          locations={[0, 0.8915]}
+          useAngle={true}
+          angle={90}
+          style={[styles.background, { borderRadius: radius }]}
+        />
+      )}
+      <LinearGradient
+        colors={[Colors.brandGradientLeft, Colors.brandGradientRight]}
+        locations={[0.1085, 1]}
+        useAngle={true}
+        angle={90}
+        style={gradientBackgroundStyles}
+      />
+      {/* Apply a semi-transparent white overlay to tone down the brand gradient. react-native-linear-gradient doesn't support semi-transparent gradients with different colors. */}
+      <View style={[gradientBackgroundStyles, styles.mask]} />
+      {children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  background: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  mask: {
+    backgroundColor: Colors.backgroundPrimary,
+    opacity: 0.9,
+  },
+})

package/src/icons/GreenLoadingSpinner.tsx

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

package/src/icons/GreenLoadingSpinnerToCheck.tsx

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

package/src/icons/HamburgerCard.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Line, Svg } from 'react-native-svg'
+import { default as Colors, default as colors } from 'src/styles/colors'
+import globalStyles from 'src/styles/styles'
+
+function HamburgerCard() {
+  return (
+    <View style={styles.container}>
+      <Svg testID="Hamburger" width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <Line
+          x1="7.25"
+          y1="9.75"
+          x2="24.75"
+          y2="9.75"
+          stroke={Colors.contentPrimary}
+          strokeWidth="2.5"
+          strokeLinecap="round"
+        />
+        <Line
+          x1="7.25"
+          y1="15.75"
+          x2="24.75"
+          y2="15.75"
+          stroke={Colors.contentPrimary}
+          strokeWidth="2.5"
+          strokeLinecap="round"
+        />
+        <Line
+          x1="7.25"
+          y1="21.75"
+          x2="24.75"
+          y2="21.75"
+          stroke={Colors.contentPrimary}
+          strokeWidth="2.5"
+          strokeLinecap="round"
+        />
+      </Svg>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.backgroundPrimary,
+    ...globalStyles.softShadowLight,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 4,
+    height: 32,
+    width: 32,
+  },
+})
+
+export default React.memo(HamburgerCard)

package/src/icons/Help.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 {
+  color?: string
+  size?: number
+}
+
+export function Help({ color = colors.contentPrimary, size = 32 }: Props) {
+  return (
+    <Svg testID="Help" width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        fill={color}
+        d="M11.95 18c.35 0 .646-.12.888-.363.241-.241.362-.537.362-.887s-.12-.646-.362-.887a1.207 1.207 0 0 0-.888-.363c-.35 0-.646.12-.887.363a1.207 1.207 0 0 0-.363.887c0 .35.12.646.363.887.241.242.537.363.887.363Zm-.9-3.85h1.85c0-.55.063-.983.188-1.3.125-.317.479-.75 1.062-1.3a7.494 7.494 0 0 0 1.025-1.238c.25-.391.375-.862.375-1.412 0-.933-.342-1.65-1.025-2.15-.683-.5-1.492-.75-2.425-.75-.95 0-1.72.25-2.313.75-.591.5-1.004 1.1-1.237 1.8l1.65.65c.083-.3.27-.625.563-.975.291-.35.737-.525 1.337-.525.533 0 .933.146 1.2.437.267.292.4.613.4.963 0 .333-.1.646-.3.938-.2.291-.45.562-.75.812-.733.65-1.183 1.142-1.35 1.475-.167.333-.25.942-.25 1.825ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
+      />
+    </Svg>
+  )
+}
+
+export default React.memo(Help)

package/src/icons/HiddenEyeIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+export interface Props {
+  size?: number
+  color?: ColorValue
+}
+
+function HiddenEyeIcon({ color = Colors.contentPrimary, size = 24 }: Props) {
+  return (
+    <Svg height={size} width={size} viewBox="0 0 24 24" fill="none" testID="HiddenEyeIcon">
+      <G fill={color} stroke={color} clipPath="url(#a)">
+        <Path d="m19.665 12.356.108-.22-.108-.22A8.494 8.494 0 0 0 12 7.136a8.494 8.494 0 0 0-7.665 4.78l-.108.22.108.22A8.485 8.485 0 0 0 12 17.136a8.485 8.485 0 0 0 7.665-4.78Zm-16.125-.22C4.928 8.826 8.192 6.5 12 6.5c3.808 0 7.072 2.326 8.46 5.636-1.388 3.311-4.652 5.637-8.46 5.637-3.808 0-7.072-2.326-8.46-5.637Zm11.006 0a2.546 2.546 0 1 0-5.093.002 2.546 2.546 0 0 0 5.093-.002Zm-5.728 0A3.187 3.187 0 0 1 12 8.955a3.187 3.187 0 0 1 3.182 3.181A3.187 3.187 0 0 1 12 15.318a3.187 3.187 0 0 1-3.182-3.182Z" />
+        <Path d="m19.666 11.622.106-.219-.107-.218A8.494 8.494 0 0 0 12 6.405c-.505 0-.991.056-1.461.14l-.555-.555A9.212 9.212 0 0 1 12 5.768c3.808 0 7.072 2.326 8.46 5.637a9.137 9.137 0 0 1-2.05 3.011l-.442-.443a8.357 8.357 0 0 0 1.698-2.35Zm-7.441-3.391a3.17 3.17 0 0 1 2.942 2.941l-.885-.885a2.546 2.546 0 0 0-1.173-1.172l-.884-.884ZM4.98 4.708 18.78 18.514l-.446.447-2.445-2.445-.232-.232-.305.121a9.095 9.095 0 0 1-3.351.636c-3.808 0-7.073-2.326-8.46-5.637a9.111 9.111 0 0 1 2.788-3.656L6.77 7.4 6.373 7l-1.84-1.84.448-.453Zm5.335 6.237-.853-.854V11.292a.88.88 0 0 0-.008.113A2.546 2.546 0 0 0 12 13.95c.098 0 .185-.023.214-.03l.005-.001.857-.215-.624-.624-2.136-2.135ZM7.534 8.163l-.308-.309-.348.264a8.601 8.601 0 0 0-2.543 3.067l-.108.22.108.22A8.494 8.494 0 0 0 12 16.404c.827 0 1.624-.122 2.382-.329l.83-.227-.608-.609-.802-.802-.24-.239-.31.133a3.187 3.187 0 0 1-4.434-2.927c0-.446.092-.872.256-1.264l.13-.31-.238-.236-1.432-1.432Z" />
+      </G>
+      <Defs>
+        <ClipPath id="a">
+          <Path fill={color} d="M0 0h24v24H0z" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  )
+}
+
+export default HiddenEyeIcon

package/src/icons/ImageErrorIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue | string
+  size?: number
+  testID?: string
+}
+
+export function ImageErrorIcon({
+  color = colors.inactive,
+  size = 88,
+  testID = 'ImageErrorIcon',
+}: Props) {
+  return (
+    <Svg testID={testID} width={size} height={size} fill="none" viewBox="0 0 40 40">
+      <Path
+        d="M35 33.05L6.95 5L5 6.95L6.5 8.45V30.5C6.5 32.15 7.85 33.5 9.5 33.5H31.55L33.05 35L35 33.05ZM9.5 30.5V11.45L20.9 22.85L18.65 25.7L15.5 21.65L11 27.5H25.55L28.55 30.5H9.5ZM15.2 9.5L12.2 6.5H30.5C32.15 6.5 33.5 7.85 33.5 9.5V27.8L30.5 24.8V9.5H15.2Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export default ImageErrorIcon