Change wallet #109

wirednkod · 2024-09-08T12:51:22Z

closes #107
fixes #76

Submission checklist:

Layout

Remove DotConnect
Add Polkadot UI Connect Functionality

cloudflare-workers-and-pages · 2024-09-08T12:52:48Z

Deploying delegit with Cloudflare Pages

Latest commit:	`8a4c08b`
Status:	✅ Deploy successful!
Preview URL:	https://49b38c65.delegit.pages.dev
Branch Preview URL:	https://nik-change-wallet.delegit.pages.dev

View logs

Tbaut · 2024-09-08T18:55:06Z

Thanks a lot, it's looking super promising, I'll check the code a little later, just as I tried the functionality and not the code, there's something weird that happens when you selected an account, then you still see the "Connect" button rather than the accounts. Is that expected?

selection.mp4

Also unfortunately, although it's not the highest importance, this is not compatible with mobile view (it'd need 2 different panels , with navigation like on the hydra example), and the selected/hover state in dark view are hard to read.

wirednkod · 2024-09-08T18:58:39Z

Thanks a lot, it's looking super promising, I'll check the code a little later, just as I tried the functionality and not the code, there's something weird that happens when you selected an account, then you still see the "Connect" button rather than the accounts. Is that expected?

Thank you for the feedback. There are still some edge cases (and some non edge ones) that im still fixing, making it more DX. The most important is that i have now multiple views available that can be dedicated per device.
I changed it to draft as I know why the connect is not working and some other alternations.
Im glad i figured out some major problems and i can solve them without the use of any state manager dependencies.

Also most of the design elements can be parameterized by the config so design wise that will be super easy to fix

Tbaut

Sorry in advance for the amount of comments, I'm fresh and have many questions.
As a dev, I really just want to get the accounts, selectAccount, selectedAccount. If there's any localstorage, I should take care of this, just like we did with Tien's modal.

Finally I couldn't actually play with it as I got the following error

 SyntaxError: The requested module 'http://localhost:5173/node_modules/.vite/deps/@polkadot-ui_react.js?v=a9b536dc' doesn't provide an export named: 'useAccountLocalStorage'

src/App.tsx

src/components/MyDelegations.tsx

src/components/ui/dialog.tsx

Tbaut · 2024-09-16T21:39:47Z

