wallet-stack 1.0.0-alpha.121

package/src/images/LogoHeart.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react'
+import Svg, {
+  ClipPath,
+  Defs,
+  G,
+  LinearGradient,
+  Path,
+  RadialGradient,
+  Stop,
+  SvgProps,
+} from 'react-native-svg'
+
+interface Props {
+  size?: number
+  testID?: string
+  // Setting this to SvgProps['color'] for now as the Colors enum is not a part of the branding folder yet.
+  color?: SvgProps['color']
+  translateY?: number
+}
+
+export default function LogoHeart({ size = 32, translateY = 0, testID, color }: Props) {
+  return (
+    <Svg
+      viewBox="0 0 889 889"
+      width={size}
+      height={size}
+      testID={testID}
+      style={{ transform: [{ translateY }] }}
+    >
+      <Defs>
+        <RadialGradient
+          id="e"
+          cx={3092.1}
+          cy={974.1}
+          r={0.2}
+          fx={3092.1}
+          fy={974.1}
+          gradientTransform="rotate(68.4 472665.336 -5040857.337) scale(1612.4 -2818.5)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#00e09d'} />
+          <Stop offset={0.2} stopColor={color ?? '#00e09d'} stopOpacity={0.9} />
+          <Stop offset={1} stopColor={color ?? '#3beb9f'} stopOpacity={0} />
+        </RadialGradient>
+        <RadialGradient
+          id="f"
+          cx={3090.4}
+          cy={972.4}
+          r={0.2}
+          fx={3090.4}
+          fy={972.4}
+          gradientTransform="rotate(47.2 190107.028 -7577516.78) scale(1819.1 -2355.8)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#19cf7a'} />
+          <Stop offset={1} stopColor={color ?? '#82d148'} stopOpacity={0} />
+        </RadialGradient>
+        <RadialGradient
+          id="g"
+          cx={3100.9}
+          cy={978.7}
+          r={0.2}
+          fx={3100.9}
+          fy={978.7}
+          gradientTransform="rotate(-101.1 2998729.964 928626.99) scale(1446.8 -1874.4)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#f79a0f'} />
+          <Stop offset={0.3} stopColor={color ?? '#f4a227'} stopOpacity={0.9} />
+          <Stop offset={1} stopColor={color ?? '#e6c832'} stopOpacity={0} />
+        </RadialGradient>
+        <RadialGradient
+          id="i"
+          cx={3084.8}
+          cy={972.4}
+          r={0.2}
+          fx={3084.8}
+          fy={972.4}
+          gradientTransform="rotate(52.8 71120.128 -2845995.122) scale(744.2 -1099.2)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#73d444'} />
+          <Stop offset={0.3} stopColor={color ?? '#73d444'} stopOpacity={0.5} />
+          <Stop offset={1} stopColor={color ?? '#73d444'} stopOpacity={0} />
+        </RadialGradient>
+        <RadialGradient
+          id="j"
+          cx={3092.3}
+          cy={968.8}
+          r={0.2}
+          fx={3092.3}
+          fy={968.8}
+          gradientTransform="rotate(93.3 1609215.68 -2649085.184) scale(1405.7 -1234.2)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#00cf5c'} />
+          <Stop offset={0.3} stopColor={color ?? '#00cf5c'} stopOpacity={0.8} />
+          <Stop offset={0.6} stopColor={color ?? '#00d05b'} stopOpacity={0.2} />
+          <Stop offset={1} stopColor={color ?? '#00d05b'} stopOpacity={0} />
+        </RadialGradient>
+        <RadialGradient
+          id="k"
+          cx={3092.9}
+          cy={975.2}
+          r={0.2}
+          fx={3092.9}
+          fy={975.2}
+          gradientTransform="matrix(1523.058 1821.55694 3063.82747 -2561.7574 -7698928.8 -3135152.8)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#fff'} stopOpacity={0.7} />
+          <Stop offset={0.8} stopColor={color ?? '#fff'} stopOpacity={0} />
+          <Stop offset={1} stopColor={color ?? '#fff'} stopOpacity={0} />
+        </RadialGradient>
+        <LinearGradient
+          id="b"
+          x1={1475.2}
+          x2={1647.6}
+          y1={-171.4}
+          y2={17.3}
+          gradientTransform="matrix(1 0 0 -1 -1065 312.6)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#35d07f'} stopOpacity={0} />
+          <Stop offset={1} stopColor={color ?? '#00d063'} />
+        </LinearGradient>
+        <LinearGradient
+          id="c"
+          x1={1383.8}
+          x2={1621.8}
+          y1={-490.9}
+          y2={182}
+          gradientTransform="matrix(1 0 0 -1 -1065 312.6)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#f8cd0c'} />
+          <Stop offset={0.3} stopColor={color ?? '#f2ce27'} />
+          <Stop offset={1} stopColor={color ?? '#86d23c'} stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="d"
+          x1={1178.3}
+          x2={1711.7}
+          y1={-316.8}
+          y2={-21.4}
+          gradientTransform="matrix(1 0 0 -1 -1065 312.6)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#fdeb3f'} />
+          <Stop offset={1} stopColor={color ?? '#fbc74b'} stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="h"
+          x1={1417}
+          x2={1449.8}
+          y1={241.1}
+          y2={109.8}
+          gradientTransform="matrix(1 0 0 -1 -1065 312.6)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop offset={0} stopColor={color ?? '#39e2a4'} />
+          <Stop offset={1} stopColor={color ?? '#67e290'} stopOpacity={0} />
+        </LinearGradient>
+        <ClipPath id="a">
+          <Path
+            d="M760.1 539c-61.3 84.8-184.3 196.4-315.6 263.9C313.2 735.4 190.2 623.8 128.9 539c-40.3-55.7-76.3-120.1-74.3-189.5 2.1-72 48.5-139.7 112.3-169 63.8-29.3 141.7-20.7 200 19 33.1 22.5 59.6 54.4 77.6 90.9 18-36.5 44.5-68.3 77.6-90.9 58.3-39.7 136.2-48.4 200-19 63.8 29.4 110.2 97.1 112.3 169 2 69.4-34 133.8-74.3 189.5Z"
+            fill="none"
+            strokeWidth={0}
+          />
+        </ClipPath>
+      </Defs>
+      <G
+        style={{
+          clipPath: 'url(#a)',
+        }}
+      >
+        <Path d="M35.2 35.2h820.6v820.6H35.2V35.2Z" fill="#35d07f" strokeWidth={0} />
+        <Path
+          d="M35.2 35.2h820.6v820.6H35.2V35.2Z"
+          fill="url(#b)"
+          fillOpacity={0.8}
+          strokeWidth={0}
+        />
+        <Path d="M35.2 35.2h820.6v820.6H35.2V35.2Z" fill="url(#c)" strokeWidth={0} />
+        <Path d="M35.2 35.2h820.6v820.6H35.2V35.2Z" fill="url(#d)" strokeWidth={0} />
+        <Path d="M35.2 35.2h820.6v820.6H35.2V35.2Z" fill="url(#e)" strokeWidth={0} />
+        <Path d="M35.2 35.2h820.6v820.6H35.2V35.2Z" fill="url(#f)" strokeWidth={0} />
+        <Path d="M35.2 35.2h820.6v820.6H35.2V35.2Z" fill="url(#g)" strokeWidth={0} />
+        <Path d="M35.2 35.2h820.6v820.6H35.2V35.2Z" fill="url(#h)" strokeWidth={0} />
+        <Path
+          d="M35.2 35.2h820.6v820.6H35.2V35.2Z"
+          fill="url(#i)"
+          fillOpacity={0.6}
+          strokeWidth={0}
+        />
+        <Path d="M35.2 35.2h820.6v820.6H35.2V35.2Z" fill="url(#j)" strokeWidth={0} />
+        <Path d="M0 0h889v889H0V0Z" fill="url(#k)" fillOpacity={0.5} strokeWidth={0} />
+      </G>
+      <Path
+        d="M494.9 700.9C517.5 530.8 600.5 434 725.8 346.3l-64.1-81.4c-82 60.6-171.5 146.5-213 265-33.9-96.8-104.6-181.8-218.7-265l-66.9 83.2c142.3 97.7 214 207.2 233.7 352.8h98Z"
+        fill="#fff"
+        strokeWidth={0}
+      />
+    </Svg>
+  )
+}

