wallet details, send to, contact add and other fixes

bitpay · Apr 14, 2023 · ab12635 · ab12635
1 parent e858c56
commit ab12635
Show file tree

Hide file tree

Showing 17 changed files with 692 additions and 98 deletions.
diff --git a/src/components/avatar/ENSDomainIcon.tsx b/src/components/avatar/ENSDomainIcon.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Svg, {Defs, LinearGradient, Path, Stop} from 'react-native-svg';
+
+interface ENSDomainIconProps {
+  size?: number;
+}
+
+const ENSDomainIcon: React.FC<ENSDomainIconProps> = props => {
+  let {size = 20} = props;
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 21" fill="none">
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_9203_90493"
+          x1="8.96972"
+          y1="0.401174"
+          x2="8.96972"
+          y2="20.5618"
+          gradientUnits="userSpaceOnUse">
+          <Stop stopColor="#513EFF" />
+          <Stop offset="0.18" stopColor="#5157FF" />
+          <Stop offset="0.57" stopColor="#5298FF" />
+          <Stop offset="1" stopColor="#52E5FF" />
+        </LinearGradient>
+      </Defs>
+      <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(#paint0_linear_9203_90493)"
+      />
+    </Svg>
+  );
+};
+
+export default ENSDomainIcon;
diff --git a/src/components/avatar/ProfileIcon.tsx b/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 (

diff --git a/src/components/avatar/UnstoppableDomainIcon.tsx b/src/components/avatar/UnstoppableDomainIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import * as Svg from 'react-native-svg';
+
+interface UnstoppableDomainIconProps {
+  size?: number;
+}
+
+const UnstoppableDomainIcon: React.FC<UnstoppableDomainIconProps> = props => {
+  const {size = 20} = props;
+
+  return (
+    <>
+      <Svg.Svg width={size} height={size} viewBox="0 0 20 19" fill="none">
+        <Svg.Path
+          d="M20 0.828247V7.637L0 15.6823L20 0.828247Z"
+          fill="#00C9FF"
+        />
+        <Svg.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.Svg>
+    </>
+  );
+};
+
+export default UnstoppableDomainIcon;
diff --git a/src/components/home-card/HomeCard.tsx b/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;
 `;

diff --git a/src/components/icons/copy-to-clipboard/CopyToClipboardIcon.tsx b/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;
diff --git a/src/components/icons/share/Share.tsx b/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>
   );
 };

diff --git a/src/components/list/ContactRow.tsx b/src/components/list/ContactRow.tsx
@@ -30,6 +30,8 @@ const RowContainer = styled.View`
   align-items: center;
 `;
 
+export type DomainType = 'ens' | 'unstoppable';
+
 export interface ContactRowProps {
   address: string;
   coin: string;
@@ -40,6 +42,7 @@ export interface ContactRowProps {
   destinationTag?: number;
   email?: string;
   domain?: string;
+  domainType?: DomainType;
 }
 
 interface Props {
@@ -50,13 +53,27 @@ interface Props {
 const ContactRow = ({contact, onPress}: Props) => {
   const theme = useTheme();
   const underlayColor = theme.dark ? '#121212' : '#fbfbff';
-  const {coin: _coin, name, email, address, chain, domain} = contact;
+  const {
+    coin: _coin,
+    name,
+    email,
+    address,
+    chain,
+    domain,
+    domainType,
+  } = contact;
   const coin = getCurrencyAbbreviation(_coin, chain);
   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>

diff --git a/src/components/modal/transact-menu/TransactMenuIcons.tsx b/src/components/modal/transact-menu/TransactMenuIcons.tsx
@@ -17,7 +17,7 @@ const BuyCrypto = () => {
           fill={theme.dark ? Midnight : Action}
         />
         <Svg.Path
-          fill={theme.dark ? '#4989FF' : White}
+          fill={theme.dark ? LinkBlue : White}
           d="M23.9638 31.2152H22.4459V29.3178C21.7518 29.2464 21.0966 29.0518 20.4803 28.7339C19.8641 28.4096 19.3614 27.9296 18.9722 27.2939C18.5829 26.6582 18.3883 25.8311 18.3883 24.8127H20.8014C20.8014 25.4743 20.9182 25.9933 21.1517 26.3695C21.3853 26.7392 21.6836 27.002 22.0469 27.1576C22.4102 27.3068 22.7832 27.3814 23.1659 27.3814C23.8794 27.3814 24.4243 27.2031 24.8006 26.8463C25.1768 26.4895 25.3649 26.0257 25.3649 25.4549C25.3649 24.897 25.193 24.4397 24.8492 24.0829C24.5054 23.7261 23.9086 23.3985 23.0589 23.1001C22.2221 22.8082 21.4955 22.4774 20.8793 22.1076C20.263 21.7379 19.783 21.2806 19.4392 20.7357C19.1019 20.1908 18.9332 19.5129 18.9332 18.7021C18.9332 17.6058 19.2673 16.7171 19.9354 16.036C20.6101 15.3484 21.5085 14.9429 22.6307 14.8197V12.7082H24.1584V14.8392C25.2611 14.9948 26.1304 15.4619 26.7661 16.2403C27.4083 17.0122 27.7294 18.0501 27.7294 19.354H25.326C25.326 18.5431 25.1444 17.9074 24.7811 17.4469C24.4243 16.9863 23.9313 16.756 23.3021 16.756C22.6275 16.756 22.1312 16.9409 21.8134 17.3106C21.502 17.6739 21.3463 18.1345 21.3463 18.6923C21.3463 19.2372 21.5117 19.6816 21.8426 20.0254C22.1799 20.3692 22.7961 20.7033 23.6913 21.0276C24.5281 21.3325 25.2514 21.673 25.8612 22.0493C26.4774 22.419 26.951 22.8731 27.2818 23.4115C27.6191 23.9499 27.7878 24.6245 27.7878 25.4354C27.7878 26.5706 27.4407 27.4723 26.7466 28.1404C26.0525 28.8021 25.1249 29.1945 23.9638 29.3178V31.2152Z"
         />
       </Svg.G>
@@ -37,17 +37,17 @@ const BuyGiftCard = () => {
         fill={theme.dark ? Midnight : Action}
       />
       <Svg.Path
-        fill={theme.dark ? '#4989FF' : White}
+        fill={theme.dark ? LinkBlue : White}
         fillRule="evenodd"
         clipRule="evenodd"
         d="M31.3664 16.5312H28.4019C28.5425 16.2827 28.6245 15.995 28.6245 15.6875C28.6245 14.757 27.8865 14 26.9793 14C25.8914 14 25.2009 14.7228 24.7857 15.4178C24.3706 14.7228 23.6801 14 22.5922 14C21.685 14 20.947 14.757 20.947 15.6875C20.947 15.995 21.029 16.2827 21.1696 16.5312H18.2051C18.0535 16.5312 17.9309 16.6572 17.9309 16.8125V19.0625C17.9309 19.2178 18.0535 19.3438 18.2051 19.3438H31.3664C31.5179 19.3438 31.6406 19.2178 31.6406 19.0625V16.8125C31.6406 16.6572 31.5179 16.5312 31.3664 16.5312ZM26.9793 15.125C27.2816 15.125 27.5277 15.3773 27.5277 15.6875C27.5277 15.9977 27.2816 16.25 26.9793 16.25H25.585C25.8389 15.7352 26.286 15.125 26.9793 15.125ZM23.9867 16.25C23.7329 15.7354 23.2857 15.125 22.5922 15.125C22.2899 15.125 22.0438 15.3773 22.0438 15.6875C22.0438 15.9977 22.2899 16.25 22.5922 16.25H23.9867Z"
       />
       <Svg.Path
-        fill={theme.dark ? '#4989FF' : White}
+        fill={theme.dark ? LinkBlue : White}
         d="M31.0869 28.0073C31.0762 27.9522 30.7985 26.6562 28.6245 26.6562H25.4337C25.5438 26.9273 25.6084 27.2126 25.6084 27.5C25.6084 27.6553 25.4857 27.7812 25.3342 27.7812H20.3987C20.2471 27.7812 20.1245 27.6553 20.1245 27.5C20.1245 27.3447 20.2471 27.2188 20.3987 27.2188H25.034C24.8855 26.4076 24.1253 25.6531 23.3314 25.5456C23.2678 25.5392 23.2044 25.5312 23.1406 25.5312H21.0893C20.3671 24.5314 18.9801 23.8438 17.6568 23.8438H14.9148C14.7633 23.8438 14.6406 23.9697 14.6406 24.125V28.0625C14.6406 28.1682 14.6985 28.2652 14.7906 28.3131L20.9433 31.5247C21.3268 31.7035 21.7276 31.793 22.1143 31.793C22.4541 31.7929 22.7832 31.7238 23.0793 31.5857L30.9211 28.3232C31.0432 28.2723 31.1129 28.1398 31.0869 28.0073Z"
       />
       <Svg.Path
-        fill={theme.dark ? '#4989FF' : White}
+        fill={theme.dark ? LinkBlue : White}
         d="M21.3519 24.9688H23.1406C23.2118 24.9688 23.283 24.9752 23.354 24.9826L23.3842 24.9856C24.0668 25.0779 24.711 25.5102 25.1287 26.0938H28.6244C29.1776 26.0938 29.6253 26.1737 29.9954 26.2961V20.1875C29.9954 20.0322 29.8728 19.9062 29.7212 19.9062H19.8502C19.6987 19.9062 19.576 20.0322 19.576 20.1875V23.6927C20.2686 23.9886 20.8943 24.4268 21.3519 24.9688Z"
       />
     </Svg.Svg>
@@ -86,11 +86,11 @@ const Exchange = () => {
         fill={theme.dark ? Midnight : Action}
       />
       <Svg.Path
-        fill={theme.dark ? '#4989FF' : White}
+        fill={theme.dark ? LinkBlue : White}
         d="M14.048 22.5538C14.048 17.7366 18.0338 13.8172 22.9327 13.8172C25.1019 13.8172 27.1669 14.585 28.7883 15.9846L26.45 18.284C26.3574 18.375 26.3259 18.5101 26.3686 18.6317C26.4117 18.7534 26.5214 18.8401 26.6516 18.8552L32.4608 19.5272C32.4741 19.5289 32.4874 19.5296 32.5008 19.5296C32.591 19.5296 32.6781 19.4946 32.7423 19.4311C32.8162 19.3586 32.8524 19.2564 32.8401 19.1543L32.1566 13.4419C32.1413 13.3139 32.0531 13.206 31.9294 13.1637C31.8057 13.1217 31.668 13.1522 31.5757 13.2436L29.7557 15.0333C27.8746 13.3814 25.4655 12.4731 22.9327 12.4731C17.28 12.4731 12.6812 16.9953 12.6812 22.5538C12.6812 22.9248 12.9873 23.2258 13.3646 23.2258C13.7418 23.2258 14.048 22.9248 14.048 22.5538Z"
       />
       <Svg.Path
-        fill={theme.dark ? '#4989FF' : White}
+        fill={theme.dark ? LinkBlue : White}
         d="M32.831 21.2095C32.4537 21.2095 32.1476 21.5105 32.1476 21.8815C32.1476 26.6991 28.1618 30.6181 23.2629 30.6181C21.0937 30.6181 19.0287 29.8503 17.4076 28.4504L19.7456 26.1513C19.8382 26.0603 19.8697 25.9252 19.827 25.8036C19.7839 25.6819 19.6742 25.5952 19.544 25.5801L13.7348 24.9081C13.6303 24.896 13.5271 24.9316 13.4532 25.0042C13.3794 25.0771 13.3432 25.1789 13.3555 25.281L14.0389 30.9934C14.0543 31.1211 14.1425 31.2293 14.2662 31.2713C14.3028 31.2837 14.3407 31.2901 14.3783 31.2901C14.4675 31.2901 14.5549 31.2555 14.6199 31.1917L16.4399 29.402C18.321 31.0539 20.7298 31.9622 23.2629 31.9622C28.9156 31.9622 33.5144 27.44 33.5144 21.8815C33.5144 21.5105 33.2083 21.2095 32.831 21.2095Z"
       />
     </Svg.Svg>
@@ -109,7 +109,7 @@ const Receive = () => {
         fill={theme.dark ? Midnight : Action}
       />
       <Svg.Path
-        fill={theme.dark ? '#4989FF' : White}
+        fill={theme.dark ? LinkBlue : White}
         fillRule="evenodd"
         clipRule="evenodd"
         d="M29.7102 24.4417L28.2969 22.9622L23.9563 27.5063V14.6138H21.9374V27.5063L17.5968 22.9622L16.1836 24.4417L22.9469 31.522L29.7102 24.4417Z"
@@ -124,7 +124,7 @@ const Scan = () => {
   return (
     <Svg.Svg width="52" height="52" viewBox="0 0 46 46" fill="none">
       <Svg.Path
-        fill={theme.dark ? '#4989FF' : White}
+        fill={theme.dark ? LinkBlue : White}
         fillRule="evenodd"
         clipRule="evenodd"
         d="M16.1534 15.0967H15.2853V20.2295H17.0214V16.8076H20.4937V15.0967H17.0214H16.1534ZM29.8687 15.0967H30.9103V20.2295H28.827V17.1498H25.702V15.0967H28.827H29.8687ZM30.9103 29.6398H29.8687H28.827H25.702V27.5866H28.827V24.5069H30.9103V29.6398ZM16.327 29.6398H15.2853V24.5069H17.3687V27.5866H20.4937V29.6398H17.3687H16.327ZM33.5145 21.9405H12.6812V22.796H33.5145V21.9405Z"
@@ -145,7 +145,7 @@ const Send = () => {
         fill={theme.dark ? Midnight : Action}
       />
       <Svg.Path
-        fill={theme.dark ? '#4989FF' : White}
+        fill={theme.dark ? LinkBlue : White}
         fillRule="evenodd"
         clipRule="evenodd"
         d="M29.7102 21.6941L28.2969 23.1736L23.9563 18.6295V31.522H21.9374V18.6295L17.5968 23.1736L16.1836 21.6941L22.9469 14.6138L29.7102 21.6941Z"

diff --git a/src/navigation/tabs/contacts/components/ContactIcon.tsx b/src/navigation/tabs/contacts/components/ContactIcon.tsx
@@ -14,19 +14,24 @@ import {
   getBadgeImg,
   getCurrencyAbbreviation,
 } from '../../../../utils/helper-methods';
+import ENSDomainIcon from '../../../../components/avatar/ENSDomainIcon';
+import UnstoppableDomainIcon from '../../../../components/avatar/UnstoppableDomainIcon';
+import {DomainType} from '../../../../components/list/ContactRow';
 
 interface ContactIconProps {
   size?: number;
   name?: string;
   coin?: string;
   chain?: string;
   badge?: JSX.Element;
+  domainType?: DomainType;
 }
 
 interface BadgeProps {
   img: string | ((props?: any) => ReactElement);
   badgeImg: string | ((props?: any) => ReactElement);
   size?: number;
+  domainType?: DomainType;
 }
 
 const ContactIconContainer = styled.View`
@@ -39,10 +44,23 @@ const CoinBadgeContainer = styled.View`
   bottom: -1px;
 `;
 
-const CoinBadge: React.FC<BadgeProps> = ({size = 20, img, badgeImg}) => {
+const CoinBadge: React.FC<BadgeProps> = ({
+  size = 20,
+  img,
+  badgeImg,
+  domainType,
+}) => {
   return (
     <CoinBadgeContainer>
-      <CurrencyImage img={img} badgeUri={badgeImg} size={size} />
+      {domainType ? (
+        domainType === 'ens' ? (
+          <ENSDomainIcon size={size} />
+        ) : (
+          <UnstoppableDomainIcon size={size} />
+        )
+      ) : (
+        <CurrencyImage img={img} badgeUri={badgeImg} size={size} />
+      )}
     </CoinBadgeContainer>
   );
 };
@@ -53,6 +71,7 @@ const ContactIcon: React.FC<ContactIconProps> = ({
   size = 50,
   name,
   badge,
+  domainType,
 }) => {
   const tokenOptions = useAppSelector(({WALLET}: RootState) => {
     return {
@@ -72,12 +91,12 @@ const ContactIcon: React.FC<ContactIconProps> = ({
         tokenOptions[getCurrencyAbbreviation(coin, chain)]?.logoURI
       ? (tokenOptions[getCurrencyAbbreviation(coin, chain)].logoURI as string)
       : '');
-
   const coinBadge = img ? (
     <CoinBadge
       size={size / 2.5}
       img={img}
       badgeImg={getBadgeImg(coin, chain)}
+      domainType={domainType}
     />
   ) : null;