Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor/switch network and local storage controls #2888

Merged
merged 9 commits into from
Sep 20, 2024

Conversation

enesozturk
Copy link
Contributor

@enesozturk enesozturk commented Sep 20, 2024

Description

Please include a brief summary of the change.

Type of change

  • Chore (non-breaking change that addresses non-functional tasks, maintenance, or code quality improvements)
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Associated Issues

For Linear issues: Closes APKT-xxx
For GH issues: closes #...

Showcase (Optional)

If there is a UI change include the screenshots with before and after state.
If new feature is being introduced, include the link to demo recording.

Checklist

  • Code in this PR is covered by automated tests (Unit tests, E2E tests)
  • My changes generate no new warnings
  • I have reviewed my own code
  • I have filled out all required sections
  • I have tested my changes on the preview link
  • Approver of this PR confirms that the changes are tested on the preview link

Copy link

changeset-bot bot commented Sep 20, 2024

🦋 Changeset detected

Latest commit: 468ec8d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 34 packages
Name Type
@reown/appkit-adapter-ethers5 Patch
@reown/appkit-adapter-ethers Patch
@reown/appkit-adapter-solana Patch
@reown/appkit-adapter-wagmi Patch
@reown/appkit-scaffold-ui Patch
@apps/laboratory Patch
@reown/appkit Patch
@reown/appkit-common Patch
@reown/appkit-core Patch
@apps/demo Patch
@apps/gallery Patch
@examples/html-ethers Patch
@examples/html-ethers5 Patch
@examples/html-wagmi Patch
@examples/next-ethers Patch
@examples/next-wagmi Patch
@examples/react-ethers Patch
@examples/react-ethers5 Patch
@examples/react-solana Patch
@examples/react-wagmi Patch
@examples/vue-ethers5 Patch
@examples/vue-solana Patch
@examples/vue-wagmi Patch
@reown/appkit-adapter-polkadot Patch
@reown/appkit-utils Patch
@reown/appkit-cdn Patch
@reown/appkit-ethers Patch
@reown/appkit-ethers5 Patch
@reown/appkit-polyfills Patch
@reown/appkit-siwe Patch
@reown/appkit-solana Patch
@reown/appkit-ui Patch
@reown/appkit-wagmi Patch
@reown/appkit-wallet Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Sep 20, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
appkit-laboratory ✅ Ready (Inspect) Visit Preview Sep 20, 2024 2:54pm
web3modal-gallery ✅ Ready (Inspect) Visit Preview Sep 20, 2024 2:54pm
web3modal-laboratory ✅ Ready (Inspect) Visit Preview Sep 20, 2024 2:54pm

Copy link
Contributor

github-actions bot commented Sep 20, 2024

Coverage Report for Coverage

