contract selection with url params

[OlivierDemeaux]

Description

Added some code to allow a contract, address and abi to be set on the mtCrypto/contracts/interact page with a param passed in the URL. No need to search the contract in the dropdown.
ex: "myCrypto/contracts/interact?name=BCdiploma - Evidenz".
If a param is passed in the URL, the contract, address and abi will be set and the button "access" will be click.
PROBLEME: The access button crashes the localhost i'm running myCrypto on. (Even when i click on access button after i manually clicked on the contract)

Changes

• Can now pass a contract name in the url as param to have it automatically selected on the page myCrypto/contracts/interact
  ex: "myCrypto//contracts/interact?name=BCdiploma%20-%20EvidenZ"

Steps to Test

1. yarn install
2. yarn start
3. run url "localhost/contracts/interact?name=BCdiploma%20-%20EvidenZ" (works with every contract name)
4. If localhost crashes, edit out the line 85, 86, 87 of the file : common/containers/Tabs/Contracts/components/Interact/components/InteractForm/index.tsx.
   Those lines are responsibles for the click on the "access" button after that the contract name, address and abi are set.

Zeplin Design

Quality Assurance

• [✓] The branch name is in lowercase-kebab-case with no prefix (unless it was created from Clubhouse)
• [✓] The base branch is develop or gau (no nested branches)
• [✓] This is related to a maximum of one Clubhouse story or GitHub issue
• [✓] Types are safe (avoid TypeScript/TSLint features like any and disable, instead use more specific types)
• [✓] If code is copied from existing directories, there is an explanation of why this is necesary in the description/changes, and all copying is done in separate commits to make them easy to filter out

[mycrypto-bot]

Staging build: MyCryptoBuilds

[409H]

Can you make a modification here to do the comparison as both strings in lowercase for a UX factor (ie: MyContract contract name won't match mycontract query string value)

[OlivierDemeaux]

Good idea! Thanks. Did just that. Still not working on a live version even tho it works on a localhost so making a bunch of console.log to understand what's happing

[coveralls]

Coverage remained the same at 53.035% when pulling f54c09b on OlivierDemeaux:develop into 7ca14a9 on MyCryptoHQ:develop.

[mwbailey]

Hi @OlivierDemeaux. I got curious when I saw you mention that strange localhost vs non-localhost bug on the MyCrypto Discord. As you've discovered, the problem is the undefined abi field in the Contract class in common/libs/contracts/index.ts, which you fixed by assigning it a value in the Interact component.

Turns out the reason it was crashing the development build but not the production build wasn't because of a localhost issue. The development build (when you run yarn start) uses Babel to compile/transpile the Typescript, and the production build (e.g., yarn build) uses the official Typescript compiler (tsc). I assume the reason they set it up this way is that Babel has faster build times and React Hot Loader compatibility, but tsc is needed to actually do type-checking.

Babel (correctly, according to the proposed spec) transpiles the uninitialized abi field as though it were abi = undefined. This results in the crash in development builds. The Typescript compiler currently ignores uninitialized field declarations, so the abi property does not appear in the emitted Javascript code at all. That's why the production build doesn't crash when iterating through the properties in Contract.getFunctions().

Unless I'm missing something, it seems like the public abi: any; line in the Contract class can just be deleted. The production build has been running without it with no apparent problems. I don't see anywhere in the code where that abi field is used. (Note: there's a separate NetworkContract interface with an abi field that is needed.) I think it may be an unnecessary leftover from a refactor of the Contract code about 2 years ago around release tag 0.0.6.

[blurpesec]

This function seems to be repeated 3x. Is there any way that you can extract this out, or use it in a higher order component and pass the data down as props?

[OlivierDemeaux]

Took me longer than i want to admit but I managed to extract it! Tell me what you think about it!

[blurpesec]

Can you explain what this method is attempting to do and why this getElementById is needed?

[OlivierDemeaux]

Just grab the params from the url and set them in the function's input fields according to their respective numbers. It needs getElementById in order to get the input and set the value to that input

[OlivierDemeaux]

Hi @blurpesec. Any news?

[VinceBCD]

Hi guys! From our point of view, it's a must have for adoption. If you have time I can give you a demo of our product to show you how crucial it is (and not only for ourselves.)
With this feature, the general public can, in an application context, verify information stored on the blockchain with a single click. This PR is opened for 3 months now, how to move forward ?

[FrederikBolding]

Closing in favor of #2920