blockie-components v2.0.6
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:
- 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;
};
- 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.