Status Category Percentage Covered / Total
🔵 Lines 239.76% 4139 / 10418
🔵 Statements 239.76% 4139 / 10418
🔵 Functions 269.68% 322 / 805
🔵 Branches 310.23% 565 / 1042
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
packages/appkit/src/client.ts 82.81% 75% 86.25% 82.81% 82-83, 102-103, 106-107, 110-111, 114-115, 118-121, 124-127, 130-131, 256, 264, 302-305, 405, 407-409, 412-413, 415-417, 442-443, 458-459, 462-463, 466-467, 476-478, 487, 521-525, 529, 538-550
packages/appkit/src/universal-adapter/client.ts 55.82% 46.29% 50% 55.82% 101-102, 137-138, 141, 146-147, 149-151, 160-163, 165-167, 169-171, 173-175, 177-182, 184, 186-195, 197, 199-202, 204-209, 211, 213, 215-218, 231-233, 242-244, 246-248, 250-253, 255-256, 282-283, 301-306, 310-315, 325, 327-330, 336-344, 346, 348-349, 366-367, 369-374, 403, 407-410, 412-413, 449-452, 454, 456-458, 461-464, 468-469, 471-480, 482-483, 485-488, 526-531, 534-537, 541-542, 544-547, 549-551, 553-555, 557-564, 567-569, 571-586
packages/common/src/utils/CaipNetworksUtil.ts 0% 100% 100% 0% 3, 11, 18-19, 21-25, 27-28, 30-31, 42-52, 63-75
packages/common/src/utils/SafeLocalStorage.ts 90.69% 100% 80% 90.69% 51-54
packages/core/src/controllers/ChainController.ts 67.03% 44.68% 72.22% 67.03% 73-77, 80-84, 86-87, 89-97, 103-104, 131, 133-143, 147-155, 165-166, 189-190, 230-231, 233-237, 239-240, 242-246, 260-261, 274-275, 301-304, 315-317, 319-320, 329-330, 349-351, 353-354, 357-358, 363-364, 367-368, 380-381, 384-385, 390-391, 403-404, 409-410, 416, 418-423, 425-426, 429, 431-436, 438-439, 445-446
packages/core/src/controllers/ConnectionController.ts 56.92% 83.33% 26.08% 56.92% 73-77, 84-85, 107-109, 112-125, 128-129, 132-133, 136-137, 140-141, 144-145, 148-149, 152-153, 156-157, 171-173, 177-178, 181-183, 186-187, 190-191, 194-195, 204-205
packages/core/src/controllers/NetworkController.ts 60.78% 65.78% 72.22% 60.78% 46-47, 53-56, 58-67, 75-76, 89-90, 93-94, 107-113, 126-127, 133-134, 148-151, 165, 167-168, 170-177, 180-181, 183-185, 187-188, 190, 192-196, 198-199, 207-208, 220-221, 238-239, 242-243, 256-257, 267, 269-271, 273-274, 278
packages/core/src/utils/StorageUtil.ts 75% 74.07% 90.9% 75% 49-50, 59-60, 62, 69-70, 77-78, 80, 87-88, 95-96, 98, 105-106, 108, 112-116, 118-119
Generated in workflow #6214

Copy link
Contributor

github-actions bot commented Sep 20, 2024

♻️ Vite-Size ♻️

Size Difference

Size (kb) Gzip (kb)
Total Diff. 0 0

Current Size

Name Size (kb) Gzip (kb)
assets/index-BZgcZZQl.js 1867.188 532.988
assets/index.js 9.63 3.162
assets/index2.js 11.572 3.199
assets/w3m-modal.js 7.397 2.616
assets/noble-curves.js 31.941 12.778
assets/2.21.4_bufferutil.js 2.789 1.328
assets/index3.js 102.251 29.116
assets/index4.js 304.393 87.285
assets/hooks.module.js 74.443 25.591
index.html 0.329 0.235
Total Size 2411.933 698.298

Base Size

Name Size (kb) Gzip (kb)
assets/index-BZgcZZQl.js 1867.188 532.988
assets/index.js 9.63 3.162
assets/index2.js 11.572 3.199
assets/w3m-modal.js 7.397 2.616
assets/noble-curves.js 31.941 12.778
assets/2.21.4_bufferutil.js 2.789 1.328
assets/index3.js 102.251 29.116
assets/index4.js 304.393 87.285
assets/hooks.module.js 74.443 25.591
index.html 0.329 0.235
Total Size 2411.933 698.298

this.appKit?.setCaipAddress(caipAddress, this.chainNamespace)
this.appKit?.setCaipNetwork(caipNetwork)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should do all the caipNetwork setters from a single place and do it only when it's necessary.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++++++

