diff --git a/client/index.html b/client/index.html index 01d9287..765b778 100644 --- a/client/index.html +++ b/client/index.html @@ -2,7 +2,7 @@ - + Share Ride App diff --git a/client/src/app/pages/auth/login.tsx b/client/src/app/pages/auth/login.tsx index 042486b..f69aa4e 100644 --- a/client/src/app/pages/auth/login.tsx +++ b/client/src/app/pages/auth/login.tsx @@ -20,7 +20,7 @@ export const Login = () => {
share ride logo -

Welcome back to share ride

+

Welcome back to Share Ride

Ready to go somewhere? Connect your wallet to get started.

diff --git a/client/src/app/pages/dashboard/loadingModal.tsx b/client/src/app/pages/dashboard/loadingModal.tsx index ab95b10..ebca4fa 100644 --- a/client/src/app/pages/dashboard/loadingModal.tsx +++ b/client/src/app/pages/dashboard/loadingModal.tsx @@ -18,6 +18,8 @@ const LoadingModal: React.FC = ({ confirmLabel="Custom Label" hasClose={false} hasFooter={false} + shouldCloseOnOverlayClick={false} + shouldCloseOnEscapePress={false} >
diff --git a/client/src/app/pages/home/home.tsx b/client/src/app/pages/home/home.tsx index 05c8105..7d16eed 100644 --- 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} - {ride.riders.length} + {ridersAccepted(ride.riders)} diff --git a/client/src/app/pages/ride/Riders.tsx b/client/src/app/pages/ride/Riders.tsx index 312ee40..c8a1928 100644 --- 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 = ({ show, onClose, }) => { + const { tokenAccount } = useShareRide(); return ( = ({ > - - From - - - To - + From + To Total seats Cost per km Total Cost @@ -44,16 +49,41 @@ export const RidersModal: React.FC = ({ {drivers.map((d) => ( + {d.fromAddress.address} + {d.toAddress.address} + {d.selectedSeats} + {d.costPerKm} - {d.fromAddress.address} + {Math.ceil(d.costPerKm * distance * seatsRequired)} - {d.toAddress.address} +
+ + {(tokenAccount?.amount || 0) < + Math.ceil(d.costPerKm * distance * seatsRequired) && ( +
+ + + +
+ )} +
- {d.selectedSeats} - {d.costPerKm} - {Math.ceil(d.costPerKm * distance * seatsRequired)} - ))} diff --git a/client/src/app/web3/provider/account/index.ts b/client/src/app/web3/provider/account/index.ts index a8dede9..51f4e36 100644 --- 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> + setLoadingText: (loadingText: string) => void ) => { const [tokenAccount, setTokenAccount] = useState(); + 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 index 17aa9e9..c260ef8 100644 --- a/client/src/app/web3/provider/index.tsx +++ b/client/src/app/web3/provider/index.tsx @@ -48,10 +48,15 @@ const ShareRideProviderProvider: React.FC = ({ children, }: ShareRideProviderProviderProps) => { const [wallet, setWallet] = useState(); - const [loadingText, setLoadingText] = useState(""); + const [loadingText, _setLoadingText] = useState(""); const [provider, setProvider] = useState(); // const [tokenAccount, setTokenAccount] = useState(); - 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 = ({ }; 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 = ({ 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 index b937845..14f96ca 100644 --- 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> + setLoadingText: (loadingText: string) => void ): ShareRideState => { const [drivers, setDrivers] = useState([]); const [rides, setRides] = useState([]); diff --git a/client/src/assets/images/logo-white.png b/client/src/assets/images/logo-white.png index 4fe5d47..5d4741b 100644 Binary files a/client/src/assets/images/logo-white.png and b/client/src/assets/images/logo-white.png differ diff --git a/client/src/assets/images/logo.png b/client/src/assets/images/logo.png index 52c322e..5d4741b 100644 Binary files a/client/src/assets/images/logo.png and b/client/src/assets/images/logo.png differ diff --git a/client/src/favicon.png b/client/src/favicon.png new file mode 100644 index 0000000..5d4741b Binary files /dev/null and b/client/src/favicon.png differ diff --git a/client/src/logo.png b/client/src/logo.png new file mode 100644 index 0000000..5d4741b Binary files /dev/null and b/client/src/logo.png differ