Code Monkey home page Code Monkey logo

eosio-components's Introduction

eoscr-components


A collection of React Components for EOSIO.

Table of Contents

Version

  • 4.0.7

Installation

To add the package to your react app install the dependencies using yarn.

$ yarn add @eoscostarica/eoscr-components

Components

Description Tag
Create Account Form to create a new account <CreateAccount />
Get Account Information Get an account information <AccountInfo />
Input Hash Input Text to create or validate HASH256 <InputHash />
Dropzone Hash Drop zone to handle files <DropzoneHash />
Backdrop Backdrop <Backdrop />
BPJsonGenerator BPJsonGenerator <BPJsonGenerator />
InfiniteRegistryTableLoader Provides infinite scroll and dynamic load <InfiniteRegistryTableLoader />
VisualCertificate Displays visual certificate with information and resources to verify the validity of the transaction <VisualCertificate />
Issuance Verifier Dropzone that validates the issuance of a file <IssuanceVerifier />
Ricardian Contract Visualizer Shows Ricarian clauses <RicardianContract />

Run locally

Local Development

We are using Storybook

is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

# Install dependencies and devDependencies
yarn
# Starts Storybook in development mode
yarn storybook

you can see more information about STORYBOOK

File Structure

Within the download you'll find the following directories and files:

eoscr-components/
├── .storybook
│   ├── main.js
│   ├── preview.js
│
├──  src
│   ├── api
│   │   └── eos-api.js
│   │
│   ├── config
│   │   └── index.js
│   │
│   ├── stories
│   │   ├── AccountInfo.stories.js
│   │   ├── CreateAccount.stories.js
│   │   ├── InputHash.stories.js
│   │   ├── Backdrop.stories.js
│   │   ├── RicardianContract.stories.js
│   │   ├── DropzoneHash.stories.js
│   │   ├── InfiniteRegistryTableLoader.stories.js
│   │   ├── BPJsonGenerator.stories.js
│   │   ├── VisualCertificate.stories.js
│   │   └── IssuanceVerifier.stories.js
│   │
│   ├── utils
│   │   ├── convert-hex-to-rgb.js
│   │   ├── get-eos-api.js
│   │   ├── file-reader.js
│   │   ├── validation.js
│   │   ├── index.js
│   │   └── get-rgb-colors-from-hex.js
│   │
│   ├── AccountInfo
│   │   ├── styles.js
│   │   ├── BPAvatar.js
│   │   ├── ProgressBar.js
│   │   └── index.js
│   ├── Backdrop
│   │   ├── styles.js
│   │   └── index.js
│   ├── BPJsonGenerator
│   │   ├── styles.js
│   │   ├── ImagePreview.js
│   │   ├── Modal.js
│   │   ├── NodesForm.js
│   │   └── index.js
│   ├── common
│   │   ├── styles.js
│   │   └── index.js
│   ├── CreateAccount
│   │   ├── styles.js
│   │   └── index.js
│   ├── DropzoneHash
│   │   ├── styles.js
│   │   ├── FileComponent.js
│   │   └── index.js
│   ├── InfiniteRegistryTableLoader
│   │   ├── styles.js
│   │   └── index.js
│   ├── InputHash
│   │   ├── styles.js
│   │   └── index.js
│   ├── IssuanceVerifier
│   │   ├── styles.js
│   │   └── index.js
│   ├── RicardianContract
│   │   ├── styles.js
│   │   └── index.js
│   ├── VisualCertificate
│   │   ├── styles.js
│   │   └── index.js
│   └── index.js
│
├── .eslintrc
├── .gitignore
├── .prettierignore
├── README.md
├── prettier.config.js
└── package.json

License

MIT © EOS Costa Rica

This project follows the all-contributors specification. Contributions of any kind welcome!

eosio-components's People

Contributors

adriexnet avatar angelocg97 avatar code-factor avatar fvives99 avatar justincast avatar leisterfrancisco avatar lgtm-com[bot] avatar tetogomez avatar torresmorah avatar xavier506 avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

tetogomez adriexnet justincast apex-brasil minabebawy angelocg97 rewired-one fvives99 hokentech lgtm-migrator

eosio-components's Issues

Standarize Ricardian Component

Ricardian Component is only taking contract standard for both contract and clause but haven't according to next examples:

  1. EOSIO/eosio.contracts
  2. EOSIO/ricardian-spec

Final example format:

"actions": [
  {
    "name": "createpost",
    "type": "createpost",
    "ricardian_contract": "---\ntitle: Create Post\nsummary: Create a blog post \"{{title}}\" by {{author}} tagged as \"{{tag}}\"\nicon: https://app.com/create-post.png#00506E08A55BCF269FE67F202BBC08CFF55F9E3C7CD4459ECB90205BF3C3B562\n---\nI, {{author}}, author of the blog post \"{{title}}\", certify that I am the original author of the contents of this blog post and have attributed all external sources appropriately.\n\n{{$clauses.legalese}}"
  }
],

...

"ricardian_clauses": [
  {
    "id": "legalese",
    "body": "WARRANTY. The invoker of the contract action shall uphold its Obligations under this Contract in a timely and workmanlike manner, using knowledge and recommendations for performing the services which meet generally acceptable standards set forth by EOS.IO Blockchain Block Producers."
  }
]

Ricardian Contracts Renderer

The ricardian contracts renderer used in lifebank is a component that can be reused in many applications. It would be great if we could showcase it on storybook

BP JSON Generator Error

The output of the BP.JSON generator is not validating as it has the wrong types for the location values .

They should be numbers not strings

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.