Trello 19 #31

ZiyedB · 2021-03-14T18:19:11Z

Draft PR ,only look at the last commit. We need to get the other PRs reviewed and approved to merge them.

Basic so far :

Will add the :

Add
Enable/Disable
Remove
Edit
Save

TRELLO-24 #Done

…t and view the tracked contracts TRELLO-19 #Done

Frenkiee · 2021-03-15T11:03:59Z

src/pages/tracked-contracts/TrackedContractsList.tsx

+          {chain.name}
+        </div>
+      );
+    });


A bit nicer:

const allChains = chains .filter((chain) => !searchChain) .filter((chain) => chain.name.includes(searchChain.trim().toLocaleLowerCase())) .map((chain) => ( <div className={`focus:outline-none py-4 capitalize cursor-pointer ${ chain.name === activeChain?.name ? 'font-bold text-primary' : '' }`} role="button" onClick={() => setActiveChain(chain)} onKeyPress={() => setActiveChain(chain)} tabIndex={0} > {chain.name} </div> ));

Also, I would try to move out the div view and present it as a component

The filter like that wouldn't actually work but yeah simplifying it and moving it to a separate component.

Frenkiee · 2021-03-15T11:06:38Z

src/pages/tracked-contracts/TrackedContractsList.tsx

+          return contract;
+        })
+      : 'No Tracked Contracts';
+


This should also work

const activeContracts = activeChain && activeChain.tracked_contracts.length ? activeChain.tracked_contracts : 'No Tracked Contracts';

Frenkiee · 2021-03-15T11:08:31Z

src/pages/tracked-contracts/TrackedContractsList.tsx

+  project: string;
+  url: string;
+  credentials: {
+    // TODO: Ask potentially BE to have structure camelCase in case or we can just disable the warning in eslint


I've changed eslint settings in Query Builder to display a warning

ZiyedB · 2021-03-14T18:19:39Z

src/pages/tracked-contracts/mock-data.ts

@@ -0,0 +1,33 @@
+// We can remove this when we can hook to the BE and get that data it's just for getting the UX ready for it
+const mockDataChain = [


Just mocking the sample we got from Jure

ZiyedB · 2021-03-16T08:49:33Z

src/pages/tracked-contracts/TrackedChain.tsx

+  onClick: () => void;
+}
+
+const TrackedChain: React.FC<TrackedChainProps> = ({ name, active, onClick }) => {


Moved it here, in the same folder, I don't think it's gonna be used anywhere else so no need to put it inside components

ZiyedB · 2021-03-16T08:50:06Z

src/pages/tracked-contracts/TrackedContractsList.tsx

-        </div>
-      );
-    });
+    .filter((chain) => chain.name.includes(searchChain.trim().toLocaleLowerCase()) || activeChain?.name === chain.name)


Just this filter works actually no need to check for if defined or null. Also added the fact that if a chan is already active you might still want to see it despite searching

ZiyedB · 2021-04-01T15:15:28Z

ZiyedB · 2021-04-01T15:21:19Z

src/api/contracts.ts

+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+
+// Implementation : https://github.com/paralink-network/paralink-node/blob/master/src/api/contracts.py
+const getAllContracts = () => axiosInstance.get<Contract[]>(`${contractsApi}`);


FYI @frisitano @jbargu I've tried some of the BE Apis and had some feedback :

https://github.com/paralink-network/paralink-node/blob/master/src/api/contracts.py#L47 POST & PUT should return the contract response instead of just OK ( we'd need the latest from the DB, especially in the POST to have the ID without refreshing the page or refetching all of the contracts )

Error when trying to update the status of an address, we might want to fix that

Should we be able to edit an address after it was created or saved ? cause we don't have a "setAddress" or a modify endpoint. Also if we were to add one, let's just do it as "updateContract" endpoint and remove the status one.

Error when deleting. It actually works, but return a 500 as there is an error after deleting :

Hi @ZiyedB

I have made some modifications to the API contract on this development branch - refactor_models .

This refactor modifies the API such that contracts are identified by a unique (chain, address) tuple.

Under this new API you should not need any additional information returned by the API as the contract id has been removed.

I am not experiencing the same issue as you. I suspect your .env file may be referencing the celery broker incorrectly. Could you ensure it contains CELERY_BROKER_URL=amqp://guest:guest@rabbitmq:5672 please?

No we should not be able to update the address. A different address would represent a different contract.

Fixed.

Could you take a look at the API and let me know your feedback. I will hold fire on raising a PR to see if we need to make any modifications to the API for the front end. In any case I still need to develop some tests for the REST endpoints.

I forgot to mention that you will have to delete the docker volume associated with the paralink Postgres container before executing the dev branch above.

ZiyedB · 2021-04-01T15:22:15Z

src/interfaces/Chain.ts

@@ -0,0 +1,8 @@
+import { Contract } from './Contract';


FYI @Frenkiee I moved things inside the interfaces folder, I think it might be much easier to share the interfaces across things ( apis / components / utils etc. ) avoiding some circular deps later on

ZiyedB · 2021-04-01T15:23:37Z

src/pages/tracked-contracts/TrackedContract.tsx

@@ -1,59 +1,82 @@
 import React, { useEffect, useState } from 'react';
 import { FaCheck, FaTimes, FaTrash } from 'react-icons/fa';
+import ContractsApi from '../../api/contracts';


I've done it a slightly differently from you @Frenkiee , I like that format of just importing as named import and then calling the function.

The then / catch & everything else is done directly from the component.

