Updated logos, fixed loading etc

shamin · Sep 2, 2021 · 9a92f04 · 9a92f04
1 parent 116c9d3
commit 9a92f04
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 39 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Share Ride App</title>
   </head>

diff --git a/client/src/app/pages/auth/login.tsx b/client/src/app/pages/auth/login.tsx
@@ -20,7 +20,7 @@ export const Login = () => {
     <div className="container">
       <div className="login">
         <img alt="share ride logo" src={Logo} />
-        <h3>Welcome back to share ride</h3>
+        <h3>Welcome back to Share Ride</h3>
         <p>Ready to go somewhere? Connect your wallet to get started.</p>
         <Button isLoading={loading} onClick={login}>Connect with wallet</Button>
       </div>

diff --git a/client/src/app/pages/dashboard/loadingModal.tsx b/client/src/app/pages/dashboard/loadingModal.tsx
@@ -18,6 +18,8 @@ const LoadingModal: React.FC<LoadingModalProps> = ({
       confirmLabel="Custom Label"
       hasClose={false}
       hasFooter={false}
+      shouldCloseOnOverlayClick={false}
+      shouldCloseOnEscapePress={false}
     >
       <div className="loading-modal">
         <Spinner />

diff --git a/client/src/app/pages/home/home.tsx b/client/src/app/pages/home/home.tsx
@@ -3,14 +3,7 @@ import { Table, Button } from "evergreen-ui";
 import { useHistory } from "react-router-dom";
 import "./home.scss";
 import { useShareRide } from "../../web3/provider";
-
-type Ride = {
-  id: string,
-  from: string,
-  to: string,
-  date: string,
-  driver: string,
-}
+import { Ride } from "../../web3/provider/state";
 
 const formatDate = (d: Date) => {
   let dd: string | number = d.getDate();
@@ -26,6 +19,10 @@ const formatDate = (d: Date) => {
   return dd + "/" + mm + "/" + yyyy;
 };
 
+const ridersAccepted = (rides: Ride[]) => {
+  return rides.map((r)=>r.selectedSeats).reduce((a, b) => a + b, 0)
+}
+
 export const Home = () => {
   const { wallet, shareRideState, completeRide } = useShareRide();
   const walletKey = wallet?.publicKey?.toBase58();
@@ -146,7 +143,7 @@ export const Home = () => {
                       {ride.seatsOffered}
                     </Table.TextCell>
                     <Table.TextCell isNumber>
-                      {ride.riders.length}
+                      {ridersAccepted(ride.riders)}
                     </Table.TextCell>
                     <Table.TextCell>
                       <Button
@@ -157,7 +154,7 @@ export const Home = () => {
                         disabled={formatDate(new Date()) !== ride.date}
                         intent="success"
                       >
-                        Complete Ride
+                        Mark as complete
                       </Button>
                     </Table.TextCell>
                   </Table.Row>

diff --git a/client/src/app/pages/ride/Riders.tsx b/client/src/app/pages/ride/Riders.tsx
@@ -1,5 +1,13 @@
-import { Pane, Dialog, Button, Table } from "evergreen-ui";
+import {
+  Pane,
+  Dialog,
+  Button,
+  Table,
+  InfoSignIcon,
+  Tooltip,
+} from "evergreen-ui";
 import React from "react";
+import { useShareRide } from "../../web3/provider";
 import { Driver } from "../../web3/provider/state";
 
 interface RiderModalProps {
@@ -19,6 +27,7 @@ export const RidersModal: React.FC<RiderModalProps> = ({
   show,
   onClose,
 }) => {
+  const { tokenAccount } = useShareRide();
   return (
     <Dialog
       isShown={show}
@@ -30,12 +39,8 @@ export const RidersModal: React.FC<RiderModalProps> = ({
     >
       <Table.Body>
         <Table.Head>
-          <Table.TextCell>
-            From
-          </Table.TextCell>
-          <Table.TextCell>
-            To
-          </Table.TextCell>
+          <Table.TextCell>From</Table.TextCell>
+          <Table.TextCell>To</Table.TextCell>
           <Table.TextCell>Total seats</Table.TextCell>
           <Table.TextCell>Cost per km</Table.TextCell>
           <Table.TextCell>Total Cost</Table.TextCell>
@@ -44,16 +49,41 @@ export const RidersModal: React.FC<RiderModalProps> = ({
         <Table.Body>
           {drivers.map((d) => (
             <Table.Row key={d.archiveId}>
+              <Table.TextCell>{d.fromAddress.address}</Table.TextCell>
+              <Table.TextCell>{d.toAddress.address}</Table.TextCell>
+              <Table.TextCell>{d.selectedSeats}</Table.TextCell>
+              <Table.TextCell>{d.costPerKm}</Table.TextCell>
               <Table.TextCell>
-                {d.fromAddress.address}
+                {Math.ceil(d.costPerKm * distance * seatsRequired)}
               </Table.TextCell>
               <Table.TextCell>
-                {d.toAddress.address}
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  <Button
+                    onClick={() => onDriverClicked(d)}
+                    appearance="primary"
+                    intent="success"
+                    disabled={
+                      (tokenAccount?.amount || 0) <
+                      Math.ceil(d.costPerKm * distance * seatsRequired)
+                    }
+                  >
+                    Accept
+                  </Button>
+                  {(tokenAccount?.amount || 0) <
+                    Math.ceil(d.costPerKm * distance * seatsRequired) && (
+                    <div style={{ marginLeft: 10 }}>
+                      <Tooltip
+                        position="right"
+                        content={`Does not have required balance (${Math.ceil(
+                          d.costPerKm * distance * seatsRequired
+                        )} sherekhans) in your token account.`}
+                      >
+                        <InfoSignIcon />
+                      </Tooltip>
+                    </div>
+                  )}
+                </div>
               </Table.TextCell>
-              <Table.TextCell>{d.selectedSeats}</Table.TextCell>
-              <Table.TextCell>{d.costPerKm}</Table.TextCell>
-              <Table.TextCell>{Math.ceil(d.costPerKm * distance * seatsRequired)}</Table.TextCell>
-              <Table.TextCell><Button onClick={() => onDriverClicked(d)} appearance="primary" intent="success">Accept</Button></Table.TextCell>
             </Table.Row>
           ))}
         </Table.Body>

diff --git a/client/src/app/web3/provider/account/index.ts b/client/src/app/web3/provider/account/index.ts
@@ -21,9 +21,10 @@ const getToken = () => {
 
 export const useTokenAccount = (
   provider: Provider,
-  setLoadingText: React.Dispatch<React.SetStateAction<string>>
+  setLoadingText: (loadingText: string) => void
 ) => {
   const [tokenAccount, setTokenAccount] = useState<AccountInfo>();
+  const [tokenAccountCreateLoading, setTokenAccountCreateLoading] = useState(false);
 
   const loadTokenAccount = async () => {
     console.log("Loading token account");
@@ -33,7 +34,9 @@ export const useTokenAccount = (
       setLoadingText(
         "Token account does not exist. Creating a new token account."
       );
+      setTokenAccountCreateLoading(true)
       token = (await createTokenAccount(provider, mintPublicKey)).toString();
+      setTokenAccountCreateLoading(false)
       saveToken(token);
     }
 
@@ -68,5 +71,6 @@ export const useTokenAccount = (
     tokenAccount,
     loadTokenAccount,
     mintAmountToTokenAccount,
+    tokenAccountCreateLoading,
   };
 };
diff --git a/client/src/app/web3/provider/index.tsx b/client/src/app/web3/provider/index.tsx
@@ -48,10 +48,15 @@ const ShareRideProviderProvider: React.FC<ShareRideProviderProviderProps> = ({
   children,
 }: ShareRideProviderProviderProps) => {
   const [wallet, setWallet] = useState<SolanaWallet>();
-  const [loadingText, setLoadingText] = useState("");
+  const [loadingText, _setLoadingText] = useState("");
   const [provider, setProvider] = useState<SolanaProvider>();
   // const [tokenAccount, setTokenAccount] = useState<AccountInfo>();
-  const { tokenAccount, loadTokenAccount, mintAmountToTokenAccount } =
+
+  const setLoadingText = (loading: string) => {
+    _setLoadingText(loading);
+  };
+
+  const { tokenAccount, loadTokenAccount, mintAmountToTokenAccount, tokenAccountCreateLoading } =
     useTokenAccount(provider as Provider, setLoadingText);
 
   const loadWallet = useCallback(async () => {
@@ -91,23 +96,31 @@ const ShareRideProviderProvider: React.FC<ShareRideProviderProviderProps> = ({
   };
 
   const completeRide = async (driverId: string) => {
-    const rides = shareRideState.rides.filter(({ driveId }) => driveId === driverId)
+    const rides = shareRideState.rides.filter(
+      ({ driveId }) => driveId === driverId
+    );
     console.log("Complete ride", rides);
 
-    console.log("Remove driver", driverId)
-    console.log("Remove rides", rides.map((r)=>r.archiveId))
-    setLoadingText("Transfering sherekhans to your account")
+    console.log("Remove driver", driverId);
+    console.log(
+      "Remove rides",
+      rides.map((r) => r.archiveId)
+    );
+    setLoadingText("Transfering sherekhans to your account");
 
     if (provider && tokenAccount) {
-      await Promise.all(rides.map(async (r)=>{
-        await exchangeEscrow(provider, tokenAccount, r.escrow)
-      }))
+      await Promise.all(
+        rides.map(async (r) => {
+          await exchangeEscrow(provider, tokenAccount, r.escrow);
+        })
+      );
     }
 
-    setLoadingText("Reloading token account")
+    setLoadingText("Reloading token account");
     await loadTokenAccount();
     await shareRideState.removeDriver(driverId);
-    setLoadingText("")
+    setLoadingText("Reloading rides");
+    await shareRideState.loadDrivers();
 
     //TODO: Fix this hardcoded ride
     // console.log(shareRideState.rides);
@@ -131,7 +144,7 @@ const ShareRideProviderProvider: React.FC<ShareRideProviderProviderProps> = ({
       intializeEscrow: _intializeEscrow,
       exchangeEscrow: _exchangeEscrow,
       mintAmountToTokenAccount,
-      loadingText,
+      loadingText: tokenAccountCreateLoading ? "Creating token account" : loadingText,
       completeRide,
     }),
     [wallet, shareRideState, tokenAccount, provider]

diff --git a/client/src/app/web3/provider/state/index.ts b/client/src/app/web3/provider/state/index.ts
@@ -31,6 +31,7 @@ export interface Ride {
   riderKey: string;
   driveId: string;
   escrow: string;
+  selectedSeats: number;
 }
 
 export interface ShareRideState {
@@ -48,7 +49,7 @@ export interface ShareRideState {
 export const useShareRideState = (
   provider: Provider | undefined,
   tokenAccount: AccountInfo | undefined,
-  setLoadingText: React.Dispatch<React.SetStateAction<string>>
+  setLoadingText: (loadingText: string) => void
 ): ShareRideState => {
   const [drivers, setDrivers] = useState<Driver[]>([]);
   const [rides, setRides] = useState<Ride[]>([]);

diff --git a/client/src/assets/images/logo-white.png b/client/src/assets/images/logo-white.png
diff --git a/client/src/assets/images/logo.png b/client/src/assets/images/logo.png
diff --git a/client/src/favicon.png b/client/src/favicon.png
diff --git a/client/src/logo.png b/client/src/logo.png