Nomming Peanut M&M's

    @ricardianfabric/react-components
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    Ricardian Contract React Component

    This is react dependency used for rendering ricardian contracts inside react application.

    The dependency allows you to use any component framework and render the ricardian contract directly into your application1

    You can find the example here: https://github.com/Ricardian-Fabric/Ricardian-Contract-React-Component-EXAMPLE

    The Ricardian contract exposes the following interface:

        <RicardianContract
            LoadingIndicator={<ProgressIndicator />}
            arweaveTx='ARWEAVE_TRANSACTION_ID'
            AcceptButton={<button>Accept</button>}
            signingSuccessCallback={() => { 
                // Do something when contract is accepted 
            }}
            signingErrorCallback={(msg) => {
                // Handle errors, the msg contains the eror message
            }}
            provider={PROVIDER}
            useReverseGeocoding={true}
        ></RicardianContract>
    

    Interface

    export interface RicardianContractProps {
        arweaveTx: string,
        provider: provider,
        LoadingIndicator: React.ReactNode,
        useReverseGeocoding: boolean,
        AcceptButton: React.ReactNode,
        signingSuccessCallback: SigningSuccessCallback,
        signingErrorCallback: SigningErrorCallback,
    
    }
    

    LoadingIndicator

    You can pass in any JSX element to render as loading indicator while the contract is loading

    arweaveTx

    The transaction ID of the Arweave transaction containing the Ricardian Contract. You can get this from Ricardian Fabric

    AcceptButton

    Pass in any button element to render. The Ricardian Contract component will overlay this button element and listen for click events on the overlay so any component will do.

    signingSuccessCallback

    Pass in any function to call when a contract has been accepted

    signingErrorCallback

    Pass a callback to this prop, It will be called when errors occur

    provider

    The Provider is a valid web3 provider from web3-core. For example you can use window.ethereum. The component uses this provider to initialize web3.js internally.

    useReverseGeocoding

    The built in decentralized reverse geocoder is useful for blocking countries from signing the app, but only client side. You can determine the location of a browser from the coordinates from the geolocaiton API.

    Example

    You can find the working example here:

    Development

    When developing you can link this dependency using npm link to an external application created with create-react-app.

    When making changes run npm run build to rebuild the dependency and it will refresh in the other react project too

    You might run into this error:

    Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    
        You might have mismatching versions of React and the renderer (such as React DOM)
        You might be breaking the Rules of Hooks
        You might have more than one copy of React in the same app See react-invalid-hook-call for tips about how to debug and
    
    fix this problem
    

    I was able to fix this by making my app and library point to the same react (package) location.

    Below are the steps I followed :

    1. In Your Application: a) cd node_modules/react && npm link b) cd node_modules/react-dom && npm link

    2. In Your Library a) npm link react b) npm link react-dom

    3)Stop your dev-server and do npm start again.

    This Error Does not appear when importing the dependency from NPM.

    Bug Reports

    Please open an issue if you find any problems with this dependency so it can be resolved ASAP. Thank!

    Install

    npm i @ricardianfabric/react-components

    DownloadsWeekly Downloads

    1

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    147 kB

    Total Files

    17

    Last publish

    Collaborators

    • strawberrychocolatefudge