Add SovrynLogo component (#75)

* Add SovrynLogo component

* Fix review comments

* Create big-nails-perform.md

Author: tiltom

.changeset/big-nails-perform.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-826: Add SovrynLogo component

apps/frontend/src/app/2_molecules/SovrynLogo/SovrynLogo.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+
+import { applyDataAttr, LinkBase } from '@sovryn/ui';
+
+import sovrynLogo from '../../../assets/images/sovryn-logo.svg';
+
+type SovrynLogoProps = {
+  image?: string;
+  text?: string;
+  link?: string;
+  dataAttribute?: string;
+  className?: string;
+};
+
+export const SovrynLogo: React.FC<SovrynLogoProps> = ({
+  image = sovrynLogo,
+  text,
+  link,
+  dataAttribute,
+  className,
+}) => {
+  const Logo = useMemo(
+    () => (
+      <img
+        src={image}
+        className={className}
+        alt={text}
+        title={text}
+        {...applyDataAttr(dataAttribute)}
+      />
+    ),
+    [className, dataAttribute, image, text],
+  );
+
+  return (
+    <>
+      {link ? (
+        <LinkBase href={link} openNewTab={false}>
+          {Logo}
+        </LinkBase>
+      ) : (
+        { Logo }
+      )}
+    </>
+  );
+};

apps/frontend/src/app/3_organisms/Header/Header.tsx

@@ -10,6 +10,7 @@ import {
 } from '@sovryn/ui';
 
 import { ConnectWalletButton } from '../../2_molecules';
+import { SovrynLogo } from '../../2_molecules/SovrynLogo/SovrynLogo';
 import { useWalletConnect } from '../../../hooks';
 
 export const Header: FC = () => {
@@ -18,7 +19,7 @@ export const Header: FC = () => {
 
   return (
     <UIHeader
-      logo={<div>Sovryn</div>}
+      logo={<SovrynLogo dataAttribute="logo" text="Sovryn" link="/" />}
       menuItems={
         <>
           <NavMenuItem className="mr-2" isActive children="Zero" />