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

agorapp-react-utils-test

v1.0.5

Published

[![NPM version][npm-image]][npm-url] [![Build][github-build]][github-build-url] ![npm-typescript] [![License][github-license]][github-license-url]

Downloads

1

Readme

AgorApp Web3 IDE Editor

NPM version Build npm-typescript License

The AgorApp Web3 IDE Editor can be seamlessly integrated into partner websites with this package.

Live Demo

Installation:

pnpm add agorapp-react-utils-test

or

yarn add agorapp-react-utils-test

Basic usage:

Add EmbeddedEditor to your component:

export const YourComponent = () => {
  return (
    <EmbeddedEditor
      aspectRatio={'4:3'}
      courseSlug={'solidity'}
      lessonSlug={'optimized-array-sum'}
    />
  )
}

courseSlug

The courseSlug parameter specifies the course that the IDE should open. The value of the parameter is the slug of the course.

lessonSlug

The lessonSlug parameter specifies the lesson that the IDE should open. The value of the parameter is the slug of the lesson.

Customizing the appearance of the IDE

You can customize the behavior of the IDE by specifying parameters to <EmbeddeedEditor />.

  <EmbeddedEditor
    ref={ref}
    aspectRatio={'4:3'}
    courseSlug={'solidity'}
    lessonSlug={'optimized-array-sum'}
    brand={'rareSkills'}
    hideTheory={true}
    style={{ border: '1px solid orange', borderRadius: '15px' }}
  />

aspectRatio

Supported values: 16:9, 4:3, 3:2, 1:1. If no value is specified, the component will adjust to the size of the parent.

brand

Supported valued: agorapp, rareSkills. If no value is specified, the default value is agorapp.

hideTheory

You can hide theory panel by setting hideTheory to true.

style

You can customize the appearance of the IDE by specifying the style parameter. The style is applied to wrapper of <iframe /> element.

Advanced usage - MetaMask integration

AgorApp IDE can be integrated with MetaMask wallet.

Based on a prior agreement with AgorApp, you can transfer information about your user to the IDE, in order to match the solution with the user later.

Communication is based on Window: postMessage() method.

IDE verify the user by requiring him to sign the messages sent to AgorApp iframe with his MetaMask wallet.

Sample code to pass the MetaMask towards the IDE.

export const YourComponent = () => {
  const ref = useRef<HTMLIFrameElement | null>(null)
  const publicKey = 'PUBLIC_KEY_OF_THE_USER'
  
  const { setIdentity } = useEmbeddedEditorMessage(
    async (message: AgorAppMessage) => {
      switch (message.type) {
        case 'ready':
          console.log(`AgorApp IDE is ready`)
          setIdentity('metamask', publicKey)
          break
        case 'sign-request':
          console.log(`AgorApp IDE requires sign-request: `, message)
          // your code to sign the message
          break
      }
    },
    { ref },
  )
  
  return (
    <EmbeddedEditor
      ref={ref}
      aspectRatio={'4:3'}
      courseSlug={'solidity'}
      lessonSlug={'optimized-array-sum'}
    />
  )
}

Message format

Each message from Partner to AgorApp will follow the following structure:

{
  "type": "<message type>",
  "payload": "<message>",
  "signature": "signature of the message"
}

To sign the message with MetaMask wallet, Partner will sign message:

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = await provider.getSigner();
const signature = await signer.signMessage("<message>");

Message flow

This section describes what the typical interaction between AgorApp and Partner will look like:

  1. User goes to the Partner website that embeds AgorApp iframe.
  2. AgoraApp iframe sends a ready message to the Partner window:
{
  "type": "ready"
}
  1. Partner window creates payload with user identity. Partner window sends the message to the AgoraApp iframe. Note that this message is not signed with the MetaMask wallet.
{
  "type": "set-identity",
  "payload": {
    "action": "set-identity",
    "type": "metamask",
    "value": "<metamask public key>"
  }
}
  1. AgorApp iframe remembers the user identity and will apply it to the messages it wants to verify from Partner.
  2. User submits a solution in the AgorApp iframe.
  3. AgoraApp iframe sends a message to the Partner window for signing:
{
  "type": "sign-request",
  "payload": {
    "action": "submit-solution",
    "identity": {
      "type": "metamask",
      "value": "<metamask public key>"
    },
    "solution": "<solution>"
  }
}
  1. Partner window will sign payload with the MetaMask Wallet and get the signature of the message:
{
  "type": "sign-response",
  "payload": {
    "action": "submit-solution",
    "identity": {
      "type": "metamask",
      "value": "<metamask public key>"
    },
    "solution": "<solution>"
  },
  "signature": "<signature of the payload>"
}
  1. This signed message is sent back to the AgorApp iframe. AgoraApp backend verifies the signature, evaluates the solution and stores the result in the leaderboard.

Payload

The payload in the examples above is presented as JSON for readability. In reality, payload will be a string. The real message will look something like this:

{
  "type": "set-identity",
  "payload": "{\"action\": \"set-identity\", \"type\": \"metamask\", \"value\": \"<metamask public key>\"}",
  "signature": "<signature of the payload>"
}