PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

1.0.0

npm

@0xernesto/web3-subscription-widget

A React library to facilitate integration with Unlock Protocol subscriptions.

Published24 Sept 2023
Direct dependencies57
Transitive dependenciesNot calculated

README

Current package documentation

Subscription Widget for Unlock Protocol

Static Badge

Overview

The @0xernesto/web3-subscription-widget is a React library to facilitate integration with Unlock Protocol subscriptions.

This project was built during the 2023 ETHGlobal New York hackathon.

Installation

Install the widgets library via npm or yarn.

npm i --save @0xernesto/web3-subscription-widget

or

yarn add @0xernesto/web3-subscription-widget

Required Configuration

PropertyDescription
rpcUrlMapMapping of EVM JSON-RPC endpoint URL strings, indexed by chain ID.
lockConfigObject of properties corresponding to subscription "Lock".

Optional Configuration

PropertyDescription
themeObject of properties to set custom styling.
maxWidthNumber to define custom width, in pixels.

Usage Example

This snippet demonstrates how to implement the SubscriptionWidget component in a React application.

Note: The minimum width of the widget is 300px.

import { SubscriptionWidget } from "@0xernesto/web3-subscription-widget";

const YourAppComponent = () => {
	// Must have length >= 1
	const rpcUrlMap = {
		5: process.env.PRIVATE_GOERLI_RPC,
	};

	const theme = {
		primaryColor: "#cc0202",
		goodColor: "#47A66F",
		badColor: "#CC4545",
		primaryTextColor: "#000000",
		secondaryTextColor: "#4A4A4A",
		buttonTextColor: "#FFFFFF",
		containerBackgroundColor: "#FEF7EA",
		containerOutlineColor: "#DDF087",
		dropdownBackgroundColor: "#FEF7EA",
		dropdownOutlineColor: "#000000",
		optionActiveColor: "#C9C9C9",
		fontFamily: "sans-serif",
	};

	const lockConfig = {
		iconUrl:
			"https://images.ctfassets.net/y2ske730sjqp/4aEQ1zAUZF5pLSDtfviWjb/ba04f8d5bd01428f6e3803cc6effaf30/Netflix_N.png",
		lockAddress: "0x33201c65f9e7faa6d17d16c218dbc0ddf51c91b7",
		lockNetwork: 5,
		lockName: "Netflix 30 Day Subscription",
	};

	return (
		<div>
			<SubscriptionWidget
				rpcUrlMap={rpcUrlMap}
				lockConfig={lockConfig}
				maxWidth={600} // pixels
				theme={theme}
			/>
		</div>
	);
};

export default YourAppComponent;

Contributing

  • On a new branch, open a PR for a particular set of changes.
  • Name the PR according to Conventional Commits guidelines.
  • All commits must be related to the PR name and commit messages must follow Conventional Commits guidelines.
  • To make the enforcement of these guidelines easier, husky, commitlint, commitizen, and GitHub Actions have been configured for this project.
  • All PRs must be squashed and merged to keep a clean history on the main branch.

When commiting to GitHub, instead of using git commit, run the folowing command and follow the instrucitons.

npm run commit

Publishing

This project is set up to publish the package via GitHub Actions after a push or merge to the main branch. The following is an example step-by-step process for publishing new releases.

NOTE: NPM_TOKEN must be obtained from your npm account and added to the repo's GitHub Actions secrets. WIDGETS_REPO_TOKEN needs to be generated in your GitHub settings and added to the repo's GitHub Actions secrets. GITHUB_TOKEN is a special secret that is automatically created for the repo, so there is no need to explicitely define it anywhere.

Ensure that only the following scopes are checked when creating WIDGETS_REPO_TOKEN:

  • repo
    • repo:status
    • repo_deployment
    • public_repo
    • repo:invite
    • security_events
  • workflow
  • write:packages
    • read:packages
  1. On your local machine, create a new local branch - for example, fix_for_the_bug.
git checkout -b fix_for_the_bug
  1. Make code changes and commit as necessary.
git add -A

npm run commit

Follow the commitizen prompts, and the final commit message should be something like fix: "address part 1 of 5 of the bug"

  1. Push the branch to the remote GitHub repo.
git push origin fix_for_the_bug

  1. Create a new pull request from the fix_for_the_bug branch, review the code, and address any changes necessary. Make sure the pull request name follows Conventional Commits guidelines.

  2. After the changes have been reviewed, the PR can be squashed and merged to the main branch. This will trigger the GitHub Action workflow that publishes the new release, based on the prefix used on the PR name.

The process above ensures that the code in the main branch always reflects that latest package version, and also keeps package versions consistent between npm and GitHub Packages.

Semantic Versioning

The default values for these prefixes are defined in the .releaserc.js file.

