Deezy Component Library

Welcome to the Deezy Component Library repository! This library is a collection of reusable, customizable, and easy-to-integrate Deezy components designed to simplify your web development workflow. Whether you're building a simple website or a complex web application, our library provides you with a set of tools to enhance your user interface and user experience.

Features

• Modular and Reusable: Each component is designed to be modular, making it easy to reuse them across your projects.

• Customizable: Tailor the components to match your project's unique design requirements by using CSS, props, or configuration options.

• Responsive: Our components are built with responsiveness in mind, ensuring they adapt seamlessly to various screen sizes and devices.

• Well-documented: You'll find detailed documentation for each component, including usage examples and customization options.

• Active Maintenance: We are committed to maintaining and improving this library to keep up with the latest trends in Deezy development.

Installation

To get started with the Deezy Component Library, follow these simple steps:

1. Install the library via npm:

   npm install deezy-widget

2. Import the components you need in your Deezy application:

   import { CurrentBid, InscriptionPreview, BidWidget, ListBids } from 'deezy-widget'

3. Start building beautiful and functional user interfaces!

Usage

The library offers a wide range of components that cover various aspects of UI development. Refer to the documentation for each component to learn how to use them effectively in your project.

Inscription Preview Preview

Displays the preview for a specific inscription

<InscriptionPreview inscriptionId={inscriptionId} />

Customization sample

.img-preview img {
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
}

Current Bid

Display the highest bid for a specific inscription

<CurrentBid inscriptionId={inscriptionId} />

Customization sample

.bid-title {
  font-size: 18px;
  line-height: 22px;
  color: rgb(121, 128, 156);
  font-weight: 700;
}

.price-btc {
  font-size: 32px;
  line-height: 32px;
  color: rgb(21, 28, 59);
  font-weight: 700;
}

.price-btc img {
  height: 32px;
}

.price-fiat {
  font-size: 14px;
  line-height: 32px;
  color: rgb(21, 28, 59);
  margin-top: 6px;
}

Bid List

Display the list of bids for a specific inscription

<BidList inscriptionId={inscriptionId} limit={3} />

Customization sample

.bid-list {
  max-width: 84%;
}
.bid {
  grid-template-columns: 77% 23%;
  padding: 12px;
  border-bottom: 1px solid rgb(189, 192, 207);
}

.owner {
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 27px;
  text-align: initial;
}

.bid-price-btc {
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 27px;
  text-align: initial;
}

.bid-price-fiat {
  font-family: 'PT Sans', sans-serif;
  margin-top: 10px;
}

BidWidget

Place the bid for a specific inscription. It requires the user to have a wallet, so before placing the bid, it will prompt a wallet connection modal. After wallet is connected, bid will be made.

A callback can be passed down to get any error or the psbt in case evverything worked.

const callback = (err, data) => {}
;<BidWidget inscriptionId={inscriptionId} suggestedPrice={1000} onBid={calback} />

Customization sample

You can customize the

.input-group {
  margin-bottom: 12px;
}

.input-group input {
  border-radius: 12px;
  font-size: 25px;
  height: 54px;
  font-weight: 700;
  line-height: 37.5px;
  padding: 6px 12px;
  outline: none;
  border-top-right-radius: 12px !important; /* Overwrite bootstrap */
  border-bottom-right-radius: 12px !important; /* Overwrite bootstrap */
}

.input-group input:focus {
  outline: none;
  border-color: rgb(33, 37, 41) !important; /* Overwrite bootstrap */
  box-shadow: none !important; /* Overwrite bootstrap */
}

.input-group input::placeholder {
  font-weight: bold;
  color: #79809c;
  font-size: 25px;
  opacity: 0.3;
}

.bit-continue-button button {
  border-radius: 12px;
  margin-left: 8px;
  color: rgb(255, 255, 255);
  font-size: 19px;
  font-weight: 700;
  background-color: #212529;
  border: 1px solid #212529;
  text-wrap: nowrap;
  height: 54px;
  padding: 0px 12px;
}

.bit-continue-button button.disabled {
  opacity: 0.65;
  background-color: rgb(128, 128, 128);
  border: 1px solid rgb(128, 128, 128);
}

Contributing

Compile and publish

npm version patch
npm run build
npm publish

Run Locally

npm run start

License

This Deezy Component Library is open-source software licensed under the MIT License. Feel free to use it in your projects and make it your own.