Polkadot_Web_UI_Delivery

[morgueye4]

Milestone Delivery Checklist

• The milestone-delivery-template.md has been copied and updated.
• The invoice form 📝 has been filled out for this milestone.
• This pull request is being made by the same account as the accepted application.
• In case of acceptance, the payment will be transferred to the BTC/ETH payment address provided in the application.
• The delivery is according to the Guidelines for Milestone Deliverables.

Link to the application pull request: w3f/Grants-Program#252

[alxs]

Thank you for the delivery @morgueye4. Could you please structure the deliverables tables as in your application? Please include all deliverables along with a link to where they've been implemented.

[morgueye4]

Thank you for the delivery @morgueye4. Could you please structure the deliverables tables as in your application? Please include all deliverables along with a link to where they've been implemented.

You welcome @alxs . I have updated the Delivery file and done cleanup of redundant information.

[Noc2]

Thanks for submitting your milestone. I started to look into your delivery, but I immediately ran into a few issues. Could you please take a look at the document and try to fix these issues? Also it would be nice if you could fix the formatting of the delivery documentations and link to both repos, in case it’s relevant.

[morgueye4]

Thanks for submitting your milestone. I started to look into your delivery, but I immediately ran into a few issues. Could you please take a look at the document and try to fix these issues? Also it would be nice if you could fix the formatting of the delivery documentations and link to both repos, in case it’s relevant.

Thanks @Noc2 for the feedback.
Updating.

[Noc2]

Thanks. Let me know, once I should take another look at it.

[morgueye4]

Thanks. Let me know, once I should take another look at it.

Hello @Noc2 I have curated and updated the document you can have a look.

[Noc2]

Thanks. I just took another quick look at it, but I immediately did run into issues, when I tried to follow your tutorial, see https://github.com/w3f/Grant-Milestone-Delivery/blob/master/evaluations/Polkadot_Web_UI_1_Noc2.md#general-notes Also the following seems to be missing: “The code will have unit-test coverage (min. 70%) to ensure functionality and robustness. In the guide we will describe how to run these tests”

[morgueye4]

Thanks. I just took another quick look at it, but I immediately did run into issues, when I tried to follow your tutorial, see https://github.com/w3f/Grant-Milestone-Delivery/blob/master/evaluations/Polkadot_Web_UI_1_Noc2.md#general-notes Also the following seems to be missing: “The code will have unit-test coverage (min. 70%) to ensure functionality and robustness. In the guide we will describe how to run these tests”

Hi @Noc2

Thanks for the remarks.

For the polkadot-angular-identicon before use in an application make sure you have the angular cli installed.

For the polkadot-web-identicon ,
I have also added the inline documentation for the render-helper.ts function which contains the logic and also updated the unit test guide.

Also the polkadot-web-identicon is based on the polkadot-angular-identicon

[Noc2]

Thanks for the update. However, could you clarify the import section: https://github.com/RidOne-technologies/polkadot-angular-identicon#install-polkadot-angular-identicon-npm-dependency I still wasn’t able to follow your tutorial and when I tired instead to run your example, I got the following errors https://github.com/w3f/Grant-Milestone-Delivery/blob/master/evaluations/Polkadot_Web_UI_1_Noc2.md#general-notes Also I wasn't able to run the unit tests (see error list).

Btw. As you can see in this rather long list of errors, I have angular cli installed. In general please make sure to test everything on your side before you submit the milestone. Things like “npm i polkadot-angular-dependency” instead of “npm i polkadot-angular-identicon” can be easily avoided this way.

[mmagician]

@morgueye4 Any updates here?

[morgueye4]

@morgueye4 Any updates here?

HI @mmagician, I will make an update this week for the latest feedbacks from @Noc2 .

[morgueye4]

@mmagician You can check the readme.md and build.md of the projects are updated.
Please make sure also to have angular cli installed in your machine. Let me know if you have any question.

[mmagician]

@morgueye4 I'm still running into exactly the same errors as mentioned in @Noc2 's evaluation when running:

• npm i polkadot-angular-identicon
• ➜ ~/dev/polkadot-angular-identicon git:(main) npm test

Please make sure you fix these errors before submitting another update to us, otherwise we are wasting time on our side looking at the same errors again, which as @Noc2 mentioned, could be easily avoided. Please address the problems found within the next 2 weeks, else we will terminate the grant, since it fails to meet the deliverables set out in the original application while and also being overdue by over 5 months now.

[morgueye4]

@morgueye4 I'm still running into exactly the same errors as mentioned in @Noc2 's evaluation when running:

• npm i polkadot-angular-identicon
• ➜ ~/dev/polkadot-angular-identicon git:(main) npm test

Please make sure you fix these errors before submitting another update to us, otherwise we are wasting time on our side looking at the same errors again, which as @Noc2 mentioned, could be easily avoided. Please address the problems found within the next 2 weeks, else we will terminate the grant, since it fails to meet the deliverables set out in the original application while and also being overdue by over 5 months now.

@mmagician @Noc2 Just wanted to make things a little bit clearer.

I have tested multiple times before what I made and tested it with other people successfully before.

You can terminate the grant if you prefer, but I have tested what I delivered before and retested it.

I now also created videos and posted to youtube replicating what I have written on the readmes or build files for reference polkadot angular identicon

https://www.youtube.com/watch?v=wFVb6Tv_SD4&list=PL6LNCb4qhT7lRU1hsGeOvu4f6U8kgi7_r

polkadot web identicon