package/src/images/NftReceivedIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import Svg, { Circle, Path } from 'react-native-svg'
+
+const NftReceivedIcon = () => (
+  <Svg width={40} height={40} testID="NftReceivedIcon">
+    <Circle cx={20} cy={20} r={20} fill="#ECE6F7" />
+    <Path
+      d="M20 31c-6.069 0-11-4.931-11-11S13.931 9 20 9s11 4.931 11 11-4.931 11-11 11Zm0-19.977A8.979 8.979 0 0 0 11.023 20 8.979 8.979 0 0 0 20 28.977 8.98 8.98 0 0 0 28.977 20 8.98 8.98 0 0 0 20 11.023Z"
+      fill="#452C75"
+    />
+    <Path
+      d="M20.106 26.98c3.894 0 7.055-3.11 7.105-6.98H13c.05 3.869 3.211 6.98 7.106 6.98Z"
+      fill="#452C75"
+    />
+  </Svg>
+)
+
+export default NftReceivedIcon

package/src/images/NftSentIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import Svg, { Circle, Path } from 'react-native-svg'
+
+const NftSentIcon = () => (
+  <Svg width={40} height={40}>
+    <Circle cx={20} cy={20} r={20} fill="#ECE6F7" testID="NftSentIcon" />
+    <Path
+      d="M20 31c-6.069 0-11-4.931-11-11S13.931 9 20 9s11 4.931 11 11-4.931 11-11 11Zm0-19.977A8.979 8.979 0 0 0 11.023 20 8.979 8.979 0 0 0 20 28.977 8.98 8.98 0 0 0 28.977 20 8.98 8.98 0 0 0 20 11.023Z"
+      fill="#452C75"
+    />
+    <Path
+      d="M20.106 13c-3.894 0-7.055 3.11-7.106 6.98h14.212C27.16 16.11 24 13 20.105 13Z"
+      fill="#452C75"
+    />
+  </Svg>
+)
+
+export default NftSentIcon