src/contexts/AccountsContext.tsx

 }

 const AccountContext = createContext<IAccountContext | undefined>(undefined)

 const AccountContextProvider = ({ children }: AccountContextProps) => {
-  const accounts = useRedotAccounts()
+  const [localStorageAccount, setLocalStorageAccount] = useAccountLocalStorage()


this is a weird DX that I've never seen before. I don't understand why we'd need it.

For the wallet the localstorage has a specific key. This hook is allowing you to get/set that key without the need to know the key

do I really need this though, as a dev? I'm still not sure.

Not sure what you mean "as a dev"... how will you setup the localstorage?

Look at Tien's interface for the dot-connect, there's no mention of local storage ever. If we do anything with local storage, it's on our side. This useAccountLocalStorage comes form polkadot-ui and I don't get why. I think these things should be hidden if needed.

src/contexts/AccountsContext.tsx

src/header.tsx

Tbaut · 2024-09-16T21:50:27Z

src/header.tsx

+            type="extensions"
+            config={connectConfig}
+            selected={selectedAccount}
+            setSelected={selectAccount}


the naming setSelected and selectAccount looks weird here.

Thank you.. Opened polkadot-ui/library#356 and will fix in next version of the library release.

src/header.tsx

Tbaut

Sorry I messed up yesterday and hadn't installed de deps, I did play with it in the end. Functionality looks good, just the implementation feel non intuitive, with things I wouldn't expect us to have to deal with, see my previous comments.

src/header.tsx

…into nik-change-wallet

wirednkod · 2024-09-17T18:21:11Z

@Tbaut I have no idea why the build and lint are failing here 🤷🏽

Tbaut · 2024-09-17T21:28:52Z

The NodeJS server is extremely slow and the CI doesn't manage to download it in time, I guess it'll be better when we retry later. I relaunched it, and tried myself, but it's simply super slow, takes 5+min and times out.

Tbaut

There are stuff I just don't see why they are here. Maybe it's just me, but without any background, it's just confusing and will make the maintenance harder:

I don't want any local storage handling from the lib. we care about the last selected account 100%, or the lib cares about it 100%. this mix that we have here isn't clear
same for the accounts. I see a setAccounts passed in the ConnectModal. I don't think this is right. I should just get them e.g with const {accounts} = useConnect() and not have to care about the state. we never use it, so it shouldn't be exposed.
similarly, I'm not sure why we need to pass selected and setSelected accounts. The modal doesn't do anything with them.

src/header.tsx

src/components/MyDelegations.tsx

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

wirednkod · 2024-09-18T06:47:25Z

same for the accounts. I see a setAccounts passed in the ConnectModal. I don't think this is right. I should just get them e.g with const {accounts} = useConnect() and not have to care about the state. we never use it, so it shouldn't be exposed.

Modal has different forms ("type") and some of them handle the accounts. But you are right that in the current state (only extensions) it does not. Will adjust accordingly

wirednkod added 3 commits September 8, 2024 15:47

Change wallet

0457d16

Merge

200950a

Remove dependency

31f5c35

wirednkod requested a review from Tbaut as a code owner September 8, 2024 12:51

wirednkod marked this pull request as draft September 8, 2024 12:51

wirednkod added 3 commits September 9, 2024 14:18

Fix the hooks

0e571bf

Setup first init of polkadot-ui-wallet

3e397e4

Finalize the wallet design

0a45978

wirednkod marked this pull request as ready for review September 14, 2024 18:09

wirednkod added 2 commits September 15, 2024 23:24

Bump polkadot-ui/react

5822067

merge and minor fixes

94ca2dd

wirednkod mentioned this pull request Sep 16, 2024

Fix polkadot-ui unmet peer polkadot-api warning #76

Closed

wirednkod and others added 2 commits September 16, 2024 23:31

merge

c658ba6

Merge branch 'main' into nik-change-wallet

7dbe3c4

Tbaut reviewed Sep 16, 2024

View reviewed changes

Tbaut reviewed Sep 17, 2024

View reviewed changes

src/header.tsx Outdated Show resolved Hide resolved

wirednkod added 2 commits September 17, 2024 21:05

Address all comments and simplify code

bd39e1d

Merge branch 'nik-change-wallet' of github.com:delegit-xyz/dashboard …

4403589

…into nik-change-wallet

Tbaut reviewed Sep 17, 2024

View reviewed changes

src/header.tsx Outdated Show resolved Hide resolved

src/header.tsx Show resolved Hide resolved

src/components/MyDelegations.tsx Show resolved Hide resolved

Update src/header.tsx

8a4c08b

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change wallet #109

Change wallet #109

wirednkod commented Sep 8, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented Sep 8, 2024 •

edited

Loading

Tbaut commented Sep 8, 2024 •

edited

Loading

wirednkod commented Sep 8, 2024 •

edited

Loading

Tbaut left a comment

Tbaut Sep 16, 2024

wirednkod Sep 17, 2024

Tbaut Sep 17, 2024

wirednkod Sep 17, 2024

Tbaut Sep 17, 2024

wirednkod Sep 17, 2024

Tbaut Sep 16, 2024

wirednkod Sep 17, 2024

Tbaut left a comment

wirednkod commented Sep 17, 2024

Tbaut commented Sep 17, 2024

Tbaut left a comment

wirednkod commented Sep 18, 2024

Change wallet #109

Are you sure you want to change the base?

Change wallet #109

Conversation

wirednkod commented Sep 8, 2024 • edited Loading

closes #107 fixes #76

Layout

cloudflare-workers-and-pages bot commented Sep 8, 2024 • edited Loading

Deploying delegit with Cloudflare Pages

Tbaut commented Sep 8, 2024 • edited Loading

wirednkod commented Sep 8, 2024 • edited Loading

Tbaut left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tbaut left a comment

Choose a reason for hiding this comment

wirednkod commented Sep 17, 2024

Tbaut commented Sep 17, 2024

Tbaut left a comment

Choose a reason for hiding this comment

wirednkod commented Sep 18, 2024

wirednkod commented Sep 8, 2024 •

edited

Loading

closes #107
fixes #76

cloudflare-workers-and-pages bot commented Sep 8, 2024 •

edited

Loading

Tbaut commented Sep 8, 2024 •

edited

Loading

wirednkod commented Sep 8, 2024 •

edited

Loading