JASIRI WEB EXTENSION

Prerequisites

• node + npm (Current Version)

Option

• Visual Studio Code

Project Structure

• 📁 src/content: The scrapping logic
• 📁 src/pages/popup: The main react app
• 📁 dist: Extension directory
• 📁 amplify: AWS Files
• 📁 public: Static Files
• 📁 .github/workflows: CI/CD workflow files (Github Actions)

See below for more details.

Setup

npm install

Also include aws-exports.js in src - the same folder which contains aws-exports.d.ts.

Build

npm run build

Build in watch mode

npm run watch

Load extension to chrome

• Open Browser
• Manage Extensions
• Load Unpacked
• Choose dist directory

---

Content Script

The content script is injected to the DOM of the current tab.

Structure of Content Script

The content script is divided into the following files which are at src/content/:

• 📄index.tsx- The logic in this file receives the message and checks whether the website is Alibaba or Amazon.
• 📄amazon.tsx - This is the scrapping logic for Amazon order pages
• 📄alibaba.tsx - This is the scrapping logic for Alibaba order pages

Scrapping Logic of Content Script

The scrapping logic utilizes jQuery to simplify selection of the elements to get data from.

Scrapping is initialized when a scan message is received from the extension. This message gets sent when a user clicks Show Tokenizable Assets.

A stringified JSON list of orders is sent back to the extension. Each object in the list has the following structure:

interface ScannedOrders {
  id: string;
  orderDate: string;
  deliveryDate: string;
  orderDetailsLink: string;
  shippingAddress: string;
  shippedOn: string;
  total: string;
  title: string;
  image: string | undefined;
}

Main Extension

The the UI presented to the user by the extension is a Typescript React Application located at src/pages/popup.

Structure of Main React App

• 📁webpack - build config for Webpack
• 📁amplify - amplify backend configuration files, most of it is autogenerated except GRAPHQL API config file which is at amplify\backend\api\jasiriwebextension\schema.graphql
• 📁.github - workflow files for CI/CD
• 📁dist - output of the npm run watch or npm run build commands
• 📁public - static files of the extension
  • 📄popup.html - the extension UI
  • 📄options.html - Unnecessary for now
  • 📄manifest.json - config details of the extension
  • 📄icon.png - icon shown in browser

The React application which is in the **/popup/ directory is structured as follows:

• 📄index.tsx - This is the main entry point of the application.
• 📄App.tsx - This holds all the routes of the application. Route guards (authentication) are also placed here.
• 📁routes/* - This holds all the major routes of the application including the following:
  • 📄home.tsx - the home screen
  • 📄splash.tsx - the splash screen for user to go to NFT Marketplace or Tokenize Assets
  • 📁market - NFT Marketplace routes
    • 📄index.tsx - the list of NFTs on auction
    • 📄tokenized.tsx - the list of tokenized assets that a user can auction
  • 📁ordes
    • 📄index.tsx - the page that shows valid orders that can be tokenized
  • 📁auth
    • 📄index.tsx - the base route for authentication
  • 📁wallet
    • 📄index.tsx - shows option for user to choose wallet to connect to
    • 📄success.tsx - shows successful connection to user wallet
• 📁store - This contains the React context logic
• 📁graphql - this is auto-generated by amplify
• 📁contract - this contains the logic for interacting with the smartcontracts.
  • 📁backend - build **.mjs files are located here, therefore, every time a new build of the smart contract code is build and output by Reach, they should be copied into this folder.
  • 📄admin.tsx - deploy admin
  • 📄bidder.tsx - bidding logic
  • 📄market.tsx - auction item logic
  • 📄tokenize.tsx - tokenize an order logic
  • 📄common.tsx - common constants and utilities
• 📁scss - this folder contains modularized and properly named styles for the various pages. The names of the modules reflect the different routes and components of this React project.
• 📁types - contains the types used in the project
• 📁utils - contains common logic used in various parts of the app
• 📁wallet - contains the wallet connection logic for WalletConnect and MyALGO Connect
• 📁components - this contains all the reusable logic in the application. The non-reusable bits, however, exist. Further notes:
  • 📁animations - contains all the animations used in the project
  • 📁authenentication - all the authentication components required by the /auth/ route.
  • 📄close.tsx - the X icon that takes you to the homepage. It is present in various routes
  • 📄checkmark.tsx - the checkmark used in authentication input fields during validation
  • 📄logo.tsx - the logo used in various pages
  • 📄marketModal.tsx - the modal that pops up when user clicks Get NFT in the NFT Marketplace page
  • 📄orderItem.tsx - components that represents each listed order in the /orders route
  • 📄topNav.tsx - this is present in various routes. Shows balances etc

Scrapping Logic in Main Extension

When a user clicks Get Tokenizable Orders, a message is sent to the injected content script to retrieve orders from the current tab. An error is shown if the order list received is empty, which happens if there is no valid orders showing in the current tab.

If valid orders are in the current tab, a stringified JSON array of orders is received. Each order is in the following structure:

interface ScannedOrders {
  id: string;
  orderDate: string;
  deliveryDate: string;
  orderDetailsLink: string;
  shippingAddress: string;
  shippedOn: string;
  total: string;
  title: string;
  image: string | undefined;
}

Caching

Caching is done when a list of orders is received when a scan was issued by a user. If an order is already in cache, it is skipped.

Before caching, however, more details are retrieved for each order. The details are retrieved using the link given by item.orderDetailsLink field. Making network requests this way was decided because a content script would not able to make CORS requests.