ZiyedB · 2021-04-01T15:24:29Z

src/pages/tracked-contracts/TrackedContractsList.tsx

  useEffect(() => {
-    setChains(mockDataChain as Chain[]);
+    ChainsApi.getAllChains().then((res: any) => {


If we can get another chain added

ZiyedB · 2021-04-01T15:25:42Z

src/pages/tracked-contracts/TrackedContract.tsx

+    console.log('trackinputRef', trackInputRef);
+    if (trackInputRef) {
+      trackInputRef.blur();
+    }
  };

  // Save the contract
  const saveClick = (): void => {
    // save contract as it is


Before saving we would check that the address is valid or not using some utils. Ticket to come about adding a util to check input address based on the chain

Good example from Jure : https://polkadot.js.org/docs/util-crypto/examples/validate-address/

This is handled in the backend here. You should look out for the error when calling the create_contract endpoint.

ZiyedB · 2021-04-01T15:30:30Z

src/pages/tracked-contracts/TrackedContractsList.tsx

  // Filter out by the search but also keep the current active in the search
  const allChains = chains
    .filter((chain) => chain.name.includes(searchChain.trim().toLocaleLowerCase()) || activeChain?.name === chain.name)
    .map((chain) => (
-      <TrackedChain active={chain.name === activeChain?.name} name={chain.name} onClick={() => setActiveChain(chain)} />


Thinking about it @jbargu and your suggestion, I might remove the search and instead have a selector there

Or we could have just one small selectors to select the type 'evm' | 'substrate' ( or both )

ZiyedB · 2021-05-09T11:14:42Z

FYI @frisitano I've worked on the updates. It's looking good, here is a small gif , you can also try it out. ( added the notifications while at it )

Small thing but not blocking we can address later, as I didn't yet added the "insights" about errors yet but it looks like we'd need a json format for the error. Right now it's an HTML format error.

frisitano · 2021-05-12T21:51:57Z

Hi @ZiyedB I've tried out the UI and it looks great so far. I have updated the error response such that it is json as required, please go ahead and pull the latest. You can see the source code as a reference. I believe the code should be intuitive and self explanatory. In the error scenario you can fetch the error message to display to the user from the "error" field in the json.

ZiyedB · 2021-05-17T22:06:14Z

Thanks @frisitano I've added the support for the error , it looks good :

I've added an autoclose after 8s instead, but we can think of persistent error message later in case.

Also for later, I think we should add the following :

Errors for other endpoints
Potentially just throwing an error ( as right now it's still considered as "response" ) ,for this no need yet, we could potentially try to add a response interceptor to throw an error on our end based on the result, I added a TODO for that, but not sure if it's doable with axios ( need to check )

ZiyedB added 5 commits March 4, 2021 20:54

feat(table): add a simple table component with tailwind

a6f822b

TRELLO-24 #Done

pr feedback

c1262ba

feat(card): add card component + extend tailwind instead of overwrite

bc3ad16

pr feedback

0a51551

feat(tracked-contracts): ability to search through the chain to selec…

e8dc5aa

…t and view the tracked contracts TRELLO-19 #Done

Frenkiee reviewed Mar 15, 2021

View reviewed changes

ZiyedB commented Mar 16, 2021

View reviewed changes

pr feedback

ac912e7

ZiyedB commented Mar 16, 2021

View reviewed changes

ZiyedB added 2 commits April 1, 2021 11:20

basic ui implementation

a3f1135

hook with the BE

6463125

ZiyedB commented Apr 1, 2021

View reviewed changes

ZiyedB self-assigned this Apr 1, 2021

ZiyedB added 2 commits April 1, 2021 17:05

setup correclty the ref

ba28515

update with latest model

492fb9e

ZiyedB marked this pull request as ready for review May 9, 2021 11:14

ZiyedB added the ready for review PR is ready for review label May 9, 2021

integrate with errors

99f7eca

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trello 19 #31

Trello 19 #31

ZiyedB commented Mar 14, 2021

Frenkiee Mar 15, 2021 •

edited

Loading

Frenkiee Mar 15, 2021

ZiyedB Mar 16, 2021

Frenkiee Mar 15, 2021

Frenkiee Mar 15, 2021

ZiyedB Mar 14, 2021

ZiyedB Mar 16, 2021

ZiyedB Mar 16, 2021

ZiyedB commented Apr 1, 2021

ZiyedB Apr 1, 2021

frisitano Apr 26, 2021

frisitano Apr 27, 2021 •

edited

Loading

ZiyedB Apr 1, 2021

ZiyedB Apr 1, 2021

ZiyedB Apr 1, 2021

ZiyedB Apr 1, 2021

frisitano Apr 29, 2021

ZiyedB Apr 1, 2021

ZiyedB commented May 9, 2021

frisitano commented May 12, 2021 •

edited

Loading

ZiyedB commented May 17, 2021

		@@ -0,0 +1,33 @@
		// We can remove this when we can hook to the BE and get that data it's just for getting the UX ready for it
		const mockDataChain = [

Trello 19 #31

Are you sure you want to change the base?

Trello 19 #31

Conversation

ZiyedB commented Mar 14, 2021

Frenkiee Mar 15, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZiyedB commented Apr 1, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frisitano Apr 27, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZiyedB commented May 9, 2021

frisitano commented May 12, 2021 • edited Loading

ZiyedB commented May 17, 2021

Frenkiee Mar 15, 2021 •

edited

Loading

frisitano Apr 27, 2021 •

edited

Loading

frisitano commented May 12, 2021 •

edited

Loading