Merge pull request #2 from 1M4nt0/Develop

v0.0.1

Dockerfile

@@ -3,11 +3,13 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 
+
 # Rebuild the source code only when needed
 FROM node:16-alpine AS builder
 WORKDIR /app
 COPY . .
 COPY --from=dependencies /app/node_modules ./node_modules
+RUN npm run gen-contract-types
 
 ARG DOMAIN
 ARG NETWORK_ID
@@ -39,13 +41,7 @@ ENV NODE_ENV production
 # If you are using a custom next.config.js file, uncomment this line.
 
 COPY --from=builder /app ./
-COPY --from=builder /app/node_modules/vrt-project-core/artifacts/ ./public/contracts/
-
-#COPY --from=builder /app/next.config.js ./
-#COPY --from=builder /app/public ./public
-#COPY --from=builder /app/.next ./.next
-#COPY --from=builder /app/node_modules ./node_modules
-#COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/node_modules/vrt-core/artifacts/ ./public/contracts/
 
 EXPOSE 3000
 

Dockerfile.development

@@ -32,7 +32,7 @@ COPY tailwind.config.js /app/tailwind.config.js
 COPY tsconfig.json /app/tsconfig.json
 COPY /public ./public/
 RUN mkdir -p ./public/contracts
-COPY node_modules/vrt-project-core/artifacts/ ./public/contracts/
+COPY node_modules/vrt-core/artifacts/ ./public/contracts/
 
 EXPOSE 3000
 

README.md

@@ -1,55 +1,29 @@
-# Instructions
+# Vehicle Registration Token (VRT) - Interface
 
-## Endpoints HTTP
+An interface for Vehicle Registration Token Project, a protocol for trace vehicle's property and their history in Ethereum blockchain.
 
-Graph: http://127.0.0.1:8000/subgraphs/name/example/graphql
+## Prerequisites:
 