https://www.youtube.com/watch?v=R4bQBFDy7no&list=PL6LNCb4qhT7m9ncir3JFvA4QkrsWjWjbQ

or

https://www.youtube.com/channel/UCFHZ6BTuAvmnAL80MTQpDJA/videos

[mmagician]

@morgueye4 Thanks for the clear videos.
I have tried again, now using a version of node (14.18.0) that's compatible with newest angular (12.2.8) and the test has worked 👍🏼
However, when installing your package on a new project, I needed to use the --force option, or else I was getting the errors as outlined in the evaluation before, I'm posting below again for reference. Maybe it's my local setup, I'm not sure, but seeing that I got the same error as @Noc2, perhaps it's a more common issue?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: pai2@0.0.0
npm ERR! Found: @angular/common@12.2.8
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~12.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^11.2.9" from polkadot-angular-identicon@1.0.2-rc2
npm ERR! node_modules/polkadot-angular-identicon
npm ERR!   polkadot-angular-identicon@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

---

Anyway, after npm i polkadot-angular-identicon --force, I followed your instructions regarding the configuration, but couldn't get the app to run with ng serve, I'm stuck on the following two errors:

Error: node_modules/polkadot-angular-identicon/node_modules/@angular/platform-browser/platform-browser.d.ts:703:5 - error TS2416: Property 'supportsDOMEvents' in type 'ɵangular_packages_platform_browser_platform_browser_o' is not assignable to the same property in base type 'ɵDomAdapter'.
  Type '() => boolean' is not assignable to type 'boolean'.

703     supportsDOMEvents(): boolean;
        ~~~~~~~~~~~~~~~~~


Error: node_modules/polkadot-angular-identicon/node_modules/@angular/platform-browser/platform-browser.d.ts:703:5 - error TS2425: Class 'ɵDomAdapter' defines instance member property 'supportsDOMEvents', but extended class 'ɵangular_packages_platform_browser_platform_browser_o' defines it as instance member function.

703     supportsDOMEvents(): boolean;
        ~~~~~~~~~~~~~~~~~

[morgueye4]

@morgueye4 Thanks for the clear videos. I have tried again, now using a version of node (14.18.0) that's compatible with newest angular (12.2.8) and the test has worked 👍🏼 However, when installing your package on a new project, I needed to use the --force option, or else I was getting the errors as outlined in the evaluation before, I'm posting below again for reference. Maybe it's my local setup, I'm not sure, but seeing that I got the same error as @Noc2, perhaps it's a more common issue?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: pai2@0.0.0
npm ERR! Found: @angular/common@12.2.8
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~12.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^11.2.9" from polkadot-angular-identicon@1.0.2-rc2
npm ERR! node_modules/polkadot-angular-identicon
npm ERR!   polkadot-angular-identicon@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Anyway, after npm i polkadot-angular-identicon --force, I followed your instructions regarding the configuration, but couldn't get the app to run with ng serve, I'm stuck on the following two errors:

Error: node_modules/polkadot-angular-identicon/node_modules/@angular/platform-browser/platform-browser.d.ts:703:5 - error TS2416: Property 'supportsDOMEvents' in type 'ɵangular_packages_platform_browser_platform_browser_o' is not assignable to the same property in base type 'ɵDomAdapter'.
  Type '() => boolean' is not assignable to type 'boolean'.

703     supportsDOMEvents(): boolean;
        ~~~~~~~~~~~~~~~~~


Error: node_modules/polkadot-angular-identicon/node_modules/@angular/platform-browser/platform-browser.d.ts:703:5 - error TS2425: Class 'ɵDomAdapter' defines instance member property 'supportsDOMEvents', but extended class 'ɵangular_packages_platform_browser_platform_browser_o' defines it as instance member function.

703     supportsDOMEvents(): boolean;
        ~~~~~~~~~~~~~~~~~

Thank you @mmagician ! That's a bit weird that it cannot resolve deps, but I will try to upgrade angular versions and I will also create a separate boilerplate project so you can just install dependencies and run the project.
If all of these still don't work you can feel free to give the grant a desired 😎 status.

[morgueye4]

@mmagician I have upgraded angular version for both libraries.

I also created 2 ready to use project examples that use the packages, so you will just need to install the dependencies and run the projects

pai-example for angular project that uses the polkadot-angular-identicon

pwi-example for a vanilla html/js project that uses polkadot-web-identicon

[Noc2]

Sorry for the late response. Marcin is currently ooo. Could you add a license file to both examples? Regardless, I’m happy to already confirm that the milestone is approved. I will forward your invoice internally.

[Noc2]

@morgueye4 Did you fill out the invoice form? I couldn’t find your invoice. Maybe could you submit it again?

[morgueye4]

Sorry for the late response. Marcin is currently ooo. Could you add a license file to both examples? Regardless, I’m happy to already confirm that the milestone is approved. I will forward your invoice internally.

@Noc2 . Glad to hear that the milestone is approved. 👍. Sure I'll will add licence for the examples and check for the invoice details.

[morgueye4]

@morgueye4 Did you fill out the invoice form? I couldn’t find your invoice. Maybe could you submit it again?

@Noc2 I have submited the invoice with the details.

[Noc2]

Great. I forwarded your invoice internally.

[morgueye4]

Great. I forwarded your invoice internally.
@Noc2 Thank you 👍

[RouvenP]

hi @morgueye4 we just sent the payment.

[morgueye4]

hi @RouvenP Thanks and thanks to all the team.
I confirm that the payment has arrived.