Svelte kit #7

acuarica · 2021-12-06T17:59:59Z

No description provided.

src/lib/Addresses.svelte

fede-rodes · 2021-12-07T09:40:27Z

src/lib/Addresses.svelte

@@ -1,5 +1,8 @@
+<script context="module" lang="ts">
+    export const config = { renToken: "", renPool: "" };


not sure if this component should depend on the context, maybe we could just remove the context and expose a prop called addresses:

export let addresses = {[key: string]: string}

Then, from the parent component you'd pass:

addresses = { owner: '0x', nodeOperator: '0x', renToken: '0x', renPool: '0x', }

Yeap, we can do that.

fede-rodes · 2021-12-07T09:41:09Z

src/lib/Addresses.svelte

@@ -33,13 +36,12 @@
            <tr>
                <td class="key">RenToken</td>
                <td class="value"
-                    ><EtherscanLink address={NETWORK.contracts.REN_TOKEN} /></td
+                    ><EtherscanLink address={config.renToken} /></td


in order to avoid repeating this <tr><td> maybe we could pass an array of objects or an object as prop and then do a for loop like this:

{#each addresses as {key, value}} <tr> <td class="key">{key}</td> <td class="value"><EtherscanLink address={value} /> </td> {/each}

Yeap, we can do this as well.

fede-rodes · 2021-12-07T09:43:34Z

src/lib/EtherscanLink.svelte

-    import { NETWORK } from "./config";
+<script context="module" lang="ts">
+    export const config: {
+        etherscan: string | null;


Same here, I think this component should not depend on the context. Probably the only component that should depend on the context is the page or the section component and then pass all the context values down to the child components as props.

export let etherscanPrefix: string; export let address: string;

Not here. The I wouldn't use etherscanPrefix as a component prop, because this should be the same for every instance. That's why it's at the module level.

* introducing Chip component * Update src/lib/Chip/types.ts Co-authored-by: Luis Mastrangelo <[email protected]> * Update src/lib/Chip/Chip.svelte Co-authored-by: Luis Mastrangelo <[email protected]> * remove span from stories * exposing class prop * removing variants type * using props class instead Co-authored-by: Luis Mastrangelo <[email protected]>

* adding npm scrpits * linterrr * adding json and format for all files

fede-rodes · 2021-12-14T13:09:41Z

src/lib/Warn.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    /**


I think we should rename this component to Alert and pass a variant prop as in the Chip component. Then, when we do <Alert variant="warning" /> (or danger) we get the original Warn component. This way the component could be used to display successful or info events as well

Yeap, sounds good to me.

@acuarica actually, I've been working on the Alert component and I think it'll be way easier and more robust to simply use a component library and forget about writing our own components. It's way too much time consumer and the end result way poorer. Same applies for the images. Have a look at the following resources:
https://project-awesome.org/TheComputerM/awesome-svelte

Ok, here's my list of UI kits in order of preference

https://carbon-components-svelte.onrender.com/

https://sveltematerialui.com/

https://smeltejs.com/

fede-rodes · 2021-12-14T13:12:01Z

src/lib/Warn.svelte

+     */
+    export let title: string;
+
+    let dismissed = false;


In order to avoid double negation (line 21) I would rename this variable to visible or isVisible to emphatize the fact that it can take on boolean values

Sure, I don't mind that much about this one. Here I tried to highlight the use of the alert to be dismissible. visible sounds more like a toggle which is not implemented.

fede-rodes · 2021-12-14T13:12:58Z

src/lib/Warn.svelte

+        >
+            <div class="pr-1">
+                <svg
+                    class="h-8 w-8 text-white fill-current"


I'd move all images to the img folder to make this code a bit easier to read and also being able to reuse the images

Yeap, that's a good idea.

fede-rodes · 2021-12-14T13:14:12Z

src/lib/net/bond.ts

@@ -0,0 +1,11 @@
+import { BigNumber } from '@ethersproject/bignumber'
+


Bond as a file name is a bit confusing to me. Why not calling it constants?

Also, I would not place this inside the net folder, probably move it top level inside the lib folder.

I see that bond might be confusing. constants is also fine. I used bond since constants is the analogous for utils, which I usually against. But we can rename until we find a better name.

About moving to the top level, this is related to the structure discussion we had. I wouldn't move it, maybe the net name is the problem.

fede-rodes · 2021-12-14T13:16:48Z

src/lib/net/contracts.spec.ts

+
+    const network = {
+        renPoolAddr: '0xbf115a5538290d234fa31e917241a58a20a847bc',
+        renTokenAddr: deployments.kovan.renTokenAddr,


We should set the chain based on the currently connected chain, right? I'm referring to this line

deployments.kovan.renTokenAddr

This was just a hardcoded value to make a PoC. That value would depend on the fork that you would start to run the test. The goal here would be to embed hardhat/ganache to start a blockchain when running those tests. But we need to figure out how to do so.

fede-rodes · 2021-12-14T13:17:40Z

src/lib/net/contracts.spec.ts

+    it('changes count when button is clicked', async () => {
+        const { renToken } = Contracts(network, provider);
+
+        let x = await renToken.poolAllowanceFor('0xbF115A5538290D234fA31e917241a58A20a847Bc')


In case x is not being reset, we should use const instead

* adding missing dep * extending lint npm scripts

* setting up carbon components * removing warn comp * replacing Chip with Tag comp * lint * update Header * update header * name change from selectedAddress to account * adding wallet to header * revert name from account to selectedAddress * revert name from account to selectedAddress * lint * revert name to selectedAddress

acuarica added 25 commits December 2, 2021 03:38

Start with heavy refactor towards Svelte Kit

ceff822

Add wallet store to manage MetaMask

5699b46

Add MetaMask providers to use its type definition

d351f71

Enhance vite env typings and docs

d9d07e5

Fix type conversion

d03f583

Export chain id

e2072b5

Improve wallet reactivity

e977bc8

Improve warning look&feel

c88f871

Move inside pools/ route

9bdef40

Set up vite mode

42461e5

Add new info endpoints

962a453

Add new env types

d93615a

Add storybook

257c58e

Refactor to decouple from store

40adce8

Add network info component

0463352

Fix deposit/withdraw routes

1e56b21

Import without $lib

f3d64e1

Import without $lib

4efebce

Use RenPool address from env

48a623b

Add component stories

04385a0

Improve error handling

b32578c

Add some jsdoc

2fd15b4

Remove comments

2d90d67

Add ren allowance PoC

12a71dc

Remove hardhat

68e2fd3

acuarica requested a review from fede-rodes December 6, 2021 17:59

fede-rodes reviewed Dec 6, 2021

View reviewed changes

src/lib/Addresses.svelte Outdated Show resolved Hide resolved

Decouple components from env

34909b1

fede-rodes reviewed Dec 7, 2021

View reviewed changes

acuarica and others added 18 commits December 8, 2021 00:33

Refactor main layout into component

fa60d50

Rename to support jest testing

6c0bf43

Add jest packages and config

af98ce2

Allows ide support when import .svelte files

3fdcb0e

Add some tests

ac34993

Separate constants from config

d00f886

Fix config/bond imports

0664fda

Add address type alias

4e03eb8

Refactor to use types

8de489c

Use context instead of module variable

9a06c0f

Showcase multiple Howtos in one page

17a4bab

Use context for EtherscanLink

8cb4534

Use prop instead of module variable

70ef0a2

Unify contract usage

e106237

moving h1 and h2 tags to global theme (#10)

3185cdd

moving Chip to lib folder

7baa4cf

Feat/format (#12)

23b5160

* adding npm scrpits * linterrr * adding json and format for all files

fede-rodes reviewed Dec 14, 2021

View reviewed changes

fede-rodes added 5 commits December 14, 2021 14:28

adding missing dep (#13)

dc47301

Feat/format2 (#14)

b7c81fb

* adding missing dep * extending lint npm scripts

fix import

a7bcbae

update storybook config to only process svelte files

56f75f9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Svelte kit #7

Svelte kit #7

acuarica commented Dec 6, 2021

fede-rodes Dec 7, 2021

acuarica Dec 7, 2021

fede-rodes Dec 7, 2021

acuarica Dec 7, 2021

fede-rodes Dec 7, 2021 •

edited

Loading

acuarica Dec 7, 2021

fede-rodes Dec 14, 2021

acuarica Dec 15, 2021

fede-rodes Dec 20, 2021 •

edited

Loading

acuarica Dec 21, 2021

fede-rodes Dec 14, 2021

acuarica Dec 15, 2021

fede-rodes Dec 14, 2021

acuarica Dec 15, 2021

fede-rodes Dec 14, 2021 •

edited

Loading

acuarica Dec 15, 2021

fede-rodes Dec 14, 2021

acuarica Dec 15, 2021

fede-rodes Dec 14, 2021

		@@ -1,5 +1,8 @@
		<script context="module" lang="ts">
		export const config = { renToken: "", renPool: "" };

		@@ -0,0 +1,11 @@
		import { BigNumber } from '@ethersproject/bignumber'

Svelte kit #7

Are you sure you want to change the base?

Svelte kit #7

Conversation

acuarica commented Dec 6, 2021

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

fede-rodes Dec 7, 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

fede-rodes Dec 20, 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

fede-rodes Dec 14, 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

fede-rodes Dec 7, 2021 •

edited

Loading

fede-rodes Dec 20, 2021 •

edited

Loading

fede-rodes Dec 14, 2021 •

edited

Loading