-IPFS: http://localhost:5001/
+-   [Docker](https://www.docker.com/get-started/)
+-   [NodeJS](https://nodejs.org/it/)
+-   Before starting interface you need to run [Vehicle Registration Token (VRT) - Core](https://github.com/1M4nt0/tesi-uniud-2022-core).
 
-## Launch application
+## Starting interface
 
-### Start Dev Server
+### Clone repository
 
-1. Run docker (docker compose up)
-2. npm run dev
+```
+git clone https://github.com/1M4nt0/tesi-uniud-2022-interface
 
-### Gen Dev Files
+cd tesi-uniud-2022-interface
 
-1. npm run build-contract-abi
-2. npm run genContractType
+npm install
+```
 
-### Migrate contracts to ganache
+### Start docker container
 
-1. truffle migrate
+```
+cd tesi-uniud-2022-interface/docker
 
-### Create new subgraph
-
-1. npm run codegen
-2. npm run create-local
-3. npm run deploy-local
-
-### Upload files to ipfs
-
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\metadata1.json http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\metadata2.json http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\1_immatricolazione.json http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\1_immatricolazione.pdf http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\2_incidente.pdf http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\2_incidente.json http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\3_meccanico.pdf http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\3_meccanico.json http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\4_revisione.pdf http://localhost:5001/api/v0/add
-curl -X POST -F file=@%cd%\test\VehicleMeta\JSON\4_revisione.json http://localhost:5001/api/v0/add
-
-### Access contracts and create tokens
-
-truffle console
-const VRT = await VehicleRegistrationToken.deployed();
-await VRT.mintToken("http://127.0.0.1:8080/QmPvVh4of1B8VdGgAZafDCK5g5DeLRa6sCbfVoGJ92M2v9", {from:accounts[0]});
-await VRT.mintToken("http://127.0.0.1:8080/QmUZxpzDj3v8xifQX6Lqv6wNdPTDkNWuskMRuiN68N9MbG", {from:accounts[0]});
-await VRT.addCertification(1,1,"http://127.0.0.1:8080/QmPERK8NK6ssaNCPMoQa1Qencka4bMrqi3y2xx9JFTdsnC", {from:accounts[0]});
-await VRT.addCertification(1,2,"http://127.0.0.1:8080/QmSndp3U5QwC56xcssjL19gmS1tTQHe42xyDZukJZgYCEB", {from:accounts[0]});
-await VRT.addCertification(1,3,"http://127.0.0.1:8080/QmUz8HTHPRWHapsvoDyE2hvdmshHE3UXoqEgkTToWvG1La", {from:accounts[0]});
-await VRT.addCertification(1,6,"http://127.0.0.1:8080/QmYkz2tVdiSbws2GCEk71cVrGEneSWhZsPbj6KiyanfLMB", {from:accounts[0]});
-const VMP = await VehicleMarketplace.deployed();
-await VMP.placeNftOnSale(1,20000);
+docker compose up
+```

components/hooks/web3/useListedNfts.ts

@@ -7,7 +7,7 @@ import axios from "axios";
 import { cleanVehicleMeta } from "components/utils/utils";
 
 type UseListedNftsResponse = {
-    buyNft: (token: number, value: number) => Promise<void>;
+    buyVehicle: (token: number, value: number) => Promise<void>;
 };
 type ListedNftsHookFactory = CryptoHookFactory<SaleTicket[], UseListedNftsResponse>;
 
@@ -77,10 +77,10 @@ export const hookFactory: ListedNftsHookFactory =
         });
 
         const _contract = contracts?.vehicleMarketplaceContract;
-        const buyNft = useCallback(
+        const buyVehicle = useCallback(
             async (tokenId: number, value: number) => {
                 try {
-                    const result = await _contract!.buyNft(tokenId, {
+                    const result = await _contract!.buyVehicle(tokenId, {
                         value: value.toString(),
                     });
 
@@ -98,7 +98,7 @@ export const hookFactory: ListedNftsHookFactory =
 
         return {
             ...swr,
-            buyNft,
+            buyVehicle,
             data: data || [],
         };
     };

components/hooks/web3/useOwnedNfts.ts

@@ -16,7 +16,7 @@ type OwnedNftsHookFactory = CryptoHookFactory<Vehicle[], UseOwnedNftsResponse>;
 export type UseOwnedNftsHook = ReturnType<OwnedNftsHookFactory>;
 
 export const hookFactory: OwnedNftsHookFactory =
-    ({ contracts, provider, ethereum }) =>
+    ({ contracts }) =>
     () => {
         const { account } = useAccount();
         const { data, ...swr } = useSWR(contracts ? "web3/useOwnedNfts" : null, async () => {
@@ -58,7 +58,7 @@ export const hookFactory: OwnedNftsHookFactory =
         const listNft = useCallback(
             async (tokenId: number, price: number) => {
                 try {
-                    const result = await _contract!.placeNftOnSale(tokenId, price.toString());
+                    const result = await _contract!.putVehicleOnSale(tokenId, price.toString());
 
                     await toast.promise(result!.wait(), {
                         pending: "Validazione della transazione in corso...",

components/providers/web3/index.tsx

@@ -2,8 +2,8 @@ import { createContext, FunctionComponent, useContext, useEffect, useState } fro
 import { createDefaultState, createWeb3State, loadContract, Web3State } from "./utils";
 import { ethers } from "ethers";
 import { MetaMaskInpageProvider } from "@metamask/providers";
-import { VehicleMarketplaceContract } from "vrt-project-core/types/VehicleMarketplaceContract";
-import { VehicleRegistrationTokenContract } from "vrt-project-core/types/VehicleRegistrationTokenContract";
+import { VehicleMarketplaceContract } from "@_types/VehicleMarketplaceContract";
+import { VehicleRegistrationTokenContract } from "@_types/VehicleRegistrationTokenContract";
 
 const pageReload = () => {
     window.location.reload();
@@ -60,7 +60,7 @@ const Web3Provider: FunctionComponent = ({ children }) => {
                     })
                 );
             } catch (e: any) {
-                console.error("Please, install web3 wallet");
+                console.error(e, "Please, install web3 wallet");
                 setWeb3Api((api) =>
                     createWeb3State({
                         ...(api as any),

components/ui/nft/list/index.tsx

@@ -23,7 +23,7 @@ const NftList: FunctionComponent = () => {
         <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
             {saletTickets.data?.map((saletTicket) => (
                 <div key={saletTicket.id} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                    <NftItem item={saletTicket} buyNft={saletTickets.buyNft} />
+                    <NftItem item={saletTicket} buyNft={saletTickets.buyVehicle} />
                 </div>
             ))}
         </div>

docker/docker-compose.build.yml

@@ -0,0 +1,31 @@
+version: '3.8'
+
+services:
+  app:
+    image: im4nt0/vrt-interface
+    container_name: vrt-interface
+    restart: always
+    build:
+      context: ..
+      dockerfile: Dockerfile
+      args:
+        DOMAIN: host.docker.internal
+        NETWORK_ID: 5777
+        CHAIN_ID: 1337
+        TESTNET_RPC: http://host.docker.internal:8545
+        TESTNET_EXPLORER_URL: http://host.docker.internal:4000
+        IPFS_GATEWAY_URL: http://host.docker.internal:8080
+        IPFS_API_URL: http://host.docker.internal:5001
+        GRAPH_QUERY_BASE_URL: http://host.docker.internal:8000
+        SUBGRAPH_NAME: vrtproject
+    extra_hosts:
+      - host.docker.internal:host-gateway
+    ports:
+      - "3000:3000"
+    networks:
+      - vrt-project-network-proxy
+
+networks:
+  vrt-project-network-proxy:
+    external:
+      name: vrtproject

docker/docker-compose.yml

@@ -2,22 +2,9 @@ version: '3.8'
 
 services:
   app:
-    image: vrt-project-app
-    container_name: vrt-project-app
+    image: im4nt0/vrt-interface
+    container_name: vrt-interface
     restart: always
-    build:
-      context: ..
-      dockerfile: Dockerfile
-      args:
-        DOMAIN: host.docker.internal
-        NETWORK_ID: 5777
-        CHAIN_ID: 1337
-        TESTNET_RPC: http://host.docker.internal:8545
-        TESTNET_EXPLORER_URL: http://host.docker.internal:4000
-        IPFS_GATEWAY_URL: http://host.docker.internal:8080
-        IPFS_API_URL: http://host.docker.internal:5001
-        GRAPH_QUERY_BASE_URL: http://host.docker.internal:8000
-        SUBGRAPH_NAME: vrtproject
     extra_hosts:
       - host.docker.internal:host-gateway
     ports:

package.json

@@ -1,14 +1,26 @@
 {
-    "name": "vrt-project-interface",
+    "name": "vrt-interface",
     "version": "0.0.1",
-    "private": true,
+    "description": "Interface for Vehicle Registration Token Project, a protocol for trace vehicle's property and their history in Ethereum blockchain.",
+    "author": {
+        "name": "Andrea Antonutti",
+        "email": "dev.andrea.antonutti@gmail.com"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/1M4nt0/tesi-uniud-2022-interface"
+    },
+    "keywords": [
+        "blockchain",
+        "vehicles"
+    ],
+    "license": "MIT",
     "scripts": {
         "dev": "next dev",
         "build": "next build",
         "start": "next start",
         "lint": "next lint",
-        "genContractType": "abi-types-generator './public/contracts/VehicleMarketplace.json' --output='./types' --name=VehicleMarketplaceContract --provider=ethers_v5 && abi-types-generator './public/contracts/VehicleRegistrationToken.json' --output='./types' --name=VehicleRegistrationTokenContract --provider=ethers_v5 ",
-        "build-contract-abi": "docker run --rm -v D:/UTENTE/Andrea/CODICE/Ethereum/tesi-2022-website:/src ethereum/solc:stable --abi --include-path /src/node_modules/ -o /src/abis --base-path . /src/contracts/VehicleMarketplace.sol --overwrite && docker run --rm -v D:/UTENTE/Andrea/CODICE/Ethereum/tesi-2022-website:/src ethereum/solc:stable --abi --include-path /src/node_modules/ -o /src/abis --base-path . /src/contracts/VehicleRegistrationToken.sol --overwrite",
+        "gen-contract-types": "abi-types-generator './node_modules/vrt-core/artifacts/VehicleMarketplace.json' --output='./types' --name=VehicleMarketplaceContract --provider=ethers_v5 && abi-types-generator './node_modules/vrt-core/artifacts/VehicleRegistrationToken.json' --output='./types' --name=VehicleRegistrationTokenContract --provider=ethers_v5 ",
         "create": "graph create example --node https://api.thegraph.com/deploy/",
         "create-local": "graph create example --node http://127.0.0.1:8020",
         "codegen": "graph codegen",
@@ -37,7 +49,7 @@
         "react-toastify": "^8.2.0",
         "swr": "^1.3.0",
         "uuid": "^8.3.2",
-        "vrt-project-core": "^0.0.1"
+        "vrt-core": "^0.0.2"
     },
     "devDependencies": {
         "@truffle/hdwallet-provider": "^2.0.7",

pages/api/utils.ts

@@ -1,7 +1,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import { withIronSession, Session } from "next-iron-session";
 import * as util from "ethereumjs-util";
-import VehicleRegistrationTokenContract from "vrt-project-core/artifacts/VehicleRegistrationToken.json";
+import VehicleRegistrationTokenContract from "vrt-core/artifacts/VehicleRegistrationToken.json";
 
 const SUPPORTED_NETWORKS = {
     "5777": "Ganache",

pages/api/verify-certification.ts

@@ -2,7 +2,7 @@ import { v4 as uuidv4 } from "uuid";
 import { Session } from "next-iron-session";
 import { NextApiRequest, NextApiResponse } from "next";
 import { withSession, contractAddress, addressCheckMiddleware } from "./utils";
-import { VehicleMetaClean, VehicleMetadataRaw, VehicleCertificationDataClean } from "@_types/nft";
+import { VehicleCertificationDataClean } from "@_types/nft";
 import axios from "axios";
 import FormData from "form-data";
 

pages/vehicle/[id].tsx

@@ -29,7 +29,7 @@ const certificationTypeName: { [k: string]: string } = {
     3: "Lavori/Riparazioni",
     4: "Pagamento del bollo",
     5: "Collaudo",
-    6: "Revisione",
+    6: "Tagliando",
 };
 
 type CertificationData = {
@@ -290,7 +290,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     const eventsDataArray = vehicleFullDataRaw.transfers
         .map((item) => formatEventData(item, false))
         .concat(vehicleFullDataRaw.certifications.map((item) => formatEventData(item, true)))
-        .sort((a, b) => b.timestamp - a.timestamp)
+        .sort((a, b) => a.timestamp - b.timestamp)
         .map((event: eventData) => {
             return {
                 ...event,