Donation for open source pull request

• 

  App integration

• 

  Donation home page

• 

  Donation Page for a Pull Request

• 

  Pull request changes

Inspiration

For many years, open-source projects have played a vital part in the revolution that we have been enjoying. However, the community behind those works is mostly doing it voluntarily without any pay. One example, and is also among my favorite is Sequelize where they have to resort to donations like OpenCollective.

Since most of the open-source projects are hosted on Github. This makes it a suitable platform for us to build solutions on top of it as an extension to the project submission that I did for another hackathon XRP Donation App.

Foremostly, the app uses a lot of GraphQL, Rest API, and library to connect to various endpoints such as Github, Ripple server, and MongoDB. I felt that given that Stepzen helps to connect the GraphQL to various endpoints, it is suitable to refactor the existing code to make it work with Stepzen.

Functionality

This app aims to address the pain of the open-source project maintainers to receive donations for the work they put in for the open-source project.

By leveraging the Github Action to listen to the event trigger, this XRP Donation Action facilitates by updating the relevant link and status of the donation within in Pull Request(PR). This includes providing an external link to the XRP donation page and updating the status label in the PR accordingly.

Goals and Approach

For this hackathon, we aim to refactor the front-end app (XRP Donation App to use Stepzen API as the proxy to call all the other platforms and services API that is needed by the app. This includes the connection to Github, Ripple Server, and Mongo DB.

Since we are able to retain a similar core functionality. The apps should work as expected on the front-end user view. PS: As predicted, it is.

The approach is straightforward. Follow the get started guide, and modify as needed. As you see in the graphql-01 folder, we are able to expand to 3 separate schemas of individual services of its own. Then use the GraphQL explorer to tune and make changes so that we have all the API we need in the app to make it work.

Finally, refactor the code with to call the GraphQL through the helper function.

export default async function stepzenRequest(query: string) {
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `apikey ${STEPZEN_ADMIN_KEY}`,
  };

  const data = await axios.post(STEPZEN_URL, { query }, { headers });  
  return data.data.data;
}

Outcomes

As observed from this commit. We have managed to make the front-end code looks cleaner. The backend variable only requires us to key-in Stepzen Admin Key and Url. As long as the URL is deployed, we can save the effort of configuring the API key for other services that is needed by Stepzen.

We also enjoyed the benefit of querying information from multiple sources with just an API call. This makes the code so much more readable.

  const query = `query {
    github_repository(name: "${repo}", owner: "${owner}") {
      pullRequest(number: ${prid}) { id }
    }
    mongo(
      filter: ${({ repo, owner, prid })}
    ) { _id network owner repo prid txid amount }
    xrp: ripple_tx(
      server: "${networkUrl}"
      txid: "${txid}"
    ) { Account Amount }
  }`;

  const mutation = `mutation {
    insertMongo: mongoInsertOne(
      document: ${insert}
    )
    github_addComment(input: {subjectId: "${pullRequestId}", body: "${commentBody}"}) {
      subject { id }
    }
  }`;

Built With

• github
• nextjs
• react
• stepzen
• xrpl