From 60af991dea1dfc29827e007e61925463c2444719 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 8 Dec 2023 10:39:21 +0100
Subject: [PATCH] Set the page header for dApp

---
 dapp/public/acre.svg                         |  4 ++--
 dapp/src/components/Header/ConnectWallet.tsx |  2 +-
 dapp/src/components/Header/index.tsx         | 12 ++++++++----
 dapp/src/static/icons/AcreLogo.tsx           | 13 +++++++++++++
 dapp/src/static/icons/index.ts               |  1 +
 5 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 dapp/src/static/icons/AcreLogo.tsx

diff --git a/dapp/public/acre.svg b/dapp/public/acre.svg
index 59e8dbf1c..557d8a50e 100644
--- a/dapp/public/acre.svg
+++ b/dapp/public/acre.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" rx="12" fill="black"/>
-<path d="M15.7333 14.5231L14.752 13.1692H9.248L8.26667 14.5231H11.3643V16H4V14.5231H6.49173L10.1781 9.47692H7.968V8H16.032V9.47692H13.8219L17.5083 14.5231H20V16H12.6443V14.5231H15.7419H15.7333ZM10.1781 11.881H13.8133L11.9957 9.39487L10.1781 11.881Z" fill="white"/>
+<circle cx="12" cy="12" r="12" fill="#F34900"/>
+<path d="M15.4926 14.1188L14.57 12.7961H9.39512L8.47246 14.1188H11.3848V15.5617H4.46094V14.1188H6.80367L10.2696 9.18897H8.19166V7.74609H15.7734V9.18897H13.6955L17.1614 14.1188H19.5042V15.5617H12.5883V14.1188H15.5007H15.4926ZM10.2696 11.5376H13.6874L11.9785 9.10881L10.2696 11.5376Z" fill="#F3E5C1"/>
 </svg>
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
index 8b35a010b..7baef9b6b 100644
--- a/dapp/src/components/Header/ConnectWallet.tsx
+++ b/dapp/src/components/Header/ConnectWallet.tsx
@@ -60,7 +60,7 @@ export default function ConnectWallet() {
 
   return (
     <HStack spacing={4}>
-      <HStack>
+      <HStack display={{ base: "none", md: "flex"}}>
         <Text>Balance</Text>
         <Text as="b">
           {!btcAccount || btcAccount?.balance.isZero()
diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx
index 838ed37b2..56e427097 100644
--- a/dapp/src/components/Header/index.tsx
+++ b/dapp/src/components/Header/index.tsx
@@ -1,11 +1,15 @@
 import React from "react"
-import { Flex } from "@chakra-ui/react"
+import { Box, Flex, Icon } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
+import { AcreLogo } from "../../static/icons"
 
 export default function Header() {
   return (
-    <Flex justifyContent="end" p={6}>
-      <ConnectWallet />
-    </Flex>
+    <Box as="header">
+      <Icon as={AcreLogo} boxSize={20} position="absolute" left={6} />
+      <Flex justifyContent="end" p={6}>
+        <ConnectWallet />
+      </Flex>
+    </Box>
   )
 }
diff --git a/dapp/src/static/icons/AcreLogo.tsx b/dapp/src/static/icons/AcreLogo.tsx
new file mode 100644
index 000000000..94059f58a
--- /dev/null
+++ b/dapp/src/static/icons/AcreLogo.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const AcreLogo = createIcon({
+  displayName: "AcreLogo",
+  viewBox: "0 0 120 71",
+  path: (
+    <path
+      d="M74.474 34.348H67.257V31.4056H74.5672C75.8322 31.4056 77.3102 31.4056 77.3102 32.8905C77.3102 34.3753 75.739 34.348 74.474 34.348ZM120 18.7097V51.3486C120 53.569 118.549 55.5034 116.445 56.0755L63.7284 70.5015C61.2916 71.169 58.7217 71.169 56.2716 70.5015L3.55526 56.0755C1.46471 55.5034 0 53.5554 0 51.3486V18.7097C0 16.462 1.49134 14.5004 3.62184 13.9555L56.498 0.442247C58.7883 -0.14351 61.1984 -0.14351 63.4887 0.442247L116.365 13.9555C118.495 14.5004 119.987 16.462 119.987 18.7097H120ZM39.3475 39.6062H35.5393L29.9068 31.4056H33.2889V29.0081H20.972V31.4056H24.3542L18.7217 39.6062H14.9134V42.0037H26.1651V39.6062H21.4381L22.9427 37.3994H31.3582L32.8629 39.6062H28.1358V42.0037H39.3875V39.6062H39.3475ZM59.1744 36.8H56.8309C56.245 38.1623 54.8202 39.9059 49.494 39.9059C44.1678 39.9059 41.8642 38.1078 41.8642 35.5059C41.8642 32.9041 44.2077 31.1059 49.2943 31.1059C54.3808 31.1059 56.2317 32.6044 57.0439 34.3072H59.0945V29.0081H56.9241V30.7109H56.8708C55.3662 29.5121 53.7017 28.5041 48.7217 28.5041C42.2636 28.5041 39.1345 31.4056 39.1345 35.5059C39.1345 39.6062 42.0639 42.5078 49.3076 42.5078C56.5513 42.5078 58.8948 39.6062 59.1877 36.8H59.1744ZM83.755 37.3994H81.5979C81.3981 38.7072 80.6791 39.7016 79.2543 39.7016C77.6831 39.7016 77.0972 39.1431 75.6724 36.9635L75.3529 36.4867C76.6977 36.3914 77.5766 36.2007 78.4687 35.683C79.3475 35.1654 79.9334 34.1982 79.9334 32.8087C79.9334 31.3103 79.3608 30.4112 78.5087 29.8936C77.5899 29.335 76.5113 29.0081 73.7816 29.0081H60.2929V31.4056H64.7936V39.6062H60.2929V42.0037H72.024V39.6062H67.257V36.5412H69.8136C72.4501 36.5412 72.6365 36.8273 73.9148 38.8025L74.3009 39.4019C75.5925 41.3771 76.6445 42.3988 79.3475 42.3988C82.0506 42.3988 83.6485 40.5598 83.7417 37.3994H83.755ZM105.087 28.9945H84.4474V31.392H88.5486V39.5926H84.4474V41.9901H105.087V36.6911H102.863V39.5926H91.0253V36.5548H96.1118V37.8898H98.2423V33.0948H96.1118V34.4298H91.0253V31.392H102.863V34.2935H105.087V28.9945ZM24.3276 35.3016H29.8802L27.0972 31.2558L24.3142 35.3016H24.3276Z"
+      fill="#F34900"
+    />
+  ),
+})
diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts
index 66c6e3aa9..c625a102e 100644
--- a/dapp/src/static/icons/index.ts
+++ b/dapp/src/static/icons/index.ts
@@ -2,3 +2,4 @@ export * from "./Info"
 export * from "./Bitcoin"
 export * from "./Ethereum"
 export * from "./ChevronRight"
+export * from "./AcreLogo"