Merge branch 'main' of https://github.com/casper-ecosystem/code-of-cr…

…eation-nft-claim-app Merge client and server side work
casper-ecosystem · May 20, 2024 · 4150592 · 4150592
2 parents 86f503c + d654ae3
commit 4150592
Show file tree

Hide file tree

Showing 19 changed files with 185 additions and 9 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,7 +11,8 @@
     "casper-js-sdk": "^2.15.5",
     "express": "^4.19.2",
     "greenlock-express": "^4.0.3",
-    "prismjs": "^1.29.0"
+    "prismjs": "^1.29.0",
+    "react-device-detect": "^2.2.3"
   },
   "scripts": {
     "start": "react-app-rewired start",

diff --git a/client/public/favicon/android-chrome-192x192.png b/client/public/favicon/android-chrome-192x192.png
diff --git a/client/public/favicon/android-chrome-512x512.png b/client/public/favicon/android-chrome-512x512.png
diff --git a/client/public/favicon/apple-touch-icon.png b/client/public/favicon/apple-touch-icon.png
diff --git a/client/public/favicon/browserconfig.xml b/client/public/favicon/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicon/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/client/public/favicon/favicon-16x16.png b/client/public/favicon/favicon-16x16.png
diff --git a/client/public/favicon/favicon-32x32.png b/client/public/favicon/favicon-32x32.png
diff --git a/client/public/favicon/favicon.ico b/client/public/favicon/favicon.ico
diff --git a/client/public/favicon/mstile-144x144.png b/client/public/favicon/mstile-144x144.png
diff --git a/client/public/favicon/mstile-150x150.png b/client/public/favicon/mstile-150x150.png
diff --git a/client/public/favicon/mstile-310x150.png b/client/public/favicon/mstile-310x150.png
diff --git a/client/public/favicon/mstile-310x310.png b/client/public/favicon/mstile-310x310.png
diff --git a/client/public/favicon/mstile-70x70.png b/client/public/favicon/mstile-70x70.png
diff --git a/client/public/favicon/safari-pinned-tab.svg b/client/public/favicon/safari-pinned-tab.svg
diff --git a/client/public/favicon/site.webmanifest b/client/public/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,15 +2,22 @@
 <html lang="en">
 <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <base href="%PUBLIC_URL%/"> <!-- Note the slash at the end -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
             name="description"
-            content="Web site created using CSPR.click create-react-app template"
+            content="Code of Creation - Casper x Dario De Siena Limited NFT Release"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
+    <link rel="manifest" href="%PUBLIC_URL%/favicon/site.webmanifest">
+    <link rel="mask-icon" href="%PUBLIC_URL%/favicon/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon/favicon.ico">
+    <meta name="msapplication-TileColor" content="#2d89ef">
+    <meta name="msapplication-config" content="%PUBLIC_URL%/favicon/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -25,7 +32,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>CSPR.click app</title>
+    <title>Code of Creation</title>
     <link rel="stylesheet" href="%PUBLIC_URL%/fonts/inter/inter.css" />
     <link rel="stylesheet" href="%PUBLIC_URL%/fonts/jetbrains-mono/jetbrains-mono.css" />
     <link rel="stylesheet" href="%PUBLIC_URL%/prism.css" />

diff --git a/client/src/components/Instructions.tsx b/client/src/components/Instructions.tsx
@@ -3,6 +3,7 @@ import { useClickRef } from '@make-software/csprclick-ui';
 import { Dispatch, SetStateAction, useContext } from 'react';
 import { ActiveAccountContext, StyledContentContainer } from '../App';
 import { claim } from '../apiClient';
+import { isMobile } from 'react-device-detect';
 
 const StyledStepContainer = styled.div(({ theme }) =>
 	theme.withMedia({
@@ -42,7 +43,15 @@ export default function Instructions(props: InstructionsProps) {
 	}
 
 	async function connectWallet() {
-		console.log(await clickRef?.signIn());
+		if (!(await clickRef?.isProviderPresent('casper-wallet'))) {
+			if (isMobile || 'ontouchstart' in document.documentElement) {
+				window.location.href = 'casperwallet://download?browse=casper.dariodesiena.com&click=connect';
+			} else {
+				await clickRef?.signIn();
+			}
+		} else {
+			await clickRef?.connect('casper-wallet');
+		}
 	}
 
 	function openCasperWalletInstall() {

diff --git a/client/src/components/Welcome.tsx b/client/src/components/Welcome.tsx
@@ -8,7 +8,8 @@ const Container = styled.div(({ theme }) =>
 		backgroundImage: `url("${background}")`,
 		backgroundRepeat: 'no-repeat',
 		backgroundSize: 'cover',
-		backgroundPosition: ['top 50% center', 'top 80% center', 'center', 'top 35% center'],
+		//backgroundPosition: ['top 50% center', 'top 80% center', 'center', 'top 35% center'],
+		backgroundPosition: ['top 50% center', 'top 80% center', 'bottom 30% center'],
 		position: 'absolute',
 		top: 40,
 		left: 0,
@@ -26,6 +27,10 @@ const HeadingContainer = styled.div(({ theme }) =>
 		h2: {
 			color: 'white',
 		},
+		position: 'absolute',
+		bottom: [80, 50],
+		left: '50%',
+		transform: 'translateX(-50%)',
 	})
 );
 
@@ -44,7 +49,7 @@ export const Welcome = () => {
 		<Container>
 			<StyledLogo src={logo} />
 			<HeadingContainer>
-				<h2>A Collaboration between Dario De Siena & Casper.Network</h2>
+				<h2>A Collaboration between Dario De Siena & Casper Network</h2>
 			</HeadingContainer>
 		</Container>
 	);