Merge pull request #1 from gawainb/g2-updates

Image updated

package.json

@@ -26,7 +26,7 @@
     "@loomhq/loom-embed": "^1.2.7",
     "@loomhq/loom-sdk": "^2.21.2",
     "@textile/hub": "^6.1.2",
-    "@usedapp/core": "^0.4.4",
+    "@usedapp/core": "^0.11.0",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/network-connector": "^6.1.9",

src/components/BrandHero.tsx

@@ -4,6 +4,10 @@ import Image from "next/image";
 
 const imgSrc = 'brands.jpg'
 
+const myLoader = ({ src, width, quality }) => {
+  return `https://res.cloudinary.com/${src}?w=${width}&q=${quality || 75}`
+}
+
 const BrandHero = () => {
   const bg = useColorModeValue("white", "gray.800");
   return (
@@ -131,12 +135,11 @@ const BrandHero = () => {
         w={{ lg: "50%" }}
       >
         <Image
-          src={imgSrc}
+          loader={myLoader}
+          src="dyangxc7h/image/upload/v1623552689/creative/brands.jpg"
           alt="Time Square Brands"
-          loading="eager"
-          layout="responsive"
-          width={"100%"}
-          height={"100%"}
+          width={1000}
+          height={720}
 
         />
       </Box>

src/components/Hero.tsx

@@ -1,11 +1,15 @@
 import { Box, Flex, chakra, Heading, Stack, Button } from '@chakra-ui/react'
 export default function Hero() {
 
+  const myLoader = ({ src, width, quality }) => {
+    return `https://res.cloudinary.com/${src}?w=${width}&q=${quality || 75}`
+  }
+
     return(
         <Box
         w="full"
         h="container.sm"
-        backgroundImage="url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"
+        backgroundImage="url(https://res.cloudinary.com/dyangxc7h/image/upload/v1623552689/creative/brands.jpg)"
         bgPos="center"
         bgSize="cover"
       >

src/components/common/Navbar/SignIn.tsx

@@ -32,6 +32,10 @@ import SignUp from './SignUp';
 
 const imgSrc = 'Creative_logo.png'
 
+const myLoader = ({ src, width, quality }) => {
+  return `https://res.cloudinary.com/${src}?w=${width}&q=${quality || 75}`
+}
+
 type WindowInstanceWithEthereum = Window & typeof globalThis & { ethereum?: providers.ExternalProvider };
 class StrongType<Definition, Type> {
   // @ts-ignore
@@ -199,7 +203,8 @@ const SignIn = (props) => {
             <Flex alignItems="center" pt="2%" justifyContent="space-between">
               <Stack spacing={1}>
               <Image
-                src={imgSrc}
+                loader={myLoader}
+                src="dyangxc7h/image/upload/v1623552244/creative/Creative_logo.png"
                 alt="Creative Logo"
                 width={100}
                 height={100}

src/components/common/Navbar/header.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from "react";
 import { useRouter } from 'next/router';
-import { useEthers, shortenAddress, useNotifications, useLookupAddress, getChainName } from '@usedapp/core';
+import { useEthers, shortenAddress, useNotifications, useLookupAddress, getChainName, ChainId } from '@usedapp/core';
 import ConnectWallet from "../Navbar/ConnectWallet";
 import {
   Alert,
@@ -82,7 +82,7 @@ const Header = ({ children }: HeaderProps): JSX.Element => {
   const { account, deactivate, chainId} = useEthers()
   const { notifications } = useNotifications()
   const ens = useLookupAddress()
-  const chainName = getChainName(chainId);
+  const chainName = ChainId;
 
   const { toggleColorMode: toggleMode } = useColorMode();
   const text = useColorModeValue("dark", "light");