Test iExec Front-end integration

[damian-jazz]

I have the following goal:

Build a minimal frontend project for testing purposes with React or Angular (currently trying out Angular as it is our default but this turns out to be difficult, not optimistic that react will be easier) that imports the iexec sdk and can connect to the metamask browser plugin to load a signer object. The signer object is necessary for all iexec methods that require a signature (i.e. requestApporder).

I would like to make the following procedure work in order to achieve my goal:

1. Connect to metamask and load signer object
2. Create new iExec object that is initialized with signer object (== ethProvider) and chain-ID (can be hardcoded - n. 134 / 'Bellecour')
3. getAddress
4. checkBalances
5. createAppoder

@LiasFae would it be possible to get some assistance from you for point 1. & 2. Here are some related links:

• https://www.npmjs.com/package/iexec/v/5.0.0-alpha.7#install-the-dependency-in-your-js-project
• https://docs.ethers.io/v5/getting-started/ -> section = Connecting to Ethereum: MetaMask
• https://gsthina.me/connect-metamask-web-truffle-ganache/ -> section = "All basics done to begin now!!"

[damian-jazz]

I found a public repository with a react-project that allows you to connect to Metamask. I tested it successfully.

For now my understaning is the following. Whenever you need to do some signing action the user is asked to authorize that action via metamask. In our case this amounts to:

• createApporder (once the document has been uploaded by the applicant)
• fetchResult

The ethProvider variable/object in the code snippet below is linked to metamask.

What are the next steps? Import iExec into the react-project and test some methods from the SDK involving signing. Integrate the whole thing into Angular.

@Ouassim31 what is your impression here? @LiasFae do you think that we can intergrate iExec into the frontend without too much effort?

[damian-jazz]

https://github.com/AntonioCardenas/AngularWeb3Boilerplate