Dapp Templates.

Architecture

The languages used are HTML, CSS, Javascript, and Laravel PHP.

The site has a core template which then has the custom HTML/PHP built on top of it to suit the unique project. The core template functionality is in a single folder kept completely separate from all the main files you’ll customize.

1. 1. Core template: Metamask integration & login, admin & user dashboards.
   2. Project files of your project: In this case ‘Mini Analytics’ demo.

The core template folder contains routes, controllers, views, and models. The template folder is easily upgradable so if there's any new features, additional blockchain integrations, or bug fixes etc, you can simply replace this one folder and everything will work.

View injection

Your custom files are injected into the core template files. For example, the navbar has just a login button and Metamask wallet connect button. You'll edit separate code with the logo & nav links that are injected into the navbar.

Core template

The core template folder creates the minimum site including:

• Navbar with Metamask button and login
• Blank landing page
• Admin dashboard:
  • Settings: Metamask account, Blockchain Network, Website meta tags
  • Users: list of every user account created
  • Transactions: list of every blockchain transaction made
• Sitemap
• User dashboard:
  • Settings: name and email (email validated to be unique)

In a nutshell, users can connect to Metamask which also logs into the application. There is a user verification process that involves sending a small amount of TEST Ether on the Rinkeby test net. Admin can log in with Metamask, update settings, manage users, and see all blockchain transactions.

Project files

These files, which are separate from the template, can be deleted or modified in any way. In this demo application, their purpose is to have prebuilt blockchain logic you can modify to suit your project ideas. Being separate from the core template files, you don't need to worry about 'messing up' the core functionality.

The features are:

• Users: extra settings like a phone number
• Users: extra page called 'ETH transfer widget'. This can send ETH to any account.
• Users: extra page called 'Premium data'. This is a paid subscription where the user buys say 6 months access to premium data.
• Admin: extra settings like 'Subscription cost', and 'Subscription days'
• Admin: extra page called 'subscriptions'. Lists premium subscriptions created.

Notes about the demo

• Admin settings are locked because multiple test users logged in at the same time will create unexpected results.
• There's a test admin user one-click login.

Metamask connection in detail

• Logs the user in with 2 clicks.
• Connects Metamask wallet to application.
• If Metamask isn't installed on the browser, then a button displays as "download Metamask" with a link to Metamask’s site.
• If installed & not logged in, then the button displays as "Connect MetaMask".
• If a user is on a Mobile device in which Metamask isn't compatible, the Metamask button is replaced with a message informing the user to open on a Desktop browser.
• Button disabled out while pending login.
• Detects blockchain networks used. Admin can set a preferred chain to guide the user.
• Admin sets required test networks, e.g Ropsten, Rinkeby, Kovan, Goerli.
• A message appears under the navbar to guide the user to be connected to the intended network. e.g Rinkeby Testnet
• If the user changes Network in Metamask, the message is updated.

Minimum views required

There are some project area views which, although can be blank, should be kept with their current names so that the core template can reference them properly if needed.

• “backend” > “admin” > “admin”, “sidebar_menu”
• “backend” > “user” > “user”, “sidebar_menu”
• “backend” > “nav_logo_backend”
• “frontend” > “landing”
• “frontend” > “nav_links”
• “frontend” > “nav_logo”
• “libraries” > “frontend_styles”

Dependencies (all free)

• Laravel 7.0: https://laravel.com/docs/7/0
• Frontend UI. Argon.js: https://demos.creative-tim.com/argon-design-system/index.html?_ga=2.260873801.537160549.1630145128-1739168271.1630145128
• Backend UI. SB-Admin2:  https://startbootstrap.com/theme/sb-admin-2
• Metamask: https://docs.metamask.io/guide/ethereum-provider.html
• Etherscan API: https://etherscan.io/
• Icons: https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free

Installation (localhost - Xampp)

1. Sign up to Etherscan free plan and get API key
2. Create your project folder somewhere in xampp > htdocs, then unzip the contents of ‘minianalytics.zip’. Let's say xampp>htdocs>minianalyics.
3. Open up phpMyAdmin   http://localhost/phpmyadmin/
4. Create a new database called “mini_analytics”.
5. Open the ENV file in your project folder. You’ll need to fill out:

• • Etherscan_api_key
  • db_host
  • db_database
  • db_username
  • Db_password

Note there are 2 sections “LOCALHOST DB Settings” and “PRODUCTION DB Settings”. The ‘#’ is commenting out the lines not being used. Mine looks like:

6. Command Prompts:

cd /xampp/htdocs/minianalyics

php artisan migrate

php artisan migrate --seed --path=/template/database/migrations/

php artisan key:generate

php artisan serve --port=8001

7. Go to http://127.0.0.1:8001/

That's it, it should all be working now.

Installation (Live production on Cpanel)

1. Sign up to Etherscan free plan and get API key
2. In cpanel, you’ll need 2 folders. A public folder, and a project files folder. I’m using a subdomain, but the concept is the same. Your format could be:

• Yoursite.com (public folder)
• Yousite_files (project files)

3. Cpanel > File Manager > {project files folder}: click upload, then import ‘minianalytics.zip’

4. Extract the zip folder, then delete the original zip file. You’ll be left with just ‘minianalytics folder’.
5. Open this folder, and move the contents within the ‘public’ folder to your public folder. E.g yoursite.com. Use ‘select all’ then ‘move’. You can delete the newly empty folder.
6. Open the project files folder, move the contents up one level, and delete the newly empty folder.

7. Create a new database in ‘MySQL Database Wizard’ in Cpanel. Select ‘all privileges’. Record the username, database name, and password. It usually has hosting-related prepending. My username and database are both called ‘fresenom_mini_analytics’.
8. Open the ENV file in your project folder. You’ll need to fill out:

• Etherscan_api_key
• db_host
• db_database
• db_username
• Db_password

Note there’s 2 sections “LOCALHOST DB Settings” and “PRODUCTION DB Settings”. The ‘#’ is commenting out the lines not being used. Mine looks like:

‘APP_DEBUG’ hides or shows server level errors.  For production this should be ‘false’ to prevent hackers seeing sensitive database information, but whilst setting up, make this ‘true’ so you can diagnose any setup problems.

9. In the public folder, open index.php. Change the ‘autoload’ and ‘app’ paths. I have:

require __DIR__.'/../minianalytics_files/vendor/autoload.php';

$app = require_once __DIR__.'/../minianalytics_files/bootstrap/app.php';

10. Run data migrations and seeder. In cPanel, open ‘Terminal’. List of commands:

cd minianalytics_files

php artisan migrate

php artisan migrate --seed --path=/template/database/migrations/

php artisan key:generate

That's it, it should all be working now.

Demo features

Ether transfer widget

• Send Ether on the testnet to an account you choose.
• The widget disables inputs if the user doesn't have the correct Metamask network in use.
• The transactions appear in the table with a link to the transaction on etherscan.io
• All transactions are initially ‘pending’, then an API checks their completion status to update their status.

Premium subscription

• Admin sets price and duration.
• The user sends the fee via the Ether transfer widget.
• The Etherscan API intercepts and checks if the amount is correct.
• The user is granted access to the premium area.
• The subscription expires after the set time.

General notes

• The Free Etherscan API allows the testnets Kovan, Rinkeby, Ropsten, and Goerli.
• Appserviceprovider contains a boot method to put $settings in every view

Listeners

• loginEvent (user has logged in)
• walletConnectEvent (wallet has been connected)
• transferCancelledEvent (Starts a transfer, but cancel in Metamask)

Add Javascript to views/libraries/frontend_scripts