package/src/images/Palm.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+
+interface Props {
+  width?: number
+  height?: number
+  color?: string
+  style?: ViewStyle
+}
+
+export default function Palm({ width = 571, height = 320, style }: Props) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 571 320" fill="none" style={style}>
+      <Path
+        d="M249.974 110.885C333.589 66.3268 394.615 61.4001 407.204 94.7831C418.859 138.325 262.485 201.055 258.486 189.292C247.74 179.622 384.096 219.752 398.143 260.649C331.777 257.203 235.235 215.141 151.197 256.863C49.0167 307.49 15.9102 423.612 0.495358 473.186C24.2145 84.5169 348.775 -149.449 249.974 110.885Z"
+        fill="#CAF27A"
+      />
+    </Svg>
+  )
+}

package/src/images/Star.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg'
+
+const Star = () => (
+  <Svg width={24} height={24} fill="none">
+    <G clipPath="url(#a)">
+      <Path
+        d="m12.265 17.675 6.344 3.828-1.684-7.216 5.605-4.855-7.38-.626L12.264 2 9.381 8.806 2 9.432l5.605 4.855-1.684 7.216 6.344-3.828Z"
+        fill="#FCBA27"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill={'#FFFFFF'} d="M0 0h24v24H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+)
+
+export default Star

package/src/images/WelcomeLogo.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { getAppConfig } from 'src/appConfig'
+
+export default function WelcomeLogo() {
+  const CustomWelcomeLogo = getAppConfig().themes?.default?.assets?.welcomeLogo
+  if (CustomWelcomeLogo) {
+    return <CustomWelcomeLogo />
+  }
+
+  return (
+    <Svg width={168} height={58} viewBox={`0 0 168 58`} fill="none">
+      <Path
+        fill="#000"
+        d="m30.447 1.167 8.835 3.723V57h-7.331l-1.805-3.685a11.426 11.426 0 0 1-2.143 1.993c-.777.526-1.617.965-2.52 1.316-.876.351-1.816.602-2.819.752-1.003.15-2.055.226-3.158.226-2.757 0-5.301-.502-7.633-1.504-2.33-1.003-4.348-2.382-6.053-4.136-1.68-1.78-3.008-3.86-3.985-6.241C.882 43.34.406 40.783.406 38.051c0-2.757.476-5.327 1.429-7.708.978-2.381 2.306-4.449 3.985-6.203 1.68-1.755 3.685-3.133 6.016-4.136 2.356-1.003 4.913-1.504 7.67-1.504 1.078 0 2.118.088 3.12.263 1.003.151 1.968.389 2.895.715.928.325 1.805.751 2.632 1.278a11.78 11.78 0 0 1 2.294 1.917V1.167Zm.075 36.846c0-1.754-.263-3.321-.79-4.7-.5-1.378-1.228-2.544-2.18-3.496-.928-.953-2.043-1.679-3.346-2.181-1.304-.501-2.758-.752-4.362-.752-1.579 0-3.033.289-4.361.865a9.572 9.572 0 0 0-3.346 2.331c-.928 1.003-1.655 2.181-2.18 3.534-.527 1.354-.79 2.82-.79 4.399 0 1.604.263 3.096.79 4.474.525 1.379 1.252 2.569 2.18 3.572.927.978 2.043 1.755 3.346 2.331 1.328.552 2.782.827 4.361.827 1.604 0 3.058-.238 4.362-.714 1.303-.501 2.418-1.228 3.346-2.181.952-.977 1.68-2.155 2.18-3.534.527-1.404.79-2.995.79-4.775Zm20.227-18.648h8.836V57h-8.836V19.365ZM49.773 5.98c0-.752.138-1.466.413-2.143a6.18 6.18 0 0 1 1.166-1.767A4.994 4.994 0 0 1 53.043.904a4.975 4.975 0 0 1 2.105-.451 5.23 5.23 0 0 1 2.143.451A5.305 5.305 0 0 1 59.06 2.07a5.29 5.29 0 0 1 1.165 1.767c.276.677.414 1.391.414 2.143 0 .752-.138 1.466-.414 2.143A5.29 5.29 0 0 1 59.06 9.89c-.502.501-1.09.89-1.767 1.166a5.639 5.639 0 0 1-2.144.413 5.36 5.36 0 0 1-2.105-.413 4.994 4.994 0 0 1-1.692-1.166 6.18 6.18 0 0 1-1.166-1.767 5.626 5.626 0 0 1-.413-2.143ZM83.159 57l-16.43-37.635h9.436l10.152 24.777 10.678-24.777h9.437L89.325 57h-6.166Zm41.056 0-16.43-37.635h9.437l10.152 24.777 10.677-24.777h9.437L130.381 57h-6.166Zm29.778-37.635h8.835V57h-8.835V19.365Zm-.978-13.385c0-.752.138-1.466.414-2.143.3-.677.689-1.266 1.165-1.767a4.99 4.99 0 0 1 1.692-1.166 4.978 4.978 0 0 1 2.106-.451c.752 0 1.466.151 2.143.451a5.32 5.32 0 0 1 1.767 1.166c.501.501.89 1.09 1.165 1.767a5.62 5.62 0 0 1 .414 2.143 5.62 5.62 0 0 1-.414 2.143 5.282 5.282 0 0 1-1.165 1.767 5.32 5.32 0 0 1-1.767 1.166 5.639 5.639 0 0 1-2.143.413 5.363 5.363 0 0 1-2.106-.413 4.99 4.99 0 0 1-1.692-1.166 6.168 6.168 0 0 1-1.165-1.767 5.62 5.62 0 0 1-.414-2.143Z"
+      />
+    </Svg>
+  )
+}