[Rn-811]: ENS & Unstoppable domains

scripts/allowed-url-prefixes.js

@@ -45,6 +45,7 @@ const allowedUrlPrefixes = [
   'https://cloudflare-eth.com/',
   'https://polygon-rpc.com/',
   'https://matic-mumbai.chainstacklabs.com',
+  'https://deep-index.moralis.io/api/v2/',
 ].concat(developmentOnlyAllowedUrlPrefixes);
 
 const allowedUrlPrefixString = allowedUrlPrefixes.join(',');

src/components/avatar/ENSDomainIcon.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import Svg, {Circle, Defs, LinearGradient, Path, Stop} from 'react-native-svg';
+
+interface ENSDomainIconProps {
+  size?: number;
+  showBackground?: boolean;
+}
+
+const ENSDomainIcon: React.FC<ENSDomainIconProps> = props => {
+  const {size = 20, showBackground = true} = props;
+  const viewBox = showBackground ? '0 0 20 20' : '0 0 18 21';
+
+  return (
+    <Svg width={size} height={size} viewBox={viewBox} fill="none">
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_9982_100114"
+          x1="10.3359"
+          y1="4.13786"
+          x2="5.9806"
+          y2="8.8593"
+          gradientUnits="userSpaceOnUse">
+          <Stop offset="0.58" stopColor="#A0A8D4" />
+          <Stop offset="0.73" stopColor="#8791C7" />
+          <Stop offset="0.91" stopColor="#6470B4" />
+        </LinearGradient>
+        <LinearGradient
+          id="paint1_linear_9982_100114"
+          x1="10.4278"
+          y1="15.8617"
+          x2="14.7846"
+          y2="11.1402"
+          gradientUnits="userSpaceOnUse">
+          <Stop offset="0.58" stopColor="#A0A8D4" />
+          <Stop offset="0.73" stopColor="#8791C7" />
+          <Stop offset="0.91" stopColor="#6470B4" />
+        </LinearGradient>
+        <LinearGradient
+          id="paint2_linear_9982_100114"
+          x1="10.3818"
+          y1="3.9407"
+          x2="10.3818"
+          y2="16.0371"
+          gradientUnits="userSpaceOnUse">
+          <Stop stopColor="#513EFF" />
+          <Stop offset="0.18" stopColor="#5157FF" />
+          <Stop offset="0.57" stopColor="#5298FF" />
+          <Stop offset="1" stopColor="#52E5FF" />
+        </LinearGradient>
+      </Defs>
+      {showBackground ? (
+        <>
+          <Circle cx="10" cy="10" r="10" fill="#F5F7F8" />
+          <Path
+            d="M6.38233 8.85485C6.50093 9.10834 6.79444 9.60939 6.79444 9.60939L10.1876 4L6.87597 6.31254C6.67864 6.44418 6.51675 6.62237 6.40457 6.83138C6.25374 7.14669 6.1736 7.49114 6.16976 7.84065C6.16592 8.19017 6.23847 8.5363 6.38233 8.85485Z"
+            fill="url(#paint0_linear_9982_100114)"
+          />
+          <Path
+            d="M5.03779 10.7024C5.07518 11.239 5.22678 11.7614 5.48244 12.2346C5.7381 12.7078 6.09191 13.1209 6.52019 13.4463L10.1832 16.0005C10.1832 16.0005 7.89141 12.6977 5.95836 9.41124C5.76266 9.06403 5.6311 8.6844 5.56997 8.29055C5.54291 8.1122 5.54291 7.93079 5.56997 7.75244C5.51957 7.84583 5.42173 8.03706 5.42173 8.03706C5.22573 8.43681 5.09224 8.86426 5.02593 9.30451C4.98777 9.76988 4.99174 10.2378 5.03779 10.7024Z"
+            fill="#A0A8D4"
+          />
+          <Path
+            d="M14.3829 11.1447C14.2643 10.8912 13.9708 10.3901 13.9708 10.3901L10.5775 15.9995L13.8892 13.6885C14.0865 13.5568 14.2484 13.3786 14.3606 13.1696C14.5117 12.8541 14.5919 12.5094 14.5958 12.1596C14.5996 11.8098 14.5269 11.4634 14.3829 11.1447Z"
+            fill="url(#paint1_linear_9982_100114)"
+          />
+          <Path
+            d="M15.7274 9.29809C15.69 8.76152 15.5384 8.23914 15.2827 7.76592C15.0271 7.2927 14.6733 6.87956 14.245 6.55417L10.582 4C10.582 4 12.8723 7.30278 14.8068 10.5893C15.002 10.9366 15.133 11.3162 15.1937 11.7099C15.2208 11.8883 15.2208 12.0697 15.1937 12.2481C15.2441 12.1547 15.3419 11.9634 15.3419 11.9634C15.538 11.5637 15.6714 11.1362 15.7377 10.696C15.7764 10.2307 15.7729 9.76279 15.7274 9.29809Z"
+            fill="#A0A8D4"
+          />
+          <Path
+            d="M6.40456 6.83138C6.51674 6.62237 6.67863 6.44418 6.87596 6.31254L10.1876 4L6.79443 9.61087C6.79443 9.61087 6.49795 9.10982 6.38233 8.85633C6.23824 8.53758 6.16557 8.19118 6.16941 7.84139C6.17325 7.49161 6.25351 7.14689 6.40456 6.83138ZM5.03779 10.7019C5.07518 11.2385 5.22678 11.7609 5.48244 12.2341C5.7381 12.7073 6.09191 13.1204 6.52019 13.4458L10.1832 16C10.1832 16 7.89141 12.6972 5.95836 9.41075C5.76266 9.06353 5.6311 8.68391 5.56997 8.29006C5.54291 8.11171 5.54291 7.9303 5.56997 7.75195C5.51957 7.84534 5.42173 8.03657 5.42173 8.03657C5.22573 8.43631 5.09224 8.86377 5.02593 9.30401C4.98777 9.76939 4.99174 10.2373 5.03779 10.7019ZM14.3769 11.1466C14.2583 10.8931 13.9648 10.3921 13.9648 10.3921L10.5775 16L13.8892 13.6889C14.0865 13.5573 14.2484 13.3791 14.3606 13.1701C14.5116 12.8546 14.5919 12.5099 14.5957 12.1601C14.5996 11.8103 14.5269 11.4639 14.3828 11.1452L14.3769 11.1466ZM15.7214 9.29957C15.684 8.763 15.5324 8.24062 15.2768 7.7674C15.0211 7.29418 14.6673 6.88104 14.239 6.55565L10.582 4C10.582 4 12.8723 7.30278 14.8068 10.5893C15.002 10.9366 15.133 11.3162 15.1937 11.7099C15.2208 11.8883 15.2208 12.0697 15.1937 12.2481C15.2441 12.1547 15.3419 11.9634 15.3419 11.9634C15.5379 11.5637 15.6714 11.1362 15.7377 10.696C15.7764 10.2307 15.7729 9.76279 15.7274 9.29809L15.7214 9.29957Z"
+            fill="url(#paint2_linear_9982_100114)"
+          />
+        </>
+      ) : (
+        <Path
+          d="M2.34094 5.21896C2.5279 4.87061 2.79772 4.57363 3.12661 4.35423L8.64606 0.5L2.99072 9.85145C2.99072 9.85145 2.49659 9.01637 2.30388 8.59389C2.06373 8.06263 1.94261 7.4853 1.94902 6.90232C1.95542 6.31935 2.08918 5.74482 2.34094 5.21896ZM0.062987 11.6699C0.125305 12.5641 0.377971 13.4348 0.804067 14.2235C1.23016 15.0122 1.81985 15.7007 2.53365 16.2431L8.63865 20.5C8.63865 20.5 4.81901 14.9954 1.59727 9.51791C1.2711 8.93922 1.05183 8.30652 0.949954 7.65009C0.904857 7.35284 0.904857 7.05049 0.949954 6.75324C0.865952 6.90889 0.702888 7.22761 0.702888 7.22761C0.376215 7.89385 0.153736 8.60628 0.0432217 9.34002C-0.0203894 10.1156 -0.0137741 10.8954 0.062987 11.6699ZM15.6282 12.4111C15.4305 11.9886 14.9413 11.1535 14.9413 11.1535L9.29585 20.5L14.8153 16.6482C15.1442 16.4288 15.414 16.1319 15.601 15.7835C15.8527 15.2577 15.9865 14.6831 15.9929 14.1001C15.9993 13.5172 15.8782 12.9398 15.638 12.4086L15.6282 12.4111ZM17.869 9.33261C17.8067 8.43834 17.5541 7.5677 17.128 6.779C16.7019 5.9903 16.1122 5.30173 15.3984 4.75942L9.30326 0.5C9.30326 0.5 13.1204 6.00463 16.3446 11.4821C16.6699 12.0609 16.8884 12.6936 16.9895 13.3499C17.0346 13.6472 17.0346 13.9495 16.9895 14.2468C17.0735 14.0911 17.2366 13.7724 17.2366 13.7724C17.5632 13.1062 17.7857 12.3937 17.8962 11.66C17.9607 10.8844 17.9549 10.1046 17.8789 9.33014L17.869 9.33261Z"
+          fill="url(#paint2_linear_9982_100114)"
+        />
+      )}
+    </Svg>
+  );
+};
+
+export default ENSDomainIcon;

