'finished'

.dccache

@@ -0,0 +1 @@
+{"/Users/davidrakosi/GitHub/uber-clone-blockchain/next.config.js":[167,1646238368986.3086,"b1ddef512cb63101f1c0d79cb1385960d1d81d56d8716869de209d53ca3f96ac"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/postcss.config.js":[82,1646172722171.9585,"251ecddd4672c9cf467547e3dc535de00ad2129df26e7e7ae728fa4e5ac45fc5"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/tailwind.config.js":[163,1646172762963.166,"8c7a2a554598a88483452524485f8d0e6c6acccd3982c960d8ac11c38a9aaa5e"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/components/Confirm.js":[2015,1646299044971.2925,"8385942ce8199a739f9e03192c5f2370227500a8847d1fa3ebd83de5147b750b"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/components/LocationSelector.js":[2516,1646262020133.316,"0502b371f554ced060a8f8b8b1412e7f682166303974bb522d32ddd6b0c9b66f"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/components/Map.js":[1105,1646272178274.0825,"18e8717c1dbef006f0afbad925c4a00e99e9fef54be0a78168601567dabbf4bb"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/components/Navbar.js":[1921,1646272182418.326,"2b98fc0813a0f5ad1141b017aca546191b6f84281e733cfc6c7a01b18f86a713"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/components/RideSelector.js":[2423,1646298653486.9006,"c97918a22deafee124b59b175a300c1cf74efbc0c6939c7242fd249126a9a612"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/context/uberContext.js":[4854,1646298866379.5488,"ff39a8ddebffdb13fff8cc6b36feb7ab11593f5a63b7656c10d7f5325f65b7c6"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/lib/sanity.js":[224,1646234487465.1353,"68bfc857e2762072e90cbf7054ae64d3a5eb067a1161384788b2b0cfd142522c"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/pages/_app.js":[280,1646260504960.0876,"e6273a47d339dc4bbb07919cd56c3636eb7e55e0a95789a2f7c6162e90ef0911"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/pages/index.js":[889,1646182898994.2578,"988b76b02c93402b5b4c83532f5a9a05c579f89419474a86e3880ef249f0706f"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/studio/schemas/ridesSchema.js":[443,1646232699065.959,"2dc1bde36c261ccba00b0afebb9184fd1a98e9a48731f72e7b576e322f3eb274"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/studio/schemas/schema.js":[370,1646232844243.803,"a93f8957ce0e11a7792cfadcebc991dfd033340da664762a5423bb29e750bbf8"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/studio/schemas/tripSchema.js":[655,1646232819226.614,"c80f5ee5ff330842277e9ae7abf7df0f0425c651040d0820450401b137ea3bab"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/studio/schemas/userSchema.js":[365,1646232573577.6423,"995f32c7788079084c6e0a5f60952c6f3164a53c107c011aea3fc0942f7f836a"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/pages/api/db/createUser.js":[492,1646263080595.9746,"d55caef86105149061a9096033b8bfed83db170848f8f4a3b9fbac254ec54ef0"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/pages/api/db/getRideTypes.js":[487,1646238336953.621,"7c8281f19491eea93cde8634ee894a377464bd69d3abaa1d73826df99a1e69d9"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/pages/api/db/getUserInfo.js":[544,1646272195741.9746,"959652d689834a196a452a2c12090f83ddd3c479f0a5eef00c16e62f45d22a3f"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/pages/api/db/saveTrips.js":[862,1646297492269.8438,"6faae06da9fe80827ea9dd611ef5a707538cbeb56c6026558f9669c051d80da3"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/pages/api/map/getDuration.js":[526,1646298742412.5269,"f529596e13eae95cb04d5044afc9295269b9cf96426b18400aa91bd347614b18"],"/Users/davidrakosi/GitHub/uber-clone-blockchain/pages/api/map/getLocationCoordinates.js":[504,1646262348861.5793,"3e23d8be00638503b1a384f6dac16c641e6d35d23be8db6a9e43767e8e9be654"]}

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 

components/Confirm.js

@@ -0,0 +1,76 @@
+import RideSelector from './RideSelector'
+import { useContext } from 'react'
+import { UberContext } from '../context/uberContext'
+import { ethers } from 'ethers'
+
+const style = {
+  wrapper: `flex-1 h-full flex flex-col justify-between`,
+  rideSelectorContainer: `h-full flex flex-col overflow-scroll`,
+  confirmButtonContainer: ` border-t-2 cursor-pointer z-10`,
+  confirmButton: `bg-black text-white m-4 py-4 text-center text-xl`,
+}
+
+const Confirm = () => {
+  const {
+    currentAccount,
+    pickup,
+    dropoff,
+    price,
+    selectedRide,
+    pickupCoordinates,
+    dropoffCoordinates,
+    metamask,
+  } = useContext(UberContext)
+
+  const storeTripDetails = async (pickup, dropoff) => {
+    try {
+      await fetch('/api/db/saveTrips', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          pickupLocation: pickup,
+          dropoffLocation: dropoff,
+          userWalletAddress: currentAccount,
+          price: price,
+          selectedRide: selectedRide,
+        }),
+      })
+
+      await metamask.request({
+        method: 'eth_sendTransaction',
+        params: [
+          {
+            from: currentAccount,
+            to: process.env.NEXT_PUBLIC_UBER_ADDRESS,
+            gas: '0x7EF40', // 520000 Gwei
+            value: ethers.utils.parseEther(price)._hex,
+          },
+        ],
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <div className={style.wrapper}>
+      <div className={style.rideSelectorContainer}>
+        {pickupCoordinates && dropoffCoordinates && <RideSelector />}
+      </div>
+      <div className={style.confirmButtonContainer}>
+        <div className={style.confirmButtonContainer}>
+          <div
+            className={style.confirmButton}
+            onClick={() => storeTripDetails(pickup, dropoff)}
+          >
+            Confirm {selectedRide.service || 'UberX'}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Confirm

components/LocationSelector.js

@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import { useContext } from 'react'
+import { UberContext } from '../context/uberContext'
+
+const style = {
+  wrapper: `pt-2`,
+  searchHeader: `w-full font-bold text-left flex items-center text-3xl p-4 overflow-hidden`,
+  inputBoxes: `flex flex-col mb-4 relative`,
+  inputBox: `h-10 mx-4 border-2 bg-[#eeeeee] flex items-center my-1 py-1 px-2`,
+  focusedInputBox: `border-black`,
+  svgContainer: `mx-1`,
+  input: `my-2 rounded-2 p-2 outline-none border-none bg-transparent  h-full w-full`,
+  verticalLine: `w-0 h-[2rem] border-black border absolute z-10 left-[2.3rem] top-[2rem]`,
+}
+
+const LocationSelector = () => {
+  const [inFocus, setInFocus] = useState('from')
+  const { pickup, setPickup, dropoff, setDropoff } = useContext(UberContext)
+
+  return (
+    <div className={style.wrapper}>
+      <div className={style.searchHeader}>
+        {inFocus === 'from' ? 'Where can we pick you up?' : 'Where to?'}
+      </div>
+      <div className={style.inputBoxes}>
+        <div
+          className={`${style.inputBox} ${
+            inFocus === 'from' && style.focusedInputBox
+          }`}
+        >
+          <div className={style.svgContainer}>
+            <svg viewBox='0 0 24 24' width='1em' height='1em'>
+              <path
+                fillRule='evenodd'
+                clipRule='evenodd'
+                d='M12 14a2 2 0 100-4 2 2 0 000 4zm5-2a5 5 0 11-10 0 5 5 0 0110 0z'
+              />
+            </svg>
+          </div>
+          <input
+            className={style.input}
+            placeholder='Enter pickup location'
+            value={pickup}
+            onChange={e => setPickup(e.target.value)}
+            onFocus={() => setInFocus('from')}
+          />
+        </div>
+        <div className={style.verticalLine} />
+        <div
+          className={`${style.inputBox} ${
+            inFocus === 'to' && style.focusedInputBox
+          }`}
+        >
+          <div className={style.svgContainer}>
+            <svg viewBox='0 0 24 24' width='1em' height='1em'>
+              <path
+                fillRule='evenodd'
+                clipRule='evenodd'
+                d='M14 10h-4v4h4v-4zM7 7v10h10V7H7z'
+              />
+            </svg>
+          </div>
+          <input
+            className={style.input}
+            placeholder='Where to?'
+            value={dropoff}
+            onChange={e => setDropoff(e.target.value)}
+            onFocus={() => setInFocus('to')}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LocationSelector

components/Map.js

@@ -0,0 +1,44 @@
+import { useEffect, useContext } from 'react'
+import mapboxgl from 'mapbox-gl'
+import { UberContext } from '../context/uberContext'
+
+const style = {
+  wrapper: `flex-1 h-full w-full`,
+}
+
+mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN
+
+const Map = () => {
+  const { pickupCoordinates, dropoffCoordinates } = useContext(UberContext)
+
+  useEffect(() => {
+    const map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/drakosi/ckvcwq3rwdw4314o3i2ho8tph',
+      center: [-99.29011, 39.39172],
+      zoom: 3,
+    })
+
+    if (pickupCoordinates) {
+      addToMap(map, pickupCoordinates)
+    }
+
+    if (dropoffCoordinates) {
+      addToMap(map, dropoffCoordinates)
+    }
+
+    if (pickupCoordinates && dropoffCoordinates) {
+      map.fitBounds([dropoffCoordinates, pickupCoordinates], {
+        padding: 400,
+      })
+    }
+  }, [pickupCoordinates, dropoffCoordinates])
+
+  const addToMap = (map, coordinates) => {
+    const marker1 = new mapboxgl.Marker().setLngLat(coordinates).addTo(map)
+  }
+
+  return <div className={style.wrapper} id='map' />
+}
+
+export default Map

components/Navbar.js

@@ -0,0 +1,56 @@
+import Image from 'next/image'
+import avatar from '../temp/avatar.jpg'
+import { BsPerson } from 'react-icons/bs'
+import { useContext } from 'react'
+import { UberContext } from '../context/uberContext'
+
+const style = {
+  wrapper: `h-16 w-full bg-black text-white flex md:justify-around items-center px-60 fixed z-20`,
+  leftMenu: `flex gap-3`,
+  logo: `text-3xl text-white flex cursor-pointer mr-16`,
+  menuItem: `text-lg text-white font-medium flex items-center mx-4 cursor-pointer`,
+  rightMenu: `flex gap-3 items-center`,
+  userImageContainer: `mr-2`,
+  userImage: `h-10 w-10 mr-4 rounded-full p-px object-cover cursor-pointer`,
+  loginButton: `flex items-center cursor-pointer rounded-full hover:bg-[#333333] px-4 py-1`,
+  loginText: `ml-2`,
+}
+
+const Navbar = () => {
+  const { currentAccount, connectWallet, currentUser } = useContext(UberContext)
+
+  return (
+    <div className={style.wrapper}>
+      <div className={style.leftMenu}>
+        <div className={style.logo}>Uber</div>
+        <div className={style.menuItem}>Ride</div>
+        <div className={style.menuItem}>Drive</div>
+        <div className={style.menuItem}>More</div>
+      </div>
+      <div className={style.rightMenu}>
+        <div className={style.menuItem}>Help</div>
+        <div className={style.menuItem}>{currentUser.name?.split(' ')[0]}</div>
+        <div className={style.userImageContainer}>
+          <Image
+            className={style.userImage}
+            src={avatar}
+            width={40}
+            height={40}
+          />
+        </div>
+        {currentAccount ? (
+          <div>
+            {currentAccount.slice(0, 6)}...{currentAccount.slice(39)}
+          </div>
+        ) : (
+          <div className={style.loginButton} onClick={() => connectWallet()}>
+            <BsPerson />
+            <span className={style.loginText}>Log in</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Navbar

components/RideSelector.js

@@ -0,0 +1,81 @@
+import Image from 'next/image'
+import ethLogo from '../assets/eth-logo.png'
+import { useEffect, useContext, useState } from 'react'
+import { UberContext } from '../context/uberContext'
+
+const style = {
+  wrapper: `h-full flex flex-col`,
+  title: `text-gray-500 text-center text-xs py-2 border-b`,
+  carList: `flex flex-col flex-1 overflow-scroll`,
+  car: `flex p-3 m-2 items-center border-2 border-white`,
+  selectedCar: `border-2 border-black flex p-3 m-2 items-center`,
+  carImage: `h-14`,
+  carDetails: `ml-2 flex-1`,
+  service: `font-medium`,
+  time: `text-xs text-blue-500`,
+  priceContainer: `flex items-center`,
+  price: `mr-[-0.8rem]`,
+}
+
+const RideSelector = () => {
+  const [carList, setCarList] = useState([])
+  const { selectedRide, setSelectedRide, setPrice, basePrice } =
+    useContext(UberContext)
+
+  console.log(basePrice)
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const response = await fetch('/api/db/getRideTypes')
+
+        const data = await response.json()
+        setCarList(data.data)
+        setSelectedRide(data.data[0])
+      } catch (error) {
+        console.error(error)
+      }
+    })()
+  }, [])
+
+  return (
+    <div className={style.wrapper}>
+      <div className={style.title}>Choose a ride, or swipe up for more</div>
+      <div className={style.carList}>
+        {carList.map((car, index) => (
+          <div
+            key={index}
+            className={`${
+              selectedRide.service === car.service
+                ? style.selectedCar
+                : style.car
+            }`}
+            onClick={() => {
+              setSelectedRide(car)
+              setPrice(((basePrice / 10 ** 5) * car.priceMultiplier).toFixed(5))
+            }}
+          >
+            <Image
+              src={car.iconUrl}
+              className={style.carImage}
+              height={50}
+              width={50}
+            />
+            <div className={style.carDetails}>
+              <div className={style.service}>{car.service}</div>
+              <div className={style.time}>5 min away</div>
+            </div>
+            <div className={style.priceContainer}>
+              <div className={style.price}>
+                {((basePrice / 10 ** 5) * car.priceMultiplier).toFixed(5)}
+              </div>
+              <Image src={ethLogo} height={25} width={40} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default RideSelector