Blockie Components

blockie-components is a React component library that provides a set of loyalty platform components to easily integrate into your applications. The components are built using TypeScript and are compatible with React projects.

Installation

Install the blockie-components package from npm:

npm install blockie-components@latest

Configuration

To use blockie-components in your project, follow these steps:

1. Create a config-overrides.js file in the root of your project and add the following content:

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
    zlib: require.resolve("browserify-zlib"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  config.ignoreWarnings = [/Failed to parse source map/];
  config.module.rules.push({
    test: /\.(js|mjs|jsx)$/,
    enforce: "pre",
    loader: require.resolve("source-map-loader"),
    resolve: {
      fullySpecified: false,
    },
  });
  return config;
};

2. Update the scripts section of your package.json file:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

Usage

Import the components from the library:

import {
  CustomerPurchase,
  ParentComponent,
  Transfer,
  VendorOrders,
  VendorProducts,
  VendorSettings,
} from "blockie-components";

Add the components to your React component:

<ParentComponent>
  <CustomerPurchase
    web3auth={null}
    provider={null}
    fullWallet={null}
    priceToPay={1200}
    products={{ "1": 1, "2": 2 }}
    vendorAddress={"0x3cE8678Df67f0cC791F52E4b2C105e829984E537"}
  />
  <VendorOrders web3auth={null} provider={null} fullWallet={null} />
  <DefPercentage web3auth={null} provider={null} fullWallet={null} />
  <VendorProducts web3auth={null} provider={null} fullWallet={null} />
  <Transfer web3auth={null} provider={null} fullWallet={null} />
</ParentComponent>

Components

ParentComponent

This is the main wrapper component for all other components provided by the library. Containes login interface and connection to all necessary endpoints.

CustomerPurchase

This component handles customer purchases with discounts thanks to their loyalty points and creates orders, that are visible to vendor. This component requires price to be payed as number, products that are being ordered as json { product_id: quantity } and vendors address as string.

VendorOrders

This component displays the list of orders and provides functionality for rewarding customer orders.

DefPercentage

This component allows defining the default reward percentage value and return period of products.

VendorProducts

This component displays the list of vendor products and provides functionality for managing them.

Transfer

This component handles transfers of loyalty points between users, displaying the necessary UI and handling interactions with the blockchain.