From b63279a931b396bb0a27e26b1e804f3344ffb272 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 11:08:04 +0300
Subject: [PATCH] feat: add create avatar component to create local node page

---
 .../CreateLocalNodePage.tsx                   | 44 +++----------------
 1 file changed, 5 insertions(+), 39 deletions(-)

diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
index d007e3e5..79055cd8 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
+++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
@@ -1,17 +1,15 @@
 import { useState } from 'react'
-import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
-import { NodeIcon, ReactionIcon } from '@status-im/icons'
+import { Button as StatusButton, Text, Checkbox } from '@status-im/components'
+import { NodeIcon } from '@status-im/icons'
 import { Label, Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import Header from '../../components/General/Header'
 import Titles from '../../components/General/Titles'
-import LabelInputField from '../../components/General/LabelInputField'
-import ColorPicker from '../../components/General/ColorPicker/ColorPicker'
-import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
+// import LabelInputField from '../../components/General/LabelInputField'
+import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
 
 const CreateLocalNodePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
-  const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
 
   return (
     <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
@@ -22,39 +20,7 @@ const CreateLocalNodePage = () => {
             title="Create Local Node"
             subtitle="Configure your device to start Staking on Nimbus"
           />
-          <YStack my={16}>
-            <XStack space>
-              <LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
-            </XStack>
-            <XStack my={10} justifyContent={'space-between'}>
-              <YStack mr={30}>
-                <Text size={13} weight="regular" color={'#647084'}>
-                  Device Avatar
-                </Text>
-                <XStack my={10}>
-                  <Avatar type="account" size={80} name="Device Avatar" />
-                  <Avatar
-                    type="icon"
-                    size={32}
-                    icon={
-                      <ReactionIcon
-                        size={20}
-                        onClick={() => setIsEmojiDialogOpen(prev => !prev)}
-                        style={{ cursor: 'pointer' }}
-                      />
-                    }
-                  />
-                  {isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
-                </XStack>
-              </YStack>
-              <YStack>
-                <Text size={13} weight="regular" color={'#647084'}>
-                  Highlight Color
-                </Text>
-                <ColorPicker />
-              </YStack>
-            </XStack>
-          </YStack>
+          <CreateAvatar />
           <YStack my={16}>
             <Text size={19} weight="semibold">
               Settings