src/components/avatar/ProfileIcon.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as Svg from 'react-native-svg';
 import {useTheme} from 'styled-components/native';
-import {Midnight, ProgressBlue} from '../../styles/colors';
+import {LinkBlue, Midnight, ProgressBlue} from '../../styles/colors';
 
 interface ProfileIconProps {
   color?: Svg.Color;
@@ -14,7 +14,7 @@ const ProfileIcon: React.FC<ProfileIconProps> = props => {
   const theme = useTheme();
 
   size = size || 35;
-  color = color || (theme.dark ? '#4989FF' : '#9FAFF5');
+  color = color || (theme.dark ? LinkBlue : '#9FAFF5');
   background = background || (theme.dark ? Midnight : ProgressBlue);
 
   return (

src/components/avatar/UnstoppableDomainIcon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Svg, {Circle, Path} from 'react-native-svg';
+interface UnstoppableDomainIconProps {
+  size?: number;
+  showBackground?: boolean;
+}
+
+const UnstoppableDomainIcon: React.FC<UnstoppableDomainIconProps> = props => {
+  const {size = 20, showBackground = true} = props;
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      {showBackground ? (
+        <>
+          <Circle cx="10" cy="10" r="10" fill="#F5F7F8" />
+          <Path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M16 5.1875V9.3125L4 14.1875L16 5.1875Z"
+            fill="#2FE9FF"
+          />
+          <Path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M13.75 5V12.125C13.75 14.1961 12.0711 15.875 10 15.875C7.92893 15.875 6.25 14.1961 6.25 12.125V9.125L8.5 7.8875V12.125C8.5 12.8499 9.08763 13.4375 9.8125 13.4375C10.5374 13.4375 11.125 12.8499 11.125 12.125V6.44375L13.75 5Z"
+            fill="#4C47F7"
+          />
+        </>
+      ) : (
+        <>
+          <Path d="M20 0.828247V7.637L0 15.6823L20 0.828247Z" fill="#00C9FF" />
+          <Path
+            d="M16.2507 0.532715V12.2783C16.2507 13.9196 15.5921 15.4938 14.42 16.6545C13.2478 17.8151 11.658 18.4672 10.0003 18.4672C8.34257 18.4672 6.75275 17.8151 5.58057 16.6545C4.4084 15.4938 3.74988 13.9196 3.74988 12.2783V7.329L7.49947 5.28576V12.2783C7.46438 12.5834 7.49478 12.8925 7.58868 13.1852C7.68263 13.478 7.83792 13.7477 8.04449 13.9769C8.25106 14.206 8.50416 14.3894 8.78725 14.5149C9.07039 14.6405 9.37707 14.7054 9.68729 14.7054C9.99746 14.7054 10.3042 14.6405 10.5873 14.5149C10.8704 14.3894 11.1235 14.206 11.33 13.9769C11.5366 13.7477 11.6919 13.478 11.7858 13.1852C11.8798 12.8925 11.9102 12.5834 11.8751 12.2783V2.903L16.2507 0.532715Z"
+            fill="#0D67FE"
+          />
+        </>
+      )}
+    </Svg>
+  );
+};
+
+export default UnstoppableDomainIcon;

src/components/home-card/HomeCard.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import {ReactElement, ReactNode} from 'react';
 import styled, {useTheme} from 'styled-components/native';
-import {Action, LightBlack, Slate, SlateDark, White} from '../../styles/colors';
+import {
+  Action,
+  LightBlack,
+  Midnight,
+  Slate,
+  SlateDark,
+  White,
+} from '../../styles/colors';
 import Haptic from '../haptic-feedback/haptic';
 import {
   ActiveOpacity,
@@ -92,7 +99,7 @@ const FooterArrow = styled.TouchableOpacity`
   height: 35px;
   align-self: flex-end;
   border-radius: 50px;
-  background-color: ${({theme}) => (theme.dark ? '#0C204E' : '#ECEFFD')};
+  background-color: ${({theme}) => (theme.dark ? Midnight : '#ECEFFD')};
   align-items: center;
   justify-content: center;
 `;

src/components/icons/copy-to-clipboard/CopyToClipboardIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as Svg from 'react-native-svg';
+import {Action} from '../../../styles/colors';
+
+interface CopyToClipboardIconProps {
+  size?: number;
+  color?: Svg.Color;
+}
+
+const CopyToClipboardIcon: React.FC<CopyToClipboardIconProps> = props => {
+  let {size = 20, color = Action} = props;
+
+  return (
+    <Svg.Svg width={size} height={size} viewBox="0 0 20 21" fill="none">
+      <Svg.Path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.5769 0.5H2.8886C1.81718 0.5 0.940552 1.31818 0.940552 2.31818V15.0455H2.8886V2.31818H14.5769V0.5ZM17.183 4.13636H6.51631C5.44964 4.13636 4.57692 4.95455 4.57692 5.95455V18.6818C4.57692 19.6818 5.44964 20.5 6.51631 20.5H17.183C18.2496 20.5 19.1224 19.6818 19.1224 18.6818V5.95455C19.1224 4.95455 18.2496 4.13636 17.183 4.13636ZM17.3042 18.6818H6.3951V5.95455H17.3042V18.6818Z"
+        fill={color}
+      />
+    </Svg.Svg>
+  );
+};
+
+export default CopyToClipboardIcon;

src/components/icons/share/Share.tsx

@@ -9,32 +9,57 @@ import {
 } from '../../../styles/colors';
 import styled from 'styled-components/native';
 
-const ShareSvg: React.FC<{isDark: boolean}> = ({isDark}) => {
+interface StyleProps {
+  showBackground?: boolean;
+}
+
+const ShareSvg: React.FC<{
+  isDark: boolean;
+  width: number;
+  height: number;
+  fillColor?: string;
+}> = ({isDark, width, height, fillColor}) => {
   return (
-    <Svg width="14" height="16" viewBox="0 0 14 16" fill="none">
+    <Svg width={width} height={height} viewBox="0 0 14 16" fill="none">
       <Path
         d="M11 6C12.654 6 14 4.654 14 3C14 1.346 12.654 0 11 0C9.346 0 8 1.346 8 3C8 3.223 8.029 3.439 8.075 3.649L4.855 5.661C4.343 5.254 3.704 5 3 5C1.346 5 0 6.346 0 8C0 9.654 1.346 11 3 11C3.704 11 4.343 10.746 4.855 10.339L8.075 12.351C8.029 12.561 8 12.777 8 13C8 14.654 9.346 16 11 16C12.654 16 14 14.654 14 13C14 11.346 12.654 10 11 10C10.296 10 9.657 10.254 9.145 10.661L5.925 8.649C5.971 8.439 6 8.223 6 8C6 7.777 5.971 7.561 5.925 7.351L9.145 5.339C9.657 5.746 10.296 6 11 6Z"
-        fill={isDark ? White : SlateDark}
+        fill={fillColor ? fillColor : isDark ? White : SlateDark}
       />
     </Svg>
   );
 };
 
-const ShareContainer = styled.View`
-  height: 40px;
-  width: 40px;
+const ShareContainer = styled.View<StyleProps>`
+  height: ${({showBackground}) => (showBackground ? '40px' : '10px')};
+  width: ${({showBackground}) => (showBackground ? '40px' : '10px')};
   border-radius: 50px;
-  background: ${({theme: {dark}}) => (dark ? LightBlack : NeutralSlate)};
+  background: ${({theme: {dark}, showBackground}) =>
+    showBackground ? (dark ? LightBlack : NeutralSlate) : 'transparent'};
   align-items: center;
   justify-content: center;
 `;
 
-const ShareIcon = () => {
+const ShareIcon = ({
+  width = 14,
+  height = 16,
+  showBackground = true,
+  fillColor,
+}: {
+  width?: number;
+  height?: number;
+  showBackground?: boolean;
+  fillColor?: string;
+}) => {
   const theme = useTheme();
 
   return (
-    <ShareContainer>
-      <ShareSvg isDark={theme.dark} />
+    <ShareContainer showBackground={showBackground}>
+      <ShareSvg
+        isDark={theme.dark}
+        width={width}
+        height={height}
+        fillColor={fillColor}
+      />
     </ShareContainer>
   );
 };

src/components/list/ContactRow.tsx

@@ -30,6 +30,14 @@ const RowContainer = styled.View`
   align-items: center;
 `;
 
+export type DomainType = 'ENSDomain' | 'UnstoppableDomain';
+
+export interface DomainProps {
+  domainName: string;
+  domainType: DomainType;
+  domainAddress?: string;
+}
+
 export interface ContactRowProps {
   address: string;
   coin: string;
@@ -39,6 +47,7 @@ export interface ContactRowProps {
   tag?: number; // backward compatibility
   destinationTag?: number;
   email?: string;
+  domain?: DomainProps;
 }
 
 interface Props {
@@ -49,18 +58,31 @@ interface Props {
 const ContactRow = ({contact, onPress}: Props) => {
   const theme = useTheme();
   const underlayColor = theme.dark ? '#121212' : '#fbfbff';
-  const {coin: _coin, name, email, address, chain} = contact;
+  const {coin: _coin, name, email, address, chain, domain} = contact;
   const coin = getCurrencyAbbreviation(_coin, chain);
+  const {domainName, domainType, domainAddress} = domain || {};
   return (
     <ContactContainer underlayColor={underlayColor} onPress={onPress}>
       <RowContainer>
         <ContactImageContainer>
-          <ContactIcon name={name} coin={coin} size={45} chain={chain} />
+          <ContactIcon
+            name={name}
+            coin={coin}
+            size={45}
+            chain={chain}
+            domainType={domainType}
+          />
         </ContactImageContainer>
         <ContactColumn>
           <H5>{name}</H5>
           <ListItemSubText numberOfLines={1} ellipsizeMode={'tail'}>
-            {email ? email : address}
+            {domainAddress
+              ? domainAddress
+              : domainName
+              ? domainName
+              : email
+              ? email
+              : address}
           </ListItemSubText>
         </ContactColumn>
         <AngleRight />