search

onflow / flip-fest

A backlog of all the available tasks to complete for Flow's FLIP Fest.
50 stars 39 forks source link

Non-React FCL Usage: dapp example #23

Open srinjoyc opened 3 years ago

srinjoyc commented 3 years ago

👋   If you are interested in working on this issue, please check out the Getting Started guide on HackerEarth!

Description (Problem Statement)

While using FCL is possible in non-react example, we do not have many examples in the community of this usage. There are some issues with installing the FCL package directly due to packages used to support GRPC. This issue is to have teams work on examples that demonstrate usage of FCL in a full-stack example dapp in similar complexity to our other popular community example, Kitty Items and CryptoDappy.

Valid front-end frameworks are:

Experience Required

Minimum Feature Set (Acceptance Criteria)

Appropriate usage of all FCL APIs

Effective use of state management

Well Documented & Optimized for Learning

Extension (Optional) Feature Set

Usage of other community tools

Milestone Requirements

  1. A full stack dApp that can demonstrate FCL usage with clear documentation and usage patterns that meet the above requirements.

Software Requirements

Maintainability

Testing

Other Requirements

Documentation

Code standards or guidelines

Judging Criteria

Resources

10thfloor commented 3 years ago

Hello there. Mackenzie here. 🏄🏼‍♂️ I'm part of the Developer Experience team at Flow. Glad you're checking out this issue. I can help answer any questions you might have about what you see here, and if you decide to take this on, I'll be your primary point of contact for you or your team.

Please add your comments/questions here, or find me on the Flow Discord (mack)

Happy hacking! 🚀

amitkothari commented 3 years ago

Hi @10thfloor, I would like to work on this issue and build a dapp example using Svelte. Here is the team's Hacker Earth profile - https://www.hackerearth.com/challenges/hackathon/flip-fest/dashboard/3dca8c7/team/ 😄

10thfloor commented 3 years ago

Excellent! Do you have an idea for what functionality you might want to include?

amitkothari commented 3 years ago

I am thinking of building a demo app, similar to the other community examples, that will demonstrate how to deploy contracts, integrate wallets, and mint NFTs.

I have few initial ideas, will finalize and post more details soon :)

10thfloor commented 3 years ago

Great. FYI, FCL is not compatible out-of-the-box with svelte-kit.

Take a look at this project for an example of how to start with Svelte and FCL: https://codesandbox.io/s/fcl-svelte-wc3wb?file=/Hello.svelte.

The thing to notice here is the use of Rollup, and Rollup plugins required to work with FCL.

amitkothari commented 3 years ago

Thanks a lot, I had some issue with Rollup but got Svelte and FCL working with webpack. I will follow this example and get the demo working with Rollup :)

10thfloor commented 3 years ago

@amitkothari Actually, I'd suggest sticking with Webpack.

Some others are exploring Svelte as well, and were not able to make the Codesandbox example work without replacing Rollup with Webpack.

amitkothari commented 3 years ago

Thanks @10thfloor , I will continue with webpack then.

I am working on a demo similar to crypto dappy with similar smart contract, authentication, scripts & transactions to interaction with flow blockchain. I will try and get the basic app working soon.

ic3guy commented 3 years ago

I'm looking into getting an Angular 12 example up and running. I've built off of https://github.com/onflow/fcl-js/issues/506 and I think I've nailed down the issues regarding buffer/process/http/https using a custom webpack config to implement the node polyfills rather than manually doing it in the polyfills.ts file.

amitkothari commented 3 years ago

@ic3guy I am also using custom webpack config for Svelte demo app.

ic3guy commented 3 years ago

This is what I needed to use in Angular 12 / Webpack 5.

Angular used to provide built-in polyfills, Webpack 4 did as well for node core calls. Here we are telling webpack that we actually do need these node specific polyfills.

While the Angular team says that anything running in an Angular app shouldn't rely on node specific calls, we have no choice due to the third party dependencies that rely on some node specific stuff. The stream-http and https-browserify to me seem to be ok to use in the browser, even if it isn't canonical Angular use.