PrefixVersion BumpDescription
featMinorA new feature is introduced to the application (e.g., version bump from 1.0.0 to 1.1.0).
fixPatchA bug fix in the codebase (e.g., version bump from 1.0.0 to 1.0.1).
docsNo bumpDocumentation only changes, no version bump.
styleNo bumpChanges that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc), no version bump.
refactorNo bumpA code change that neither fixes a bug nor adds a feature, no version bump.
perfPatchA code change that improves performance (e.g., version bump from 1.0.0 to 1.0.1).
testNo bumpAdding missing tests or correcting existing tests, no version bump.
buildNo bumpChanges that affect the build system or external dependencies (e.g., gulp, broccoli, npm), no version bump.
ciNo bumpChanges to CI configuration files and scripts (e.g., Travis, Circle, BrowserStack, SauceLabs), no version bump.
choreNo bumpOther changes that don't modify src or test files, no version bump.
revertVariedReverts a previous commit, the bump depends on the reverted change (e.g., if a feature is reverted, a minor version bump down). The default bump for revert is Minor.

License

This project is released under the MIT License - see the LICENSE.md file for details.

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 59

Native requirements
57 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
@headlessui/react
Environment
{
  "local_name": "@headlessui/react",
  "alias": false,
  "peer_metadata": null
}
^1.7.16runtime
@reduxjs/toolkit
Environment
{
  "local_name": "@reduxjs/toolkit",
  "alias": false,
  "peer_metadata": null
}
^1.9.5runtime
@wagmi/core
Environment
{
  "local_name": "@wagmi/core",
  "alias": false,
  "peer_metadata": null
}
^1.3.8runtime
react-icons
Environment
{
  "local_name": "react-icons",
  "alias": false,
  "peer_metadata": null
}
^4.10.1runtime
react-redux
Environment
{
  "local_name": "react-redux",
  "alias": false,
  "peer_metadata": null
}
^8.1.2runtime
redux
Environment
{
  "local_name": "redux",
  "alias": false,
  "peer_metadata": null
}
^4.2.1runtime
viem
Environment
{
  "local_name": "viem",
  "alias": false,
  "peer_metadata": null
}
^1.5.3runtime
@babel/core
Environment
{
  "local_name": "@babel/core",
  "alias": false,
  "peer_metadata": null
}
^7.22.10development
@babel/preset-env
Environment
{
  "local_name": "@babel/preset-env",
  "alias": false,
  "peer_metadata": null
}
^7.22.10development
@babel/preset-react
Environment
{
  "local_name": "@babel/preset-react",
  "alias": false,
  "peer_metadata": null
}
^7.22.5development
@commitlint/cli
Environment
{
  "local_name": "@commitlint/cli",
  "alias": false,
  "peer_metadata": null
}
^17.7.1development
@commitlint/config-conventional
Environment
{
  "local_name": "@commitlint/config-conventional",
  "alias": false,
  "peer_metadata": null
}
^17.7.0development
@rollup/plugin-babel
Environment
{
  "local_name": "@rollup/plugin-babel",
  "alias": false,
  "peer_metadata": null
}
^6.0.3development
@rollup/plugin-commonjs
Environment
{
  "local_name": "@rollup/plugin-commonjs",
  "alias": false,
  "peer_metadata": null
}
^25.0.3development
@rollup/plugin-image
Environment
{
  "local_name": "@rollup/plugin-image",
  "alias": false,
  "peer_metadata": null
}
^3.0.2development
@rollup/plugin-json
Environment
{
  "local_name": "@rollup/plugin-json",
  "alias": false,
  "peer_metadata": null
}
^6.0.0development
@rollup/plugin-node-resolve
Environment
{
  "local_name": "@rollup/plugin-node-resolve",
  "alias": false,
  "peer_metadata": null
}
^15.1.0development
@rollup/plugin-typescript
Environment
{
  "local_name": "@rollup/plugin-typescript",
  "alias": false,
  "peer_metadata": null
}
^11.1.2development
@semantic-release/changelog
Environment
{
  "local_name": "@semantic-release/changelog",
  "alias": false,
  "peer_metadata": null
}
^6.0.3development
@semantic-release/git
Environment
{
  "local_name": "@semantic-release/git",
  "alias": false,
  "peer_metadata": null
}
^10.0.1development
@testing-library/jest-dom
Environment
{
  "local_name": "@testing-library/jest-dom",
  "alias": false,
  "peer_metadata": null
}
^5.17.0development
@testing-library/react
Environment
{
  "local_name": "@testing-library/react",
  "alias": false,
  "peer_metadata": null
}
^14.0.0development
@types/jest
Environment
{
  "local_name": "@types/jest",
  "alias": false,
  "peer_metadata": null
}
^29.5.3development
@types/node
Environment
{
  "local_name": "@types/node",
  "alias": false,
  "peer_metadata": null
}
^20.4.2development
@types/react
Environment
{
  "local_name": "@types/react",
  "alias": false,
  "peer_metadata": null
}
^18.2.15development
@types/react-dom
Environment
{
  "local_name": "@types/react-dom",
  "alias": false,
  "peer_metadata": null
}
^18.2.7development
@typescript-eslint/eslint-plugin
Environment
{
  "local_name": "@typescript-eslint/eslint-plugin",
  "alias": false,
  "peer_metadata": null
}
^6.1.0development
@typescript-eslint/parser
Environment
{
  "local_name": "@typescript-eslint/parser",
  "alias": false,
  "peer_metadata": null
}
^6.1.0development
autoprefixer
Environment
{
  "local_name": "autoprefixer",
  "alias": false,
  "peer_metadata": null
}
^10.4.14development
commitizen
Environment
{
  "local_name": "commitizen",
  "alias": false,
  "peer_metadata": null
}
^4.3.0development
cz-conventional-changelog
Environment
{
  "local_name": "cz-conventional-changelog",
  "alias": false,
  "peer_metadata": null
}
^3.3.0development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^8.45.0development
eslint-config-airbnb
Environment
{
  "local_name": "eslint-config-airbnb",
  "alias": false,
  "peer_metadata": null
}
^19.0.4development
eslint-config-prettier
Environment
{
  "local_name": "eslint-config-prettier",
  "alias": false,
  "peer_metadata": null
}
^8.8.0development
eslint-import-resolver-typescript
Environment
{
  "local_name": "eslint-import-resolver-typescript",
  "alias": false,
  "peer_metadata": null
}
^3.6.0development
eslint-plugin-prettier
Environment
{
  "local_name": "eslint-plugin-prettier",
  "alias": false,
  "peer_metadata": null
}
^5.0.0development
eslint-plugin-react
Environment
{
  "local_name": "eslint-plugin-react",
  "alias": false,
  "peer_metadata": null
}
^7.33.0development
eslint-plugin-simple-import-sort
Environment
{
  "local_name": "eslint-plugin-simple-import-sort",
  "alias": false,
  "peer_metadata": null
}
^10.0.0development
husky
Environment
{
  "local_name": "husky",
  "alias": false,
  "peer_metadata": null
}
^8.0.0development
identity-obj-proxy
Environment
{
  "local_name": "identity-obj-proxy",
  "alias": false,
  "peer_metadata": null
}
^3.0.0development
jest
Environment
{
  "local_name": "jest",
  "alias": false,
  "peer_metadata": null
}
^29.6.1development
jest-environment-jsdom
Environment
{
  "local_name": "jest-environment-jsdom",
  "alias": false,
  "peer_metadata": null
}
^29.6.1development
postcss
Environment
{
  "local_name": "postcss",
  "alias": false,
  "peer_metadata": null
}
^8.4.26development
prettier
Environment
{
  "local_name": "prettier",
  "alias": false,
  "peer_metadata": null
}
^3.0.0development
prettier-plugin-tailwindcss
Environment
{
  "local_name": "prettier-plugin-tailwindcss",
  "alias": false,
  "peer_metadata": null
}
^0.4.1development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^18.2.0development
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
^18.2.0development
rollup
Environment
{
  "local_name": "rollup",
  "alias": false,
  "peer_metadata": null
}
^3.26.3development
rollup-plugin-dts
Environment
{
  "local_name": "rollup-plugin-dts",
  "alias": false,
  "peer_metadata": null
}
^5.3.0development
rollup-plugin-node-polyfills
Environment
{
  "local_name": "rollup-plugin-node-polyfills",
  "alias": false,
  "peer_metadata": null
}
^0.2.1development
rollup-plugin-peer-deps-external
Environment
{
  "local_name": "rollup-plugin-peer-deps-external",
  "alias": false,
  "peer_metadata": null
}
^2.2.4development
rollup-plugin-postcss
Environment
{
  "local_name": "rollup-plugin-postcss",
  "alias": false,
  "peer_metadata": null
}
^4.0.2development
semantic-release
Environment
{
  "local_name": "semantic-release",
  "alias": false,
  "peer_metadata": null
}
^21.1.1development
tailwindcss
Environment
{
  "local_name": "tailwindcss",
  "alias": false,
  "peer_metadata": null
}
^3.3.3development
ts-jest
Environment
{
  "local_name": "ts-jest",
  "alias": false,
  "peer_metadata": null
}
^29.1.1development
tslib
Environment
{
  "local_name": "tslib",
  "alias": false,
  "peer_metadata": null
}
^2.6.0development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^5.1.6development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^18.2.0peer
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
^18.2.0peer

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-lG29KWn4XPxAtsBHbrCVFFzZny+7KVZ3COHIe225VHWJeo6N+KhBjA/ffqx0pfI8GWuLyY2qEeJEgLQ52Vf9Fw==",
  "shasum": "ed7bfa34484f2440b8fe184f5c30ad6cb18e05c8",
  "tarball": "https://registry.npmjs.org/@0xernesto/web3-subscription-widget/-/web3-subscription-widget-1.0.0.tgz",
  "fileCount": 194,
  "unpackedSize": 1348775,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEQCICzm0xpaHcndIlcbWi5F0owXOxjzRvrve+/TuQctBMWcAiA8Jr19oKBJ+zYsJ+JVB8CYhsOsSdBPczc60w2jv7EXCA=="
    }
  ]
}

Repository

PENDING
0xernesto/web3-subscription-widget

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 23:07 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:c03d70d5c8db6e74f0cba2ec7e92083d03eeba67391f6de8ff9faaf16d5a15fe

Other collected versions

1.0.224 Sept1.0.124 SeptView all collected versions →