Skip to content

Commit 7d8cfef

Browse files
ted-palmerted-palmer
authored
Reduce SDK bundle size by moving heavy viem chain imports to subpath (#900)
* Reduce sdk bundle size by moving heavy viem imports to chain-utils entrypoint * feat: changeset * Fix unit tests to pass in necesarry chains to createClient
1 parent cb3b9e9 commit 7d8cfef

File tree

14 files changed

+210
-138
lines changed

14 files changed

+210
-138
lines changed

‎.changeset/wicked-bags-show.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@relayprotocol/relay-sdk': major
3+
'@relayprotocol/relay-kit-hooks': patch
4+
---
5+
6+
Move configureViemChain, configureDynamicChains, and fetchChainConfigs to new /chain-utils subpath to reduce bundle size

‎demo/pages/_app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import {
1111
convertViemChainToRelayChain,
1212
MAINNET_RELAY_API,
1313
TESTNET_RELAY_API,
14-
configureViemChain,
1514
type RelayChain
1615
} from '@relayprotocol/relay-sdk'
16+
import { configureViemChain } from '@relayprotocol/relay-sdk/chain-utils'
1717
import { ThemeProvider } from 'next-themes'
1818
import { useRouter } from 'next/router'
1919
import {

‎packages/hooks/src/hooks/useRelayChains.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {
2-
configureViemChain,
32
convertViemChainToRelayChain,
43
MAINNET_RELAY_API,
54
setParams,
65
type paths
76
} from '@relayprotocol/relay-sdk'
7+
import { configureViemChain } from '@relayprotocol/relay-sdk/chain-utils'
88
import fetcher from '../fetcher.js'
99
import {
1010
useQuery,

‎packages/sdk/package.json‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,21 @@
1313
"./_types"
1414
],
1515
"exports": {
16-
"types": "./_types/src/index.d.ts",
17-
"import": "./_esm/src/index.js",
18-
"require": "./_cjs/src/index.js"
16+
".": {
17+
"types": "./_types/src/index.d.ts",
18+
"import": "./_esm/src/index.js",
19+
"require": "./_cjs/src/index.js"
20+
},
21+
"./chain-utils": {
22+
"types": "./_types/src/chain-utils/index.d.ts",
23+
"import": "./_esm/src/chain-utils/index.js",
24+
"require": "./_cjs/src/chain-utils/index.js"
25+
}
26+
},
27+
"typesVersions": {
28+
"*": {
29+
"chain-utils": ["./_types/src/chain-utils/index.d.ts"]
30+
}
1931
},
2032
"scripts": {
2133
"prebuild": "node scripts/version.mjs",

‎packages/sdk/src/actions/getQuote.test.ts‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
import { describe, it, expect, vi, beforeEach } from 'vitest'
2-
import { RelayClient, createClient, getClient } from '../client'
2+
import { RelayClient, createClient } from '../client'
3+
import { convertViemChainToRelayChain } from '../utils/chain'
34
import { http, zeroAddress } from 'viem'
4-
import { mainnet } from 'viem/chains'
5+
import {
6+
mainnet,
7+
base,
8+
zora,
9+
optimism,
10+
arbitrum,
11+
arbitrumNova
12+
} from 'viem/chains'
513
import { MAINNET_RELAY_API } from '../constants'
614
import { axios } from '../utils'
715

16+
const viemChains = [mainnet, base, zora, optimism, arbitrum, arbitrumNova]
17+
const relayChains = viemChains.map(convertViemChainToRelayChain)
18+
819
let client: RelayClient | undefined
920
let wallet = {
1021
getChainId: () => Promise.resolve(1),
@@ -34,7 +45,8 @@ describe('Should test the getQuote action.', () => {
3445

3546
it("Should throw 'RelayClient missing api url configuration'.", async () => {
3647
client = createClient({
37-
baseApiUrl: ''
48+
baseApiUrl: '',
49+
chains: relayChains
3850
})
3951

4052
await expect(
@@ -55,7 +67,8 @@ describe('Should test the getQuote action.', () => {
5567

5668
it('Should allow not passing in a wallet', async () => {
5769
client = createClient({
58-
baseApiUrl: MAINNET_RELAY_API
70+
baseApiUrl: MAINNET_RELAY_API,
71+
chains: relayChains
5972
})
6073

6174
await client?.actions?.getQuote(
@@ -89,7 +102,8 @@ describe('Should test the getQuote action.', () => {
89102

90103
it('Should allow passing in additional txs', async () => {
91104
client = createClient({
92-
baseApiUrl: MAINNET_RELAY_API
105+
baseApiUrl: MAINNET_RELAY_API,
106+
chains: relayChains
93107
})
94108

95109
await client?.actions?.getQuote(

‎packages/sdk/src/chain-utils/configureDynamicChains.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { getClient } from '../client.js'
2+
import { fetchChainConfigs } from './fetchChainConfigs.js'
3+
import { LogLevel } from '../utils/logger.js'
4+
5+
export async function configureDynamicChains() {
6+
const client = getClient()
7+
try {
8+
const chains = await fetchChainConfigs(
9+
client.baseApiUrl,
10+
client.source,
11+
client.apiKey
12+
)
13+
client.chains = chains
14+
return chains
15+
} catch (e) {
16+
client.log(
17+
['Failed to fetch remote chain configuration, falling back', e],
18+
LogLevel.Error
19+
)
20+
throw e
21+
}
22+
}

‎packages/sdk/src/chain-utils/configureViemChain.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { type Chain } from 'viem'
2+
import * as viemChains from 'viem/chains'
3+
import type { RelayChain, paths } from '../types/index.js'
4+
import { ASSETS_RELAY_API } from '../constants/servers.js'
5+
6+
type RelayAPIChain = Required<
7+
NonNullable<
8+
paths['/chains']['get']['responses']['200']['content']['application/json']['chains']
9+
>['0']
10+
>
11+
12+
const viemChainMap = Object.values(viemChains).reduce(
13+
(chains, chain) => {
14+
chains[chain.id] = chain
15+
return chains
16+
},
17+
{} as Record<number, Chain>
18+
)
19+
20+
export const configureViemChain = (
21+
chain: RelayAPIChain
22+
): RelayChain & Required<Pick<RelayChain, 'viemChain'>> => {
23+
let viemChain: Chain
24+
const overriddenChains = [999, 1337]
25+
const staticChain = overriddenChains.includes(chain.id)
26+
? undefined
27+
: viemChainMap[chain.id]
28+
if (staticChain) {
29+
viemChain = staticChain
30+
} else {
31+
viemChain = {
32+
id: chain.id,
33+
name: chain.displayName,
34+
nativeCurrency: {
35+
name: chain.currency.name ?? 'Ethereum',
36+
decimals: chain.currency.decimals ?? 18,
37+
symbol: chain.currency.symbol ?? 'ETH'
38+
},
39+
rpcUrls: {
40+
default: {
41+
http: [chain.httpRpcUrl],
42+
webSocket: [chain.wsRpcUrl]
43+
},
44+
public: {
45+
http: [chain.httpRpcUrl],
46+
webSocket: [chain.wsRpcUrl]
47+
}
48+
},
49+
blockExplorers: {
50+
etherscan: {
51+
name: chain.explorerName,
52+
url: chain.explorerUrl
53+
},
54+
default: {
55+
name: chain.explorerName,
56+
url: chain.explorerUrl
57+
}
58+
}
59+
} as const satisfies Chain
60+
}
61+
62+
return {
63+
...chain,
64+
viemChain,
65+
icon: {
66+
dark: `${ASSETS_RELAY_API}/icons/${chain.id}/dark.png`,
67+
light: chain.iconUrl ?? `${ASSETS_RELAY_API}/icons/${chain.id}/light.png`,
68+
squaredDark: `${ASSETS_RELAY_API}/icons/square/${chain.id}/dark.png`,
69+
squaredLight: `${ASSETS_RELAY_API}/icons/square/${chain.id}/light.png`
70+
}
71+
}
72+
}

packages/sdk/src/utils/fetchChainConfigs.ts renamed to packages/sdk/src/chain-utils/fetchChainConfigs.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { configureViemChain } from './chain.js'
1+
import { configureViemChain } from './configureViemChain.js'
22
import type { RelayChain } from '../types/index.js'
3-
import { axios } from './axios.js'
4-
import { isRelayApiUrl } from './apiKey.js'
3+
import { axios } from '../utils/axios.js'
4+
import { isRelayApiUrl } from '../utils/apiKey.js'
55

66
export const fetchChainConfigs = async (
77
baseApiUrl: string,
@@ -28,3 +28,4 @@ export const fetchChainConfigs = async (
2828
}
2929
throw 'No Chain Data'
3030
}
31+

‎packages/sdk/src/chain-utils/index.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* Chain Utilities
3+
*
4+
* This module contains utilities that involve heavier viem chain imports.
5+
* Import from this subpath only if you need these specific utilities.
6+
*
7+
* @example
8+
* ```ts
9+
* import { configureViemChain, configureDynamicChains } from '@relayprotocol/relay-sdk/chain-utils'
10+
* ```
11+
*/
12+
13+
export { configureViemChain } from './configureViemChain.js'
14+
export { configureDynamicChains } from './configureDynamicChains.js'
15+
export { fetchChainConfigs } from './fetchChainConfigs.js'

‎packages/sdk/src/client.test.ts‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
import { describe, it, expect, beforeEach } from 'vitest'
2-
import {
3-
RelayClient,
4-
configureDynamicChains,
5-
createClient,
6-
getClient
7-
} from './client.js'
2+
import { RelayClient, createClient, getClient } from './client.js'
3+
import { configureDynamicChains } from './chain-utils/configureDynamicChains.js'
84
import {
95
MAINNET_RELAY_API,
106
TESTNET_RELAY_API,
117
convertViemChainToRelayChain
128
} from './index.js'
13-
import { base } from 'viem/chains'
9+
import {
10+
mainnet,
11+
base,
12+
zora,
13+
optimism,
14+
arbitrum,
15+
arbitrumNova
16+
} from 'viem/chains'
1417

1518
let client: RelayClient
1619

20+
const viemChains = [mainnet, base, zora, optimism, arbitrum, arbitrumNova]
21+
const relayChains = viemChains.map(convertViemChainToRelayChain)
22+
1723
describe('Should test the client.', () => {
1824
beforeEach(() => {
1925
client = createClient({
20-
baseApiUrl: MAINNET_RELAY_API
26+
baseApiUrl: MAINNET_RELAY_API,
27+
chains: relayChains
2128
})
2229
})
2330

0 commit comments

Comments
 (0)