Rebranded the entire application UI

site/.env

@@ -1,3 +1,4 @@
-# NEXT_PUBLIC_CHAIN_ID=743111 # Change this in the patch file
-NEXT_PUBLIC_DEFAULT_COLLECTION_ID=0
-NEXT_PUBLIC_NODE_URL=http://localhost:8545
+# NEXT_PUBLIC_ANALYTICS_ID=
+NEXT_PUBLIC_CHAIN_ID=743111
+NEXT_PUBLIC_NODE_URL=https://testnet.rpc.hemi.network/rpc
+BASE_NODE_URL=https://testnet.rpc.hemi.network/rpc

site/components/Button.js

@@ -15,8 +15,8 @@ const Button = function ({
     : 'capitalize'
   const textStyle = `text-center text-base text-white ${textCase}`
   const stateStyle = disabled
-    ? 'bg-gray-200 cursor-not-allowed'
-    : 'bg-black hover:bg-gray-800'
+    ? 'bg-orange-300 cursor-not-allowed'
+    : 'bg-orange-950 hover:bg-orange-500'
   return (
     <button
       {...props}

site/components/ExplorerLink.js

@@ -30,7 +30,7 @@ export const ExplorerLink = function ({
   const hash = address ?? tx
   return (
     <a
-      className="m-auto hover:text-black text-gray-400 font-semibold focus:outline-none"
+      className="m-auto text-black hover:text-gray-400 font-semibold focus:outline-none"
       href={url}
       rel="noreferrer"
       target="_blank"

site/components/Input.js

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+
+import SvgContainer from './svg/SvgContainer'
 
 const commonInputStyles =
-  'text-base p-4 rounded-xl bg-gray-50 placeholder-gray-400 placeholder-capitalize'
+  'text-base px-4 py-3 rounded-xl bg-white placeholder-slate-400 border placeholder-capitalize'
 
 export const InputTitle = ({ children }) => (
-  <label className="block mb-2.5 text-sm">{children}</label>
+  <label className="text-md text-slate-500 block mb-2.5">{children}</label>
 )
 
 const SimpleInput = props => (
@@ -26,9 +28,28 @@ const SuffixedInput = ({ suffix, ...props }) => (
 
 const Caption = ({ caption, captionColor }) =>
   caption && (
-    <p className={`text-center text-sm mt-2 ${captionColor}`}>{caption}</p>
+    <div className="absolute flex gap-1 items-center">
+      <CaptionIcon captionColor={captionColor} />
+      <p className={` text-sm pr-4 ${captionColor}`}>{caption}</p>
+    </div>
   )
 
+const CaptionIcon = ({ captionColor }) => {
+  const [name, setName] = useState('')
+
+  useEffect(() => {
+    if (captionColor.includes('red')) {
+      setName('error')
+    }
+
+    if (captionColor.includes('green')) {
+      setName('check')
+    }
+  }, [])
+
+  return <SvgContainer className={`w-6 h-6`} name={name} />
+}
+
 const Input = ({
   className = '',
   title,
@@ -37,12 +58,11 @@ const Input = ({
   captionColor,
   ...props
 }) => (
-  <div className={`w-full mb-6 ${className}`}>
-    {title && <InputTitle>{title}</InputTitle>}
+  <div className={`w-full flex items-center justify-end mb-6 ${className}`}>
     {suffix ? (
-      <SuffixedInput suffix={suffix} {...props} />
+      <SuffixedInput suffix={suffix} {...props} placeholder={title} />
     ) : (
-      <SimpleInput {...props} />
+      <SimpleInput {...props} placeholder={title} />
     )}
     {caption && <Caption caption={caption} captionColor={captionColor} />}
   </div>

site/components/InputBalance.js

@@ -0,0 +1,56 @@
+import { useTranslations } from 'next-intl'
+
+import TokenContainer from './svg/TokenContainer'
+
+const Balance = ({ balance, showMax, setMax }) => {
+  const t = useTranslations()
+
+  return (
+    <div className="flex gap-1 items-center">
+      <span className="text-slate-500">{t('balance')}:</span>
+      <label className="text-black text-sm">{balance}</label>
+      {showMax && (
+        <label className="text-orange-950 ml-1 cursor-pointer" onClick={setMax}>
+          MAX
+        </label>
+      )}
+    </div>
+  )
+}
+
+const Token = ({ token }) => (
+  <div className="flex gap-2 items-center">
+    <TokenContainer name={token} />
+    <label className="text-black text-base">{token}</label>
+  </div>
+)
+
+const InputBalance = ({
+  className = '',
+  title,
+  token,
+  balance,
+  showMax,
+  setMax,
+  ...props
+}) => (
+  <div className={`w-full bg-slate-50 px-6 py-6 rounded-xl ${className}`}>
+    {title && (
+      <label className="text-md text-slate-500 block mb-2.5">{title}</label>
+    )}
+    <div className="flex items-center text-right">
+      <input
+        className="bg-slate-50 placeholder-black w-full text-black text-4xl focus:outline-none"
+        {...props}
+      />
+      <div className="flex flex-col gap-2 items-end">
+        {token && <Token token={token} />}
+        {balance && (
+          <Balance balance={balance} setMax={setMax} showMax={showMax} />
+        )}
+      </div>
+    </div>
+  </div>
+)
+
+export default InputBalance

site/components/Modal.js

@@ -14,15 +14,14 @@ const Modal = function ({ onRequestClose, children, ...props }) {
   )
 }
 
-const ModalContainer = function ({ modalIsOpen, ...props }) {
-  return modalIsOpen ? (
+const ModalContainer = ({ modalIsOpen, ...props }) =>
+  modalIsOpen ? (
     <>
       <div className="fixed z-50 inset-0 flex items-center justify-center outline-none focus:outline-none overflow-x-hidden overflow-y-auto">
         <Modal {...props} />
       </div>
       <div className="fixed z-40 inset-0 bg-black opacity-25"></div>
     </>
   ) : null
-}
 
 export default ModalContainer

site/components/Navbar.js

@@ -1,23 +1,30 @@
 import { Link } from '../navigation'
 
-import { HemiLogoFull, HemiSymbol } from './HemiLogo'
+import { HemiLogoFull } from './HemiLogo'
+import Breadcrumb from './layout/Breadcrumb'
+import SvgContainer from './svg/SvgContainer'
 import Wallet from './Wallet'
 
-const Navbar = ({ walletConnection }) => (
-  <div className="flex flex-wrap items-center w-full md:h-16 xl:px-0">
-    <div className="w-1/3 md:block">
-      <Link href="/">
-        <div className="w-8 h-8 md:hidden">
-          <HemiSymbol />
+const Navbar = ({ title, walletConnection, breadcrumb }) => (
+  <div className="flex flex-col">
+    <div className="flex items-center justify-between p-8">
+      <div className="flex gap-2 items-center">
+        <Link href="/">
+          <div className="w-20">
+            <HemiLogoFull />
+          </div>
+        </Link>
+        <div className="w-20">
+          <SvgContainer name="tools" />
         </div>
-        <div className="hidden w-28 h-10 md:block">
-          <HemiLogoFull />
+        <div className="hidden md:block">
+          {breadcrumb && <Breadcrumb title={title} />}
         </div>
-      </Link>
+      </div>
+      <div>{walletConnection && <Wallet />}</div>
     </div>
-    <div className="hidden w-1/3 md:block" />
-    <div className="flex justify-center mt-4 w-full md:justify-end md:mt-0 md:w-1/3">
-      {walletConnection && <Wallet />}
+    <div className="md:hidden">
+      {breadcrumb && <Breadcrumb title={title} />}
     </div>
   </div>
 )

site/components/TokenAmount.js

@@ -1,13 +1,11 @@
 import { fromUnit } from '../utils'
 
 // Shows a simple token amount like '0.00125 WETH' inside a `div`.
-const TokenAmount = function ({ amount, decimals = 18, symbol }) {
-  return (
-    <span className="tabular-nums">{`${fromUnit(
-      amount,
-      decimals
-    )} ${symbol}`}</span>
-  )
-}
+const TokenAmount = ({ amount, decimals = 18, symbol }) => (
+  <span className="tabular-nums">{`${fromUnit(
+    amount,
+    decimals
+  )} ${symbol}`}</span>
+)
 
 export default TokenAmount

site/components/UtilitiesTabs.js

@@ -1,66 +1,53 @@
 import { useWeb3React } from '@web3-react/core'
+import { usePathname } from 'next/navigation'
 import { useTranslations } from 'next-intl'
+import { useContext } from 'react'
 
-import { usePathname } from '../navigation'
+import { Link } from '../navigation'
 import utilsConfig from '../utils/utilsConfig.json'
 
-import Tabs from './Tabs'
+import PureContext from './context/Pure'
 
 function UtilitiesTabs() {
   const { chainId } = useWeb3React()
+  const { utilities } = useContext(PureContext)
   const t = useTranslations()
   const pathname = usePathname()
-  const items = [
-    {
-      href: '/merkle-claims',
-      label: t('merkle-claims'),
-      selected: pathname === '/merkle-claims'
-    },
-    {
-      href: '/token-approvals',
-      label: t('token-approvals'),
-      selected: pathname === '/token-approvals'
-    },
-    {
-      href: '/token-revokes',
-      label: t('token-revokes'),
-      selected: pathname === '/token-revokes'
-    },
-    // Payment Streams should go here.
-    {
-      href: '/wrap-eth',
-      label: t('wrap-unwrap'),
-      selected: pathname === '/wrap-eth'
-    },
-    {
-      href: '/sign-message',
-      label: t('sign-message'),
-      selected: pathname === '/sign-message'
-    }
-    // Descending Price Auctions should go here.
-  ]
+
   // Add optional components starting with the last open to keep the array
   // positions constant.
   //
   // Add Descending Price Auctions if Uniswap v2 is supported.
   if (chainId && utilsConfig[chainId]?.dpAuctions.uniswapV2) {
-    items.splice(5, 0, {
+    utilities.splice(5, 0, {
       href: '/dp-auctions',
-      label: t('dp-auctions'),
+      title: t('dp-auctions'),
       selected: pathname === '/dp-auctions'
     })
   }
   // Add Payment Streams if ChainLink is supported.
   if (chainId && utilsConfig[chainId]?.paymentStreams?.chainLink) {
-    items.splice(3, 0, {
+    utilities.splice(3, 0, {
       href: '/payment-streams',
-      label: t('payment-streams'),
+      title: t('payment-streams'),
       selected: pathname === '/payment-streams'
     })
   }
   return (
-    <div className="flex justify-center">
-      <Tabs items={items} />
+    <div className="flex flex-col gap-6 mt-8 justify-center
+      lg:flex-row lg:flex-wrap lg:py-8">
+      {utilities.map(({ title, text, href, onClick = () => null }) => (
+        <Link href={href} key={title} onClick={onClick}>
+          <div
+            className="flex flex-col w-full border rounded-xl justify-start gap-2 p-6
+            border-slate-300 hover:bg-slate-100
+            h-32 lg:w-96"
+            key={title}>
+            <h4 className="text-base text-black">{title}</h4>
+            <p className="text-sm text-slate-500">{text}</p>
+          </div>
+        </Link>
+      ))}
     </div>
   )
 }