Added Footer + UI/UX micro improvements

input-output-hk · Oct 31, 2023 · 155b4df · 155b4df
1 parent 8d13bb4
commit 155b4df
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 55 deletions.
diff --git a/nix/gen/npm-deps-hash.nix b/nix/gen/npm-deps-hash.nix
@@ -1,3 +1,2 @@
 # This file was generated by prefetch-npm-deps
 "sha256-8S+wA3TI/hVVtr8KmsfE+KPyjZVJGVah2C18UfOspms="
-
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -5,8 +5,8 @@ import Landing from './Landing';
 
 import ToastMessage from './ToastMessage';
 import About from './vesting/About';
-import YourTokenPlans from './vesting/YourPlans';
-import CreatePlans from './vesting/CreatedPlans';
+import YourTokenPlans from './vesting/Claimer';
+import CreatePlans from './vesting/Provider';
 
 type AppProps = {
   runtimeURL: string;
@@ -31,9 +31,9 @@ const App: React.FC<AppProps> = ({runtimeURL,marloweScanURL,dAppId}) => {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={hasSelectedAWalletExtension ? <Navigate to="/created-plans" /> : <Landing setAndShowToast={setAndShowToast} />} />
-        <Route path="/your-plans" element={hasSelectedAWalletExtension ? <YourTokenPlans runtimeURL={runtimeURL} marloweScanURL={marloweScanURL} dAppId={dAppId} setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
-        <Route path="/created-plans" element={hasSelectedAWalletExtension ? <CreatePlans runtimeURL={runtimeURL} marloweScanURL={marloweScanURL} dAppId={dAppId} setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
+        <Route path="/" element={hasSelectedAWalletExtension ? <Navigate to="/provider" /> : <Landing setAndShowToast={setAndShowToast} />} />
+        <Route path="/claimer" element={hasSelectedAWalletExtension ? <YourTokenPlans runtimeURL={runtimeURL} marloweScanURL={marloweScanURL} dAppId={dAppId} setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
+        <Route path="/provider" element={hasSelectedAWalletExtension ? <CreatePlans runtimeURL={runtimeURL} marloweScanURL={marloweScanURL} dAppId={dAppId} setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
         <Route path="/about" element={hasSelectedAWalletExtension ? <About setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
       </Routes>
     <div className="toast-container position-fixed bottom-0 end-0 p-3">

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,48 @@
+import React, {  } from 'react';
+
+type FooterProps = {
+
+  };
+
+
+export const Footer : React.FC<FooterProps>  = () => {
+  return ( <footer className="footerOuter_Bns0">
+  <div className="footerIconWrapper_RjRe">
+    <div className="socialIcon_vKBL">
+      <a href="https://github.com/input-output-hk/marlowe-cardano" target="_blank" rel="noopener noreferrer">
+        <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 0a12.19 12.19 0 0 0-4.592.897 12.017 12.017 0 0 0-3.893 2.555A11.68 11.68 0 0 0 0 11.786c0 5.209 3.444 9.628 8.208 11.196.6.094.792-.271.792-.59v-1.991c-3.324.707-4.032-1.58-4.032-1.58-.552-1.367-1.332-1.732-1.332-1.732-1.092-.73.084-.707.084-.707 1.2.082 1.836 1.214 1.836 1.214 1.044 1.791 2.808 1.26 3.492.978.108-.766.42-1.285.756-1.58-2.664-.294-5.46-1.307-5.46-5.798 0-1.308.456-2.357 1.236-3.194-.12-.294-.54-1.52.12-3.111 0 0 1.008-.318 3.3 1.202a11.5 11.5 0 0 1 3-.389c1.02 0 2.052.13 3 .39 2.292-1.521 3.3-1.203 3.3-1.203.66 1.591.24 2.817.12 3.111.78.837 1.236 1.886 1.236 3.194 0 4.502-2.808 5.492-5.484 5.787.432.365.828 1.084.828 2.18v3.23c0 .318.192.695.804.589C20.568 21.402 24 16.995 24 11.786c0-1.548-.31-3.08-.913-4.51a11.775 11.775 0 0 0-2.602-3.824A12.017 12.017 0 0 0 16.592.897 12.19 12.19 0 0 0 12 0Z" fill="#74818A"></path>
+        </svg></a></div>
+    <div className="socialIcon_vKBL"><a href="https://discord.gg/inputoutput" target="_blank" rel="noopener noreferrer">
+      <svg width="24" height="28" viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="m24 27.6-6.3-6 .756 2.4H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h18a3 3 0 0 1 3 3v24.6ZM12 6.96c-3.216 0-5.472 1.38-5.472 1.38C7.764 7.236 9.924 6.6 9.924 6.6l-.204-.204c-2.028.036-3.864 1.44-3.864 1.44-2.064 4.308-1.932 8.028-1.932 8.028C5.604 18.036 8.1 17.88 8.1 17.88l.852-1.08c-1.5-.324-2.448-1.656-2.448-1.656S8.76 16.68 12 16.68c3.24 0 5.496-1.536 5.496-1.536s-.948 1.332-2.448 1.656l.852 1.08s2.496.156 4.176-2.016c0 0 .132-3.72-1.932-8.028 0 0-1.836-1.404-3.864-1.44l-.204.204s2.16.636 3.396 1.74c0 0-2.256-1.38-5.472-1.38Zm-2.484 4.548c.78 0 1.416.684 1.404 1.524 0 .828-.624 1.524-1.404 1.524-.768 0-1.392-.696-1.392-1.524 0-.84.612-1.524 1.392-1.524Zm5.004 0c.78 0 1.404.684 1.404 1.524 0 .828-.624 1.524-1.404 1.524-.768 0-1.392-.696-1.392-1.524 0-.84.612-1.524 1.392-1.524Z" fill="#717780"></path></svg></a></div>
+    <div className="socialIcon_vKBL"><a href="https://twitter.com/marlowe_io" target="_blank" rel="noopener noreferrer">
+      <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M24 2.294a9.83 9.83 0 0 1-2.822.792 4.931 4.931 0 0 0 2.157-2.73 9.913 9.913 0 0 1-3.12 1.204C19.307.574 18.034 0 16.588 0c-2.696 0-4.899 2.203-4.899 4.922 0 .39.046.768.126 1.124A13.99 13.99 0 0 1 1.675.906a4.87 4.87 0 0 0-.665 2.467c0 1.71.86 3.224 2.19 4.084-.814 0-1.57-.23-2.236-.574v.035a4.925 4.925 0 0 0 3.946 4.83 4.843 4.843 0 0 1-2.214.08c.62 1.939 2.42 3.384 4.589 3.419a9.777 9.777 0 0 1-6.115 2.11c-.39 0-.78-.022-1.17-.068a13.933 13.933 0 0 0 7.549 2.214c9.04 0 14.007-7.503 14.007-14.008 0-.218 0-.424-.011-.642A9.833 9.833 0 0 0 24 2.294Z" fill="#74818A"></path></svg></a></div>
+    <div className="socialIcon_vKBL"><a href="https://www.youtube.com/@IohkIo" target="_blank" rel="noopener noreferrer"><svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="m11.2 14 7.266-4.2L11.2 5.6V14ZM27.384 3.038c.182.658.308 1.54.392 2.66.098 1.12.14 2.086.14 2.926L28 9.8c0 3.066-.224 5.32-.616 6.762-.35 1.26-1.162 2.072-2.422 2.422-.658.182-1.862.308-3.71.392a93.31 93.31 0 0 1-5.026.14L14 19.6c-5.866 0-9.52-.224-10.962-.616-1.26-.35-2.072-1.162-2.422-2.422-.182-.658-.308-1.54-.392-2.66a33.685 33.685 0 0 1-.14-2.926L0 9.8c0-3.066.224-5.32.616-6.762C.966 1.778 1.778.966 3.038.616 3.696.434 4.9.308 6.748.224a93.31 93.31 0 0 1 5.026-.14L14 0c5.866 0 9.52.224 10.962.616 1.26.35 2.072 1.162 2.422 2.422Z" fill="#74818A"></path></svg></a></div></div>
+  <div className="inner_JkEn">
+    <div className="linksAndLogoContainer_qfPF">
+      <img src="/images/marlowe-logo-primary.svg" className="footerLogo_Z1bf" data-light="true" alt="Logo" />
+      <div className="footerColumn_khfb">
+        <div className="links_tfqT">
+          <div className="linksList_iXQi">
+            <h2 className="linksHeading_xaI4">Resources</h2>
+            <div className="linkItem_uyV6">
+              <a href="https://iohk.io/" target="_blank" rel="noopener noreferrer">Input Output Global</a></div>
+            <div className="linkItem_uyV6"><a href="https://cardano.org/" target="_blank" rel="noopener noreferrer">Cardano.org</a></div>
+            <div className="linkItem_uyV6"><a href="https://www.essentialcardano.io/" target="_blank" rel="noopener noreferrer">Essential Cardano</a></div>
+            <div className="linkItem_uyV6"><a href="https://www.youtube.com/channel/UCX9j__vYOJu00iqBrCzecVw" target="_blank" rel="noopener noreferrer">IOG Academy</a></div></div>
+          <div className="linksList_iXQi"><h2 className="linksHeading_xaI4">Support</h2>
+            <div className="linkItem_uyV6"><a href="https://iohk.zendesk.com/hc/en-us/requests/new" target="_blank" rel="noopener noreferrer">IOG tech support</a></div></div>
+          <div className="linksList_iXQi"><h2 className="linksHeading_xaI4">Legal</h2>
+            <div className="linkItem_uyV6"><a href="https://docs.google.com/document/d/13zJ5jdaKjXgAytvDn0kln8UFDhyFr3AS/view" target="_blank" rel="noopener noreferrer">Cookie Policy</a></div>
+            <div className="linkItem_uyV6"><a href="https://static.iohk.io/terms/iog-privacy-policy.pdf" target="_blank" rel="noopener noreferrer">Privacy Policy</a></div>
+            <div className="linkItem_uyV6"><a href="https://plutus-static.s3.eu-central-1.amazonaws.com/IOHK+Website+Terms+%26+Conditions+(Final).pdf" target="_blank" rel="noopener noreferrer" className="linkItem_uyV6">Terms of Use</a></div></div></div>
+        <p className="copyright_uPsJ">© 2023 Input Output Global, Inc. All Rights Reserved.</p>
+        </div></div></div>
+</footer>)
+
+  }
+
+
diff --git a/src/components/vesting/About.tsx b/src/components/vesting/About.tsx
@@ -8,12 +8,13 @@ import { BrowserRuntimeLifecycleOptions, mkRuntimeLifecycle } from "@marlowe.io/
 import { Vesting } from "@marlowe.io/language-examples";
 import { mkRestClient } from "@marlowe.io/runtime-rest-client";
 import { AddressBech32, ContractId, Tags, unAddressBech32 } from '@marlowe.io/runtime-core';
-import { SupportedWallet } from '@marlowe.io/wallet/browser';
 import { RuntimeLifecycle } from '@marlowe.io/runtime-lifecycle/api';
 import { ContractDetails } from '@marlowe.io/runtime-rest-client/contract/details';
 import HashLoader from 'react-spinners/HashLoader';
 import { Input } from '@marlowe.io/language-core-v1';
 import { ConnectionWallet } from '../Connection';
+import { SupportedWalletName } from '@marlowe.io/wallet/browser';
+import { Footer } from '../Footer';
 
 const runtimeURL = `${process.env.MARLOWE_RUNTIME_WEB_URL}`;
 
@@ -58,7 +59,7 @@ const About: React.FC<AboutProps> = ({setAndShowToast}) => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const runtimeLifecycleParameters : BrowserRuntimeLifecycleOptions = { runtimeURL:runtimeURL, walletName:selectedAWalletExtension as SupportedWallet}
+        const runtimeLifecycleParameters : BrowserRuntimeLifecycleOptions = { runtimeURL:runtimeURL, walletName:selectedAWalletExtension as SupportedWalletName}
         const runtimeLifecycle = await mkRuntimeLifecycle(runtimeLifecycleParameters)
         await runtimeLifecycle.wallet.getChangeAddress()
           .then((changeAddress : AddressBech32) => setChangeAddress(unAddressBech32(changeAddress)))
@@ -84,20 +85,22 @@ const About: React.FC<AboutProps> = ({setAndShowToast}) => {
   return (
     <div className="container">
       <div className="header">
-        <img src="/images/marlowe-logo-primary.svg" alt="Logo" />
-        <h1 style={{margin:0}}>Token Plan Prototype</h1>
+      <div style={{width:"700px"}} className="d-flex justify-content-start align-items-baseline" >
+          <span ><h1 style={{margin:0}}>Token Plan Prototype</h1> </span>
+          <span ><h3 style={{margin:0,paddingLeft:"10px"}}>/ About</h3> </span>
+        </div>
         <ConnectionWallet runtimeURL={runtimeURL} setAndShowToast={setAndShowToast} /> 
       </div>
-      <div><button className="btn btn-link"  onClick={() => navigate("/created-plans")}>Created Token Plans</button> 
-          | <button className="btn btn-link" onClick={() => navigate("/your-plans")}>Your Token Plans</button> 
-          | <button className="btn btn-link" disabled={true} onClick={() => navigate("/about")}>About</button> 
+      <div> <button className="btn btn-link" disabled={true} onClick={() => navigate("/about")}>About</button> 
+          | <button className="btn btn-link"  onClick={() => navigate("/provider")}>Token Provider's View</button> 
+          | <button className="btn btn-link" onClick={() => navigate("/claimer")}>Claimer's View</button> 
           <hr></hr>
         </div>  
       <div className="my-5">
-        Prototype Description to be done.
+        This prototype  
       </div>
+      <Footer />
     </div>
-
   );
 };
 

diff --git a/src/components/vesting/YourPlans.tsx → src/components/vesting/Claimer.tsx b/src/components/vesting/YourPlans.tsx → src/components/vesting/Claimer.tsx
@@ -15,6 +15,7 @@ import { Input } from '@marlowe.io/language-core-v1';
 import { Contract } from './Models';
 import { contractIdLink, displayCloseCondition } from './Utils';
 import { ConnectionWallet } from '../Connection';
+import { Footer } from '../Footer';
 
 
 type YourTokenPlansProps = {
@@ -42,9 +43,6 @@ const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,marloweScanUR
 
   const [isWaitingConfirmation, setWaitingConfirmation] = useState(false);
 
-  const truncatedAddress = changeAddress.slice(0,18);
-
-
   useEffect(() => {
     const fetchData = async () => {
       if(isFetching) return;
@@ -163,42 +161,19 @@ const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,marloweScanUR
       );
     }
   }
-
-
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(changeAddress);
-      setAndShowToast(
-        'Address copied to clipboard',
-        <span>Copied <span className="font-weight-bold">{changeAddress}</span> to clipboard</span>,
-        false
-      );
-    } catch (err) {
-      console.error('Failed to copy address: ', err);
-    }
-  };
-
-  const disconnectWallet = () => {
-    localStorage.removeItem('walletProvider');
-    setChangeAddress('');
-    setAndShowToast(
-      'Disconnected wallet',
-      <span className='text-color-white'>Please, Connect a wallet to see your Token Plans.</span>,
-      false
-    );
-    navigate('/');
-  }
 
   return (
     <div className="container">
       <div className="header">
-        <img src="/images/marlowe-logo-primary.svg" alt="Logo" />
-        <h1 style={{margin:0}}>Token Plan Prototype</h1>
+        <div style={{width:"700px"}} className="d-flex justify-content-start align-items-baseline" >
+          <span ><h1 style={{margin:0}}>Token Plan Prototype</h1> </span>
+          <span ><h3 style={{margin:0,paddingLeft:"10px"}}>/ Claimer's View</h3> </span>
+        </div>
         <ConnectionWallet runtimeURL={runtimeURL} setAndShowToast={setAndShowToast} /> 
       </div>
-      <div><button className="btn btn-link"  disabled={isWaitingConfirmation} onClick={() => navigate("/created-plans")}>Token Provider's View</button> 
-          | <button className="btn btn-link" disabled={true} onClick={() => navigate("/your-plans")}>Claimer's View</button> 
-          | <button className="btn btn-link" disabled={isWaitingConfirmation} onClick={() => navigate("/about")}>About</button> 
+       <div> <button className="btn btn-link" disabled={isWaitingConfirmation} onClick={() => navigate("/about")}>About</button> 
+          |  <button className="btn btn-link"  disabled={isWaitingConfirmation} onClick={() => navigate("/provider")}>Token Provider's View</button> 
+          |  <button className="btn btn-link" disabled={true} onClick={() => navigate("/claimer")}>Claimer's View</button> 
           <hr></hr>
         </div>  
       <div className="my-5">
@@ -312,6 +287,7 @@ const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,marloweScanUR
           </tbody>
         </table> )}
       </div>
+      <Footer /> 
     </div>
 
   );

diff --git a/src/components/vesting/CreatedPlans.tsx → src/components/vesting/Provider.tsx b/src/components/vesting/CreatedPlans.tsx → src/components/vesting/Provider.tsx
@@ -17,6 +17,7 @@ import { Address, Input } from '@marlowe.io/language-core-v1';
 import { Contract } from './Models';
 import { contractIdLink, displayCloseCondition } from './Utils';
 import { ConnectionWallet } from '../Connection';
+import { Footer } from '../Footer';
 
 type CreatePlansProps = {
   runtimeURL : string,
@@ -235,13 +236,15 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,marloweScanURL,dApp
   return (
     <div className="container">
       <div className="header">
-        <img src="/images/marlowe-logo-primary.svg" alt="Logo" />
-        <h1 style={{margin:0}}>Token Plan Prototype</h1>
+      <div style={{width:"700px"}} className="d-flex justify-content-start align-items-baseline" >
+          <span ><h1 style={{margin:0}}>Token Plan Prototype</h1> </span>
+          <span ><h3 style={{margin:0,paddingLeft:"10px"}}>/ Token Provider's View</h3> </span>
+        </div>
         <ConnectionWallet runtimeURL={runtimeURL} setAndShowToast={setAndShowToast} /> 
       </div>
-      <div><button className="btn btn-link" disabled={true} onClick={() => navigate("/created-plans")}>Token Provider's View</button> 
-          | <button className="btn btn-link"  disabled={isWaitingConfirmation} onClick={() => navigate("/your-plans")}>Claimer's View</button> 
-          | <button className="btn btn-link" disabled={isWaitingConfirmation} onClick={() => navigate("/about")}>About</button> 
+         <div> <button className="btn btn-link" disabled={isWaitingConfirmation} onClick={() => navigate("/about")}>About</button> 
+          |  <button className="btn btn-link" disabled={true} onClick={() => navigate("/provider")}>Token Provider's View</button> 
+          | <button className="btn btn-link"  disabled={isWaitingConfirmation} onClick={() => navigate("/claimer")}>Claimer's View</button> 
           <hr></hr>
         </div>
         <div className='d-flex justify-content-start' style={{width:"200px"}}>
@@ -432,8 +435,8 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,marloweScanURL,dApp
         closeModal={() => setShowNewVestingScheduleModal(false) } 
         changeAddress={changeAddress} />
 
+      <Footer />  
     </div>
-
   );
 };
 

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -3940,7 +3940,7 @@ html[data-theme=dark] .card_WrXe:hover,html[data-theme=dark] .card_ZNYu:hover {
   background-position: bottom;
   background-repeat: no-repeat;
   padding-bottom: 6.25rem;
-  padding-top: 6.25rem
+  padding-top: 1.25rem
 }
 
 .footerLogo_Z1bf {