Front-end Architecture

[0xdcota]

Investigations:

• [x] Determine library for web3 connection
• [x] Determine app state -- How different components talked to each other, how do we maintain of what the user is doing so in the next page it is available for example
• [x] State of the transactions, how do we deal with this topic? In single blockchain we have several states of a transaction and going cross chain will require tracking those states on different blockchains.
• [x] Using GraphQL for querying Connext transaction status, mainly learn how it works in case it is needed.
• [x] How to query states from multiple chains at the same time, not relying only on the injected provider.
• [x] Typescript

---

Todo

Create an app in frontend with

• [x] Next.JS & TypeScript,
• [x] #37
• [x] Add xstate
• [x] #39
• [x] Add Onboard + basic onboarding and put user in react context

[brozorec]

@DaigaroCota and @doliG will have a call together to try to manually track a tx between two chains.

Plz refer to this API provided by Connext for tracking such txns with the transaction ID:

https://api.thegraph.com/subgraphs/name/connext/nxtp-amarok-runtime-v0-goerli/graphql?query=query+DestinationTransfer+%7B%0A++destinationTransfer%28%0A++++id%3A+%220x53b9d02c607ef2d4a29cbfae56fb1c07dd0259533bdf0efaa4aa2648eceffb9b%22%0A++%29+%7B%0A++++nonce%0A++++id%0A++++to%0A++++transactingAmount%0A++++transactingAsset%0A++++originDomain%0A++++destinationDomain%0A++++status%0A++%7D%0A%7D

Attention: it could happen that the data is out of sync.

[0xdcota]

@doliG I created a wrapper to simplify making a cross-ping call. The contract address is: 0xB751B77eb70045830B61Eb57309BD9fC9270dd55, and it is the same address in Rinkeby, Goerli and Maticmumbai testnets. You just need to call method initiatePing("Type a custom string message", destinationDomainId) The receiver of pings in all testnets is address: 0xd41D09D455E9BD2cFa7FD42c235b933EF7604dD9. The domainIds can be found here: https://docs.connext.network/developers/testing-against-testnet

[doliG]

Hey, so here's the result so far of my test & investigations

✅ Determine library for web3 connection

ethers.js & wagmi

One main drawback with wagmi: it supports only one provider at a time. Maybe we can use it to initiate transactions, but use plain ethers.js to query blockchain 🤔

✅ Determine app state

How different components talked to each other? How do we maintain of what the user is doing so in the next page it is available?

Here I suggest to use react-query, it look way more simple than xstate, that we can keep for complicated mechanism. But maybe it'll short circuit with Wagmi, we'll see as we are building 🤔

✅ Using GraphQL for querying Connext transaction status, mainly learn how it works in case it is needed

ok

✅ Typescript

Of course

❓ State of the transactions, how do we deal with this topic? In single blockchain we have several states of a transaction and going cross chain will require tracking those states on different blockchains.

💡 Consider a transaction as an order on e-commerce, therefor the user will have a cart (= ongoing transaction), and an history (a page where he can see a list of all his transaction). What do you think ?

We can also implement an amazon-like cart (see screenchot below)

⏳ How to query states from multiple chains at the same time, not relying only on the injected provider

WIP

[0xdcota]

I like the idea of the cart, for ongoing transactions, though I suggest that we think of a more unique icon in terms of design. So that is not confused with like a real e-commerce website.

[doliG]

Yes, we already discuss the cart with Mark. Do not worry, here I'm speaking of UX (aka a global fonctionnement), of course we won't be using a cart icon in Fuji (or maybe only the 1st of April 🤔 )

[doliG]

New updates:

✅ Determine library for web3 connection ethers.js Update: we won't use wagmi at first.

✅ Determine app state Update: We'll use xstate for complex business logic, and react-query with ethers for simple query & display.

✅ Using GraphQL for querying Connext transaction status, mainly learn how it works in case it is needed ok

✅ Typescript Of course

❓ State of the transactions, how do we deal with this topic? In single blockchain we have several states of a transaction and going cross chain will require tracking those states on different blockchains. Update: state machine, see i.e this transaction machine

✅ How to query states from multiple chains at the same time, not relying only on the injected provider Experiment sucess to display data from 2 different chains, it was not that difficult.