npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zero-tech/zapp-nfts

v0.12.1

Published

zns marketplace app for zos

Downloads

8

Readme

MarketPlace dApp

This is the Marketplace dApp, ported from zNS-dApp's "Market" app.

Running Locally

This zApp is designed to run in the context of zOS.

You will need to run npm run watch, and link the output folder (dist) to your local instance of zOS.

  1. nvm use
  2. npm i
  3. npm run watch

At this point, you should see a dist folder. This is the compiled version of your app. If you wish to import this into zOS, you will need to do the following:

  1. npm run link [location of zOS, e.g. ../zOS]

or, if the above script doesn't work for you:

  1. cd dist
  2. npm link
  3. cd [location of zOS]
  4. npm link [package name of this zApp from package.json]

Check node_modules in zOS - your package folder should be symlinked in there.

Cypress End to End Testing Instructions

Create a .env file at the root of the project directory. Copy the environment variables from the .env.example file and paste into .env. The test setup will fail if these variables are not set in a .env file.

Important - The goerli network is set in the environment variables to ensure the e2e tests are run on a test network. To run the tests successfully, DEFAULT_NETWORK in the application code must be set to goerli. To do this, follow these steps:

  1. Navigate to: src/lib/constants/networks.ts.
  2. Update line export const DEFAULT_NETWORK = Network.MAINNET; to export const DEFAULT_NETWORK = Network.GOERLI;.

Next, you will need to follow the Running Locally instructions above in order to successfully run Cypress end to end specs.

Once the zApp is running locally open another terminal window and enter the following command.

  • npm run cypress:run

The above command will run the script - env-cmd cypress run --browser chrome --headed. This script is setting the browser to chrome and adds flag --headed which is required to work with the synpress package.

Browser Configuration

To change the browser used when running Cypress, you will be required to run the following command, replacing [broswer of choice] with your chosen browser e.g. firefox:

  • npx env-cmd cypress run --browser [broswer of choice] --headed

Please note, a metamask extension for your chosen browser will be required to run the tests successfully - the recommended browser is chrome.

Debugging Failing Tests

Once the specs have finished running, Cypress will exit and the Cypress window will close.

To assist with debugging and find where a test is failing using the Cypress window, you can run a script with the --no-exit flag. First, identify which spec file is failing and include the file in the below command, replacing [spec file path]:

npx env-cmd cypress run --browser chrome --headed --spec "[spec file path]" --no-exit

Example: npx env-cmd cypress run --browser chrome --headed --spec "cypress/e2e/connect_wallet.cy.ts" --no-exit.

Data Test ID Selectors

The data-testid={} attribute has been added so we can create a more robust and predictable way to select elements for testing purposes, without relying on specific class names or other properties that may be subject to change. Additionally, defining constants for data-testid values makes the test code more readable and maintainable.

Example file tree with selectors.ts:

├── Domains
    ├── selectors.ts
    ├── Domains.module.scss
    ├── Domains.tsx
    └── index.ts

Example usage of data-testid attribute:

<main className={styles.Main} data-testid={selectors.domainsContainer}>

Example usage of selectors in our test files:

import * as domainsPageSelectors from '../../src/pages/Domains/selectors';

cy.get(getByDataTestId(domainsPageSelectors.domainsContainer)).should(
			'be.visible',
		);

Custom Commands

Custom commands can be found in cypress/support/commands.ts.

The commands are configured and exported from cypress/support/e2e.ts which acts as an index.ts file. If new custom commands are added to the commands.ts file, you will need to update e2e.ts with the new command.

Resource references: Synpress Cypress