In a custom-webpack.config.ts file:

const webpack = require('webpack')

module.exports = { 
    plugins: [
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
            process: 'process/browser'
        })],
    resolve: { 
        fallback: { 
            "http": require.resolve('stream-http'),
            "https": require.resolve('https-browserify'),
            "buffer": require.resolve('buffer'),
            "process": require.resolve('process/browser')
        } 
    }
}

along with a global window polyfill in polyfills.ts

(window as any).global = window;

To use a custom webpack config one must

npm install stream-http https-browserify buffer process @angular-builders/custom-webpack

In angular.json

"architect": {
        "build": {
         \\"builder": "@angular-devkit/build-angular:browser", 
         "builder": "@angular-builders/custom-webpack:browser"
         ...
          "options": {
          ...
            "customWebpackConfig": {
              "path": "./custom-webpack.config.ts"
            },
            "allowedCommonJsDependencies": [
              "buffer",
              "@improbable-eng/grpc-web-node-http-transport"
            ]
          }
...
 "serve": {
        // "builder": "@angular-devkit/build-angular:dev-server",
            "builder": "@angular-builders/custom-webpack:dev-server",

The allowedCommonJsDependencies is telling angular that we know what we are doing. Again it would be great if those third party dependencies didn't use CommonJS but we are a little stuck here. The Angular docs claim that bundle sizes could be larger, but for a proof of concept, I'm ok with doing this.

bluesign commented 3 years ago

If anyone is using svelte / rollup, made a successful rollup config : https://github.com/bluesign/fcl-svelte-rollup/blob/main/rollup.config.js

WonderTaxLLC commented 2 years ago

Very excited about Flow and Cadence!

Working on an Angular 12 version of CryptoDappies. Thank you @ic3guy for your sleuthing on the node/gRPC issue.

Team Name: WonderTax

Team Members: me

Timeline: Shouldn't be too long.

ic3guy commented 2 years ago

I'm not sure if I'll have a full fledged Crypto Dappy example working, but I am working on an Angular 12 example as well.

Right now I am working on encapsulating the FCL api and exposing more Angular-y (rxjs based) endpoints.

Team Name: Will's Team Team Members: @ic3guy Timeline: I'm not sure if I'll actually submit something in the end, but in either case I think my work will be valuable to someone. Happy for others to cherry pick from my repo.

So far I've got authentication working. I forward the results of the .subscribe() call to a ReplaySubject() which is easier to work with async pipes.

10thfloor commented 2 years ago

@ic3guy Any updates this week?

ic3guy commented 2 years ago

Work is ongoing. Got a bit sidetracked because I wanted to understand the cadence code a little better.

I've got account initialization status and initialization implemented. Also retrieving owned kitty items.

I think it might be worthwhile now instead of doing more of the actual buy/sell interface, get some unit/integration tests done using the default Angular test framework (karma).

kimcodeashian commented 2 years ago

Good day @amitkothari, @ic3guy!

Thanks so much for all your hardwork & participation. In order to finalize winners & prepare for prize payout, we'll need the following actions from your end.

Please provide the following information by Nov 17, 2021, (in this GH Issue is fine):

1. Team Information

🎖IMPORTANT: We will only proceed with prize payouts once all members have confirmed with 👍 on the post.

2. Video Demo (optional)

We will be hosting Closing Ceremonies on November 23rd, 8AM PT where we'll having closing remarks from Dete & will be announcing the winners! I'll share the details here before Nov 17.

amitkothari commented 2 years ago

Thanks @kimcodeashian

Here is the information for team enouvo

Team members

Amit Kothari

ic3guy commented 2 years ago
kimcodeashian commented 2 years ago

Hey folks,

We've received and reviewed over 82 submissions! What an amazing community on Flow! To commemorate all the hard work done, we have finalized winners and will be announcing them during our Closing Ceremony on Nov 23rd, 8AM PT. Be sure to join us - there may be some attendance prizes & a keynote from our CTO, Dete 😉!

RSVP here so you don't miss out! See you then!