# @zero-tech/zapp-nfts

> zns marketplace app for zos

Latest version **0.12.1** (published 2023-05-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @zero-tech/zapp-nfts
pnpm add @zero-tech/zapp-nfts
yarn add @zero-tech/zapp-nfts
bun add @zero-tech/zapp-nfts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.12.1 |
| Published | 2023-05-23 |
| First published | 2022-10-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | zer0-os |
| Maintainers | whytecrowe, joel_tulloch, zero-brett, jamesearle |

## Links

- npm: https://www.npmjs.com/package/@zero-tech/zapp-nfts
- Repository: https://github.com/zer0-os/zApp-NFTs
- Homepage: https://github.com/zer0-os/zApp-NFTs#readme
- Issues: https://github.com/zer0-os/zApp-NFTs/issues
- npm.io page: https://npm.io/package/@zero-tech/zapp-nfts

## Dependencies (17)

- [yup](https://npm.io/package/yup.md) ^0.32.11
- [formik](https://npm.io/package/formik.md) ^2.2.9
- [moment](https://npm.io/package/moment.md) ^2.29.4
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [react-query](https://npm.io/package/react-query.md) ^3.39.1
- [@zero-tech/zui](https://npm.io/package/@zero-tech/zui.md) 0.22.0
- [use-async-effect](https://npm.io/package/use-async-effect.md) ^2.2.7
- [@zero-tech/zns-sdk](https://npm.io/package/@zero-tech/zns-sdk.md) 0.10.1
- [@ethersproject/units](https://npm.io/package/@ethersproject/units.md) ^5.6.1
- [@zero-tech/zsale-sdk](https://npm.io/package/@zero-tech/zsale-sdk.md) 0.1.6
- [@zer0-os/zapp-scripts](https://npm.io/package/@zer0-os/zapp-scripts.md) ^0.0.3
- [@zero-tech/zapp-utils](https://npm.io/package/@zero-tech/zapp-utils.md) 0.6.5
- [@zero-tech/ztoken-sdk](https://npm.io/package/@zero-tech/ztoken-sdk.md) ^0.0.3
- [react-resize-detector](https://npm.io/package/react-resize-detector.md) 7.0.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5
- [@zero-tech/zero-contracts](https://npm.io/package/@zero-tech/zero-contracts.md) ^0.0.7
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^14.4.3

## Recent versions

- 0.12.1 (latest) — 2023-05-23
- 0.12.0 — 2023-05-21
- 0.11.1 — 2023-05-01
- 0.11.0 — 2023-03-17
- 0.10.1 — 2023-03-14
- 0.10.0 — 2023-03-08
- 0.9.0 — 2023-02-28
- 0.8.0 — 2023-01-24
- 0.7.5 — 2023-01-13
- 0.7.3 — 2023-01-05
- 0.7.2 — 2023-01-04
- 0.7.1 — 2022-12-21
- 0.7.0 — 2022-12-03
- 0.6.0 — 2022-11-04
- 0.5.2 — 2022-11-04
- … 10 more at https://npm.io/package/@zero-tech/zapp-nfts/versions

## 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](https://github.com/zer0-os/zOS).

You will need to run `npm run watch`, and link the output folder (`dist`) to your local instance of [zOS](https://github.com/zer0-os/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](https://github.com/zer0-os/zOS), you will need to do the following:

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

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

4. `cd dist`
5. `npm link`
6. `cd [location of zOS]`
7. `npm link [package name of this zApp from package.json]`

Check `node_modules` in [zOS](https://github.com/zer0-os/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](https://github.com/Synthetixio/synpress)
[Cypress](https://docs.cypress.io/guides/overview/why-cypress/)

---
_Source: https://npm.io/package/@zero-tech/zapp-nfts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._