: Number(networkId)
const caipNetwork = this.caipNetworks.find(c => c.chainId === networkIdNumber)
const chainChangedHandler = (chainId: string) => {
const chainIdNumber =
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should control if the received chainId is already active, otherwise - still couldn't figure it out why - this listener is getting triggered multiple times in a single network switch and breaking the state

Same logic applied to all clients

@@ -584,7 +580,7 @@ describe('EthersAdapter', () => {
const chainChangedHandler = mockProvider.on.mock.calls.find(
(call: string[]) => call[0] === 'chainChanged'
)[1]
await chainChangedHandler('0x1')
await chainChangedHandler('0x137')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be trigger the setCaipNetwork only if the network has changed. So passing Polygon id now

: Number(networkId)
const caipNetwork = this.caipNetworks.find(c => c.chainId === networkIdNumber)
const chainChangedHandler = (chainId: string) => {
const chainIdNumber =
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same

@@ -588,7 +586,7 @@ describe('EthersAdapter', () => {
const chainChangedHandler = mockProvider.on.mock.calls.find(
(call: string[]) => call[0] === 'chainChanged'
)[1]
await chainChangedHandler('0x1')
await chainChangedHandler('0x2')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same - updating the value to make sure it's triggering setCaipNetwork

@@ -311,10 +310,6 @@ export class SolanaAdapter implements ChainAdapter {

this.syncRequestedNetworks(this.caipNetworks)

AssetController.subscribeNetworkImages(() => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is unnecessary. I'll handle the network images fetching in another PR

@@ -647,7 +645,6 @@ export class WagmiAdapter implements ChainAdapter {
}
} else if (status === 'connected' && address && chainId) {
const caipAddress = `eip155:${chainId}:${address}` as CaipAddress
this.appKit?.resetAccount(this.chainNamespace)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we've connected, we don't have to resetAccount. This should have been removed long ago - I remember we removed these

@@ -68,8 +68,7 @@ describe('UniversalAdapter', () => {
caipNetwork: undefined,
requestedCaipNetworks: [mainnet, solana],
approvedCaipNetworkIds: [],
supportsAllNetworks: true,
isDefaultCaipNetwork: false
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused state value

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are there any other unused values here?

if (!caipNetwork) {
NetworkController.setActiveCaipNetwork({
chainId: Number(chainId),
id: `eip155:${chainId}`,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why we setting only eip155? We should refactor this as that it'll get different namespaces as well.

What could be the chainId other than EVM or Solana chain IDs?

'@appkit/active_caip_network_id': string
'@appkit/connected_connector': string
'@appkit/connected_social': string
'@appkit/connected_social_username': string
'@appkit/recent_wallets': string
'@appkit/deeplink_choice': { href: string; name: string }
'@appkit/deeplink_choice': string
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should store only string typed values on the localStorage. Keeping complex values will bring the complexity of stringify'ing and parsing problem and also we'll bring TS issues.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we are doing this I'd replace all usages of storing CaipNetwork for caipNetworkId (getting the netwrok on a diff context) and not stringify anything as a rule; only store primitive types

}

public override disconnectedCallback() {
this.externalViewUnsubscribe.forEach(unsubscribe => unsubscribe())
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was missing, we should remove listeners on unmount

apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx Outdated Show resolved Hide resolved
this.appKit?.setCaipAddress(caipAddress, this.chainNamespace)
this.appKit?.setCaipNetwork(caipNetwork)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++++++

packages/appkit/src/client.ts Outdated Show resolved Hide resolved
packages/appkit/src/client.ts Outdated Show resolved Hide resolved
packages/appkit/src/client.ts Outdated Show resolved Hide resolved
@@ -68,8 +68,7 @@ describe('UniversalAdapter', () => {
caipNetwork: undefined,
requestedCaipNetworks: [mainnet, solana],
approvedCaipNetworkIds: [],
supportsAllNetworks: true,
isDefaultCaipNetwork: false
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are there any other unused values here?

packages/common/src/utils/SafeLocalStorage.ts Show resolved Hide resolved
Comment on lines -44 to -54
const value = localStorage.getItem(key)

if (value) {
try {
return JSON.parse(value)
} catch (e) {
console.warn('Error parsing value from localStorage', key, e)

return undefined
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'd done this change to have typed values + prevent having to parse and stringify all the time

Why remove this?

…tor/switch-network-and-local-storage-controls
@enesozturk enesozturk merged commit 1086727 into main Sep 20, 2024
17 checks passed
@enesozturk enesozturk deleted the refactor/switch-network-and-local-storage-controls branch September 20, 2024 15:30
@enesozturk enesozturk mentioned this pull request Sep 23, 2024
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants