DEV Community: Andrii Shupta

Connect Polkadot to a Next.js website with @polkadot/extension-dapp

Andrii Shupta — Sat, 17 Dec 2022 09:34:11 +0000

🔗 Links

📰 Published on

🤓 Intro

As a developer, it's essential to understand the differences between various blockchain platforms to choose the right one for your needs. One key difference(as for me) is the availability of technical resources and tutorials for developers. Ethereum has many articles and tutorials demonstrating how to connect a wallet to a website, whereas there is less information available on Polkadot. This may make it easier for developers who are new to Ethereum to get started and learn how to build applications on the platform.

It's important for developers also to be familiar with Polkadot and how to build on its platform, as it has unique features and potential applications.

Developer Experience outside just documentation is quite important nowadays for the web3 community.

In this article, I will show an example of how to connect a SubWallet(that's what I have used) to a Next.js website.

Technology

On Ethereum, we have web3.js and ethers.js for connecting to a website and many different libraries built on top of it. For example, many projects I have seen use wagmi with React.js. It is just a blessing, such as it includes a full list of functionality that you need to have to interact with blockchain: "Connect Wallet" display ENS and balances information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence.

Polkadot has production-ready libraries and tools to work with blockchain, and one of them is @polkadot/extension-dapp. That's what we would use to "Connect Wallet".

🧑‍💻 Coding

We will use the default Next.js app, so nothing is new here. Check out Getting Started to remind yourself of Next.js.

The most crucial point with @polkadot/extension-dapp is that it needs a browser to run, so with Next.js, we need to render the "Connect" button only during Client-Side rendering. For that, we would use dynamic import.

🔗 source code

On the Home page, we load our Connect component dynamically. Connect components are where all magic happens.

🔗 source code

Let's start with imports:

InjectedAccountWithMeta is a type of account that we would get. I imported it for TypeScript.

Our main focus here is web3Enable and web3Accounts .

I have used promise chaining down below, but if you prefer try-catch + async / await - go for it!

`web3Enable`

The initial function is to call even to check if our browser has any wallets to work with. In case we don't have anything to work with, the extension shows it in the console, and we also should throw an error to show the user that he should use the browser with a valid Wallet.

`web3Accounts`

Same with web3Accounts - it would load accounts connected or prompt you to connect to the website if you opened it for the first time - a very familiar experience for web3 users.

You could try out the flow on polkadot-extension-dapp-example | Deployed on Vercel, and it looks like this:

Disclaimer: I have tried only when I have 1 wallet, but for a simple example, it should be enough.

🧑‍🏫 Next steps and more examples

With a connected wallet and available account, you can do everything you want: check out how to create and sign a transaction, show <Identicon/> and more:

https://polkadot.js.org/docs

A more mature example using @polkadot/api , @polkadot/ui-keyring and more is PolkaVerse. It is a decentralized social network built on Subsocial - "The Blockchain for Social Finance".

Also, I have another project where I tried to use Subsocial API - it is raw-raw-raw cause it was fine for me to connect to Subsocial API and Polkadot to experience how things work. Feel free to check it out: https://github.com/andriishupta/subtips-app

Thanks for reading! 🙇

Simplify usage of Lens API with @use-lens and graphql-codegen

Andrii Shupta — Tue, 04 Oct 2022 11:05:21 +0000

🔗 Links

📰 Published on

🤓 Intro

Recently, I have used Lens API to build some playground apps and noticed a repetitive task: I created Lens API Queries and Mutations for every project and used GraphQL Code Generator to use React hooks with Apollo Client.

After 2nd time doing the same job, I decided to create a library for easier use of Lens API that would save me some time to do actual work.

I have never created open-source packages and thought it would be a great experience to do it, even if only I would use it 😅.

npm @use-lens so far contains 2 packages - CLI and react-apollo. Later in this article, I will explain how to use them and when, and the same information could be found in the repo's README.md.
I will explain how I see the best use of @use-lens/* later in the article.

Also, I liked Lens Protocol so much that I have created Github Organization Use Lens, where I plan to develop and publish some tools, examples and apps working on top of Lens.

Technology

Lens Protocol is a composable and decentralized social graph, ready for you to build on so you can focus on creating a great experience, not scaling your users.

Own your content. Own your social graph. Own your data.

If you have read so far - you know what Lens API is and how to use it. If you are here to check out @use-lens or just to check how to generate GraphQL code - educate yourself of Lens Protocol and API here:

🌿 https://docs.lens.xyz.

GraphQL Code Generator - is a tool to build read-to-use code from your GraphQL schema and operations with a simple CLI with a lot of plugins for different frameworks: React, Next.js, Svelte, Vue with Apollo, URLQ and others - you name it.

🧑‍💻 How to

Generate with @use-lens/cli

npm install --save-dev @use-lens/cli
use-lens generate %PACKAGE%

with npx

npx @use-lens/cli generate %PACKAGE%

This would copy essential files of Lens API to your repo and would run graphql-codegen to generate the code. By default, it would go to src/lens-api/index.ts.
From here, you could adjust tsconfig.json to use it with @use-lens shortening, so it would feel like a package usage. More on how to do it here.

With `@use-lens/*`

The simple npm install --save @use-lens/%PACKAGE% and use it as a regular package.

import {
  GlobalProtocolStatsDocument,
  GlobalProtocolStats as GlobalProtocolStatsType,
  useGlobalProtocolStatsQuery,
  useGlobalProtocolStatsLazyQuery,
} from '@use-lens/react-apollo'

Manual GraphQL Code Generator

The default approach is simple and could be followed by official docs here

On high-level:

install @graphql-codegen/cli
pick a plugin for your stack: for example, react-apollo and install it
get your GraphQL Schema and Documents
create basic codegen.yml for graphql-codegen
run graphql-codegen

In your codegen.yml, you should specify schema, documents, where to save, and with what:

schema: schema.graphql # full schema; could be HTTP link
documents: documents.graphql # queries and mutations that you want to have
generates:
  ./src/my-api/index.ts: # where to save
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo # stack that you are going to use

⚠️ CAUTION

🌿 https://docs.lens.xyz/docs/introduction:

This API is beta and not production complete yet, which means that we could change schemas and endpoints at any time without warning or notice to you. When this API is production ready, we will remove this beta warning and will endeavor to ensure that there are no changes going forward unless a major change to the protocol itself is required.

Lens API is not production complete, and so is @use-lens/*. Please, keep this in mind when going to production.

Recommended use

If you want to play with Lens API - don't hesitate and install some of the @use-lens/* packages - it will give you all you need to start.

If you want to have more control - use @use-lens/cli to generate code locally. This would copy essential files that a package contains and would run graphql-codegen.

You would be able to do more with codegen.yml.

👨‍🏫 React with Apollo Client

For @use-lens/react-apollo, I have prepared an example of how to use it.

Check out the source code here

🤝 Lens API Documents

The complete set of Lens API Documents has been taken from api-examples, a repo of Lens Protocol that shows how to use Lens API.
The same (or similar) queries are given as examples in Lens API docs.

📚 Summary

If you would like to use Lens API to see what it is - simplify your developer experience by using @use-lens or GraphQL Code Generator.

Thanks for reading! 🙇

Create Lens Subgraph on The Graph Protocol

Andrii Shupta — Fri, 26 Aug 2022 10:21:20 +0000

🔗 Links

📰 Published on

✨

Initially, I got familiar with TheGraph by contributing to DeveloperDAO to a project that did the same - indexing Lens Protocol.
P.S. This tutorial is NOT copy-paste of existing code, and I created a repository from scratch to understand the basics of TheGraph and how to start. I needed to develop my subgraph to test how events would be indexed.

🤓 Decentralized querying

The Graph is an indexing protocol for querying networks like Ethereum and IPFS. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

Many different tools and APIs help us query blockchain data using centralized API like we used to with web2. My favourites are alchemy and infura.

But, if we want to go decentralized, we must use decentralized tools.

All data is stored and processed on open networks with verifiable integrity. TheGraph makes querying this data fast, reliable, and secure.

Lens

Lens Protocol is a composable and decentralized social graph, ready for you to build on so you can focus on creating a great experience, not scaling your users.

Own your content.
Own your social graph.
Own your data.

With Lens API, we could do everything we want with protocol, but it still includes the web2 principle and has a centralized database for different things built on top of Smart Contract data.

If we want to get actual blockchain data, we need to use a protocol like TheGraph.

Disclaimer: assumption about the centralized part of Lens API is based on the features that Smart Contract has not, for example: "likes" functionality.
I like Lens API very much and would count on it 99.9% of the time as a personal preference, balancing centralized vs. decentralized tooling.

👀 How to create a subgraph

In this tutorial, I will give an example of creating a subgraph using Hosted Service - it will be closed in months. Still, there won't be a difference in coding approaches, just in how it is internally deployed. With the Hosted Service, it was easier to use for testing purposes.

graph init

install graph-cli
run graph init --product hosted-service
follow CLI steps where you need to add protocol, name, and contract address

You will get a generated project. The main entry point is subgraph.yaml.
This is the finished version of my subgraph.

🔗 source code

You can read more on what is subgraph manifest

source block

Indicates from what address to index. Many contracts use Proxy Upgrade Pattern, which helps to fix crucial bugs or update implementation. That is why I have added LensHub ABI(Application Binary Interface) as source ABI and then changed the address to proxy
startBlock - I chose some random block for testing purposes, so it won't start indexing from the start - it takes more time. Usually, this value is omitted or equals the Contract creation's block.

To get ABI, you can:

Copy from Etherscan/Polygonscan whole Contract ABI
Go to remix.ethereum.org, copy the github project, and compile the contract

I went with a 50/50 approach, such as Lens has Events.sol library that is not compiled as part of the main contract.

`graph codegen`

After proper setup, we can run code generation - we will get all types of code to work with.

✨ The Graph has excellent documentation, so follow it and find all answers there. ✨

Mindset shift

As a developer who worked with databases, I started to think linearly: entity created -> entity updated. But events could be indexed from startBlock and in non-linear order in time, so even if we index the event like handleProfileImageURISet, we need to check if the entity existed previously(more in the code example).

To find more tips, TheGraph documentation has a section "defining entities" - it entirely describes what you should think about when creating your schema.

Before defining entities, it is important to take a step back and think about how your data is structured and linked.

Code

As we know - schema and how our data would be created is essential. Let's look at how I have added entity definition:

🔗 source code

Profile is the @entity, including default fields that I took from ProfileCreated event and the posts field, which is an entity relationship

In this case, it is a "One-To-Many" relationship with the usage of the Reverse Lookup approach that TheGraph recommends us using.

For one-to-many relationships, the relationship should always be stored on the 'one' side, and the 'many' side should always be derived. ... will result in dramatically better performance for both indexing and querying the subgraph...

Post is also an @entity. Both have an ID, which should be unique for the subgraph.

In lens-hub.ts are located functions that correspond to events we want to index.

`handle*Created`

As we see, even for a new Post, we check if Profile already exists or not. I discovered the error I got during subgraph deployment and indexing that was saying something like "profile cannot be null" when I just wanted to load Profile to Post.

TheGraph also supports the "merge" approach - this means that if we create a new instance of Profile and it already exists - it is okay cause the subgraph would try to merge fields. I wanted to be the more precise cause in the examples, and I saw that in every place where we wish to create something - we first check if it could be already created.

Example: I have created a Post, and the subgraph knows that Post should have a Profile. Profile event was way before Post, so we don't have a Profile, and we need to create it; even if you could think - "how a Post could be created without a Profile" - it couldn't, but the event about the Post we could get first to index.

🔗 source code

✅ Testing

To check out how it works, you could visit my subgraph: andriishupta/hello-world. It has a pre-defined "Test" query that will give you info for both Profiles and Posts. You could modify it to get more or less information in the query window.

🙇

Thanks for reading!

Generate Dummy Data in Strapi

Andrii Shupta — Tue, 16 Aug 2022 11:27:00 +0000

🔗 Links

github: andriishupta/strapi-generate-seed-data
Strapi's video with a general idea of how to "Generate dummy data"

📰 Also published on

🤓 Motivation

Strapi is powerful open-source headless CMS that helps projects control code customization with extensibility and, at the same time, don't worry about implementing a full-blown Content Management System on their own.

So, after you have set up your Strapi, you want to build Front-End on top of it. You hire front-end developers who are stuck: "Ye, I can query for data via REST and GraphQL, but what data should I see? Could I have an example?"

😬

To avoid this, we would generate example data upfront.

🌱 How to seed data?

"Generate dummy data"

There is the video in Strapi's Video-library that gave me a direction on how to do it.

The idea is simple:

use bootstrap function
use Entity Service API for interactions
generate dummy data with @faker-js/faker

Tip

Your case 💯 would be more complicated, so don't forget that you could take almost everything from Strapi's source code.

The flow:

find a place on Strapi Admin you want to copy
check URL and Network(in developer's inspection) to understand what is called
find code(start with controller) that corresponds to that calls
enjoy

🧑‍💻 Code

We have a simple Todo application(duh) with a Todo collection and a Todo List as a page(single type) that we want to send to the front-end. Also, our Todos has media functionality, so we upload some.

In the bootstrap function, we check for the development environment and decide if we should run seeding or not. Seeding would automatically run on the very first application run(valid when a developer clones an existing repository) and could be re-run with yarn seed to force seed, which clears old and creates new data - FORCE_APP_BOOTSTRAP_ONLY.

🔗source code

Collection Type

To create a todo using Entity Service API, we need to call the create method with data that matches our entity. In the current example and during seeding, I have used "bulk promises" to run requests in parallel cause they are not dependent on each other.

🔗 source code

And using faker, we fill a todo like this:

Single Type

Fulfilling the "Todo List page" is the same as Collection, but keep in mind that it could be only one entry all the time. Also, it contains a Todo relation, so we get five todos to fill it.

🔗 source code

Media Upload

To attach media on a todo, we first need to upload that media and then link its id to the entity. Code has been copied from Strapi's source code, modified, and I just created a helper function.

🔗 source code

Example in Todo:

✅ Results

After opening the Admin panel, you will see generated data.

✨

Initially, I implemented this for Developer DAO's website developerdao.com. Original code is located here(archived and moved to monorepo).

Thanks for reading!

Setup Supabase with Nest.js

Andrii Shupta — Tue, 16 Aug 2022 05:35:50 +0000

❗️⚠️ Disclaimer

This article is created for Supabase v1 and seems not to work with v2 due to the depreciation of some auth methods. I will create a new article for v2 and leave it here. If you have already found a solution — let me know in the comments! Thanks!

🤓 My expectations from You

You know what the Supabase is
You know the Nest.js framework
You will google what is beyond this tutorial if needed

🤔 My use case for using Supabase in Nest.js

I needed a polling mechanism that runs every 1 second and does some action.
As Auth and DB, I have chosen to use Supabase cause I have seen some tutorials and wanted to try it out.

At first, I wanted to use Next.js and Functions to do those operations by Cron Jobs, but it happens to be that the minimal time frame for Cron Job by Github(as the most accessible Cron provider) is only every 5 minutes.

So I switched to the idea of a server(full) app with Nest.js. (want to deploy on Heroku)

🧑‍💻 How to use Supabase and Nest.js

There is one single example of how to use Supabase as Auth library for your Nest.js application, but:

it didn't seem straightforward (actual implementation) to me, and I didn't want to use an external package
it doesn't work as I wanted - it didn't have Supabase Client exposed from within the lib

it is still a good entry if you have never used Passport and need an example - it helped me to understand what to do in my code, so thanks **hiro1107* :)

📑 examples: https://supabase.com/docs/guides/examples

🧑‍💻 Github: https://github.com/hiro1107/nestjs-supabase-auth

So I have decided to implement my way for Auth and Client.

Could we use Supabase on the Node.js back-end?

In general, like Firebase, Supabase is a client-side tool that works from the client-side by providing the "anon" user with Row Level Security Policies, but it doesn't force us to use Supabase only on the client-side.

With some rules, we can freely leverage the power of Supabase in our Node.js Server.

🍴 Supabase basic setup

There are a few key points that I want to mention before the code.

RLS Policies

Enable it when you create tables

I recommend creating two by default:

"anon" is rejected by default for ALL actions
ALL actions are only could be done by auth.uid(), if your app is "user-oriented"

`user_id`

To make your application work with previous policies, don't forget to create the user_id column on each table that you use: it should be NOT null auto-generated auth.uid() field, so in this way, Supabase will always append the correct user to a row.

You can bypass RLS with Service Keys if needed, but be careful.

🐱 Nest.js application

Installs

To make this work, we need to add a few libs in addition to Supabase:

npm i passport passport-jwt @nestjs/passport @supabase/supabase-js

passport - handles everything related to Auth, does it magic that we don't need to care about

passport-jwt - has a ready-to-use Strategy for JWT Auth

@nestjs/passport - Nest.js's module for Passport

How JWT Auth works with Passport

How JWT Auth works go beyond this article, but there are plenty of explanations for using Passport and passport-jwt in Nest.js. You can start by checking Nest.js's Authentication.

What we need to know for our case: Supabase is JWT-based authorization, which handles everything on its side. On our side, we need to have the correct SUPABASE_JWT_SECRET, which is used to decode JWTs. (located in Settings -> API)

Supabase folder

🔗 Link to folder

This is the main code you could copy to your code base, and it will just work. The module is a regular Nest.js module. Other files deserve a deeper look.

Strategy

Passport has a rich ecosystem of strategies that implement various authentication mechanisms. While simple in concept, the set of Passport strategies you can choose from is large and presents a lot of variety

Such as Supabase is JWT, we will use a ready-to-use passport-jwt strategy that does all decoding and other things for us.

In this code, we extend PassportStrategy with JWT Strategy and pass config in the super call.

strange "extend" PassportStrategy(Strategy) is TypeScript Mixins

🔗 source-code

Guard

With this guard, I have protected the whole application by providing APP_GUARD in app.module.ts - a global way of guarding. You could use UseGuard for routes that need to be protected.

Here we extend AuthGuard with the jwt strategy(this is how passport-jwt named Strategy under the hood). Easy.

🔗 source-code

Service: `Scope.REQUEST`

This service will createClient for every request and setAuth, so we will have the correct user during all following service calls. Code implemented in "Singleton" manner so we will get the same instance in different places during the same request.

🔗 source-code

Why?

Here comes an interesting part that happens with different libraries that hold client-side states:

If we use client-side libs that hold state per user, on server OR SSR apps like Next.js, we need to be careful with those, such as it could be that when we create an instance of a library, it could become available for everyone who calls server/SSR apps.

That is why it is essential to use @Injectable({ scope: Scope.REQUEST }) so our Supabase createClient will be created per request, and we will set auth correctly.

Another example: Next.js & SSR with react-query

Disclaimer: I haven't tested it for multiple users yet, but I am pretty sure about it.
I haven't found other ways to pass Auth with one Client in docs by appending access_token - only setAuth to Client directly.

Possible solution: Supabase could tweak auth flow, where with a unique setup, we can pass users in each request. With the Passport, we have the user in req.user and can still access the Authorization header for access_token.

📭 Testing with Postman

After everything is finished - let's try to call our server.

As expected, we get a 401 code - this is passport.js does it check for JWT in our SupabaseGuard

Let's now get a valid access_token and repeat the call:

💪 💪 💪

access token available after you log in with a user. In my case, I have just sent "Magic Link" and got acces_token from the URL

📋 Summary - TL;DR;

install required dependencies
copy supabase folder to your project
add 3 SUPABASE_* variables to .env
import supabase.module: in app.module / @global() auth.module / etc.
provide global APP_GUARD or use it where you need it with UseGuard
use supabase.ts in other services by this.supabase.getClient() for Supabase calls

🔗 Links

Github: https://github.com/andriishupta/nestjs-supabase-setup
Nest.js's Authentication, including JWT with Passport.js
How to use Guards in Nest.js
Supabase's Auth example app with Nest.js
Supabase's docs
Link to Medium's copy of the article

Thanks for reading!

Cross-Origin iframe communication with Window.postMessage

Andrii Shupta — Tue, 16 Aug 2022 05:19:00 +0000

🤔 Why do we need cross-origin iframe communication?

Imagine that you need to integrate with the "3rd party service" that would be used as part of your application.

Both of your companies are just start-ups, and we don't have a complete variety of tools that will make our lives easier, so we choose iframe as the first option. We must integrate what we have now for the beta version. After that, we will refactor the code and will use edge technologies, as our manager promised(😉)

Their app(as an example) could show private information, possibly, some real-time bank details / shipping / trading details, and only available after user authorization.

🤓 What could be a better solution?

The best version of integration(IMHO) would be to get a react library with components, hooks, utils, etc., that will do everything for us. For example, check out React Stripe.js Components. Second best - take an Open API(example Stripe API) and implement our own components.

🤨 What are we going to build?

💭 Idea summary

As the Parent app, we want to login within the iframe with some token, so the iframe could show relative information. Every N mins(5 secs in this case), our token would expire, and the iframe needs to request another. As a bonus, we can change a theme from dark to light, which could happen from both sides.

Mostly I would list code that is only related to the iframe and Web API part and won't focus on things like an app creation or an explanation of "how to deploy to Vercel".

The Parent and the Child apps would be our actual implementation of what we need. For the front-end, we are going to use Next.js and Chakra-UI for components. We would deploy apps on Vercel and Netlify(to be truly cross-origin).

Also, I would use Nrwl Nx's workspaces to have monorepo, keeping run/build processes seamless.

👨‍💻 Code(skip to this if you don't want to read the Intro)

🤖 "The Communicator."

🔗 https://iframe-communicator.vercel.app

🔗 Github: https://github.com/andriishupta/iframe-communicator

It is a "special" app you could use for real-world testing to see how messaging works in your app.

🧑 Parent code

🔗 link to the deployed app

🔗 source code is available for copying here

As for the Parent app, we will surely have iframe rendered on our side. Let's start from it:

iframeRef is our React.js reference to the DOM element, so we can later use it
onLoad - this would send my initial token

Next: how we send the message is Window.postMessage

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

const postMessage = (message: Message) => {
    iframeRef.current.contentWindow.postMessage(message, CHILD_APP_URL); // OR use '*' to handle all origins
};

postMessage takes a message: Message as the argument - it is our own message kind that we selected and agreed with the Child app to pass through:

The data is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.

To send actual message we are using iframeRef.current.contentWindow as our targetWindow(from documentation) and the function's second parameter is targetOrigin:

Specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string "*"

I know my targetOrigin, so I am passing it and suggesting you not neglect security risks.

Last but not least, we want to listen to messages from the Child!

Security and filtering: we accept only our messages that we are sure in

// skip other messages for security reasons and avoid extensions alerts in console
if (event.origin !== CHILD_APP_URL) {
  return;
}

Now, let's get the data from the MessageEvent and do some checks and act by business logic:

if (message?.type === 'token-expired-from-child') {
  ...
} else if (message?.type === 'theme-from-child') {
  ...
} else {
  //  in case of some random message
}

*for more options this code could be improved with switch/case(who likes), ternary operator, or object literals.

Finish up by adding a listener and return a callback for removal, so when a component goes down, you navigate to another page, where you don't need to listen for an iframe.

window.addEventListener('message', handler);
return () => window.removeEventListener('message', handler);

👶 Child code

🔗 link to the deployed app

🔗 source code is available for copying here

The approach is the same for the Child app, with a twist of where to call postMessage - window.parent.

And listening to the messages differs in type.

🔗 Links

🎨 Parent app: https://cross-origin-iframe-communication-with-nextjs-parent-app.vercel.app

👨‍💻 Github: https://github.com/andriishupta/cross-origin-iframe-communication-with-nextjs

🤖 "The Communicator": https://iframe-communicator.vercel.app

👨‍💻 Github for "The Communicator": https://github.com/andriishupta/cross-origin-iframe-communication-with-nextjs

📝 Summary

Cross-Origin iframe communication could come in quite handy in specific situations, and we totally could take advantage of two-way messaging to make that even more dynamic. Check for yourself by clicking the examples.

Thanks for reading!

DEV Community: Andrii Shupta

Connect Polkadot to a Next.js website with @polkadot/extension-dapp

🔗 Links

📰 Published on

🤓 Intro

Technology

🧑‍💻 Coding

web3Enable

web3Accounts

🧑‍🏫 Next steps and more examples

Simplify usage of Lens API with @use-lens and graphql-codegen

🔗 Links

📰 Published on

🤓 Intro

Technology

🧑‍💻 How to

Generate with @use-lens/cli

With @use-lens/*

Manual GraphQL Code Generator

⚠️ CAUTION

Recommended use

👨‍🏫 React with Apollo Client

🤝 Lens API Documents

📚 Summary

Create Lens Subgraph on The Graph Protocol

🔗 Links

📰 Published on

✨

🤓 Decentralized querying

Lens

👀 How to create a subgraph

graph init

source block

graph codegen

Mindset shift

Code

handle*Created

✅ Testing

🙇

Generate Dummy Data in Strapi

🔗 Links

📰 Also published on

🤓 Motivation

🌱 How to seed data?

"Generate dummy data"

Tip

🧑‍💻 Code

Collection Type

Single Type

Media Upload

✅ Results

✨

Setup Supabase with Nest.js

❗️⚠️ Disclaimer

🤓 My expectations from You

🤔 My use case for using Supabase in Nest.js

🧑‍💻 How to use Supabase and Nest.js

Could we use Supabase on the Node.js back-end?

🍴 Supabase basic setup

RLS Policies

user_id

🐱 Nest.js application

Installs

How JWT Auth works with Passport

Supabase folder

Strategy

Guard

Service: Scope.REQUEST

📭 Testing with Postman

📋 Summary - TL;DR;

🔗 Links

Cross-Origin iframe communication with Window.postMessage

🤔 Why do we need cross-origin iframe communication?

🤓 What could be a better solution?

🤨 What are we going to build?

💭 Idea summary

👨‍💻 Code(skip to this if you don't want to read the Intro)

🤖 "The Communicator."

🧑 Parent code

👶 Child code

`web3Enable`

`web3Accounts`

With `@use-lens/*`

`graph codegen`

`handle*Created`

`user_id`

Service: `Scope.REQUEST`