30 | {/if}
31 | ```
32 |
33 | ### wagmiLoaded
34 |
35 | The `wagmiLoaded` store indicates whether the @wagmi/core library has been loaded and initialized. It is a boolean store that is set to true when the library is loaded and false otherwise.
36 |
37 | Example usage:
38 |
39 | ```svelte
40 |
43 |
44 | {#if $wagmiLoaded}
45 |
@wagmi/core is loaded and initialized
46 | {:else}
47 |
@wagmi/core is not yet loaded
48 | {/if}
49 | ```
50 |
51 | ### chainId
52 |
53 | The `chainId` store contains the current chain ID of the connected Ethereum provider. It is a number store that is set to null if the provider is not connected or if the chain ID is unknown.
54 |
55 | Example usage:
56 |
57 | ```svelte
58 |
61 |
62 | {#if $chainId}
63 |
Current chain ID: {$chainId}
64 | {:else}
65 |
Chain ID not yet available
66 | {/if}
67 | ```
68 |
69 | ### signerAddress
70 |
71 | The `signerAddress` store contains the current signer address of the connected Ethereum provider. It is a string store that is set to null if the provider is not connected or if the signer address is unknown.
72 |
73 | Example usage:
74 |
75 | ```svelte
76 |
79 |
80 | {#if $signerAddress}
81 |
Current signer address: {$signerAddress}
82 | {:else}
83 |
Signer address not yet available
84 | {/if}
85 | ```
86 |
87 | ### loading
88 |
89 | The `loading` store indicates whether the application is currently loading data from the Ethereum provider. It is a boolean store that is set to `true` when the application is loading and `false` otherwise.
90 |
91 | Example usage:
92 |
93 | ```svelte
94 |
97 |
98 | {#if $loading}
99 |
Loading data...
100 | {:else}
101 |
Data loaded
102 | {/if}
103 | ```
104 |
105 | ### web3Modal
106 |
107 | The `web3Modal` store contains an instance of the `Web3Modal` class from the `@web3modal/html` package. It is used to display a modal for connecting to an Ethereum provider using WalletConnect or other methods.
108 | Example usage:
109 |
110 | ```svelte
111 |
114 |
115 | {#if $web3Modal}
116 |
117 | {:else}
118 |
Web3Modal not yet available
119 | {/if}
120 | ```
121 |
122 | ### defaultConfig
123 |
124 | The `defaultConfig` function is used to configure the `@wagmi/core` library and initialize the Svelte stores. It takes an optional options object that can be used to configure the behavior of the function.
125 |
126 | - `autoConnect` (boolean, default: `true`): Specifies whether the Ethereum client should automatically connect to a provider upon initialization. If set to `true`, the client will attempt to connect automatically.
127 | - `appName` (string, default: `'Erc.Kit'`): Specifies the name of the application using the Ethereum client.
128 | - `chains` (array, default: `defaultChains`): An array of chain configurations to connect with. If not provided, the function will use default chain configurations.
129 | - `alchemyId` (optional) (string): The API key for the Alchemy provider, used for connecting to the Alchemy service.
130 | - `connectors` (object): An object containing customized connector configurations for the Ethereum client.
131 | - `walletConnectProjectId` (string): The project ID used for the WalletConnect integration.
132 |
133 | ### Return Value:
134 |
135 | The `defaultConfig` function returns an object with the following properties:
136 |
137 | - `init`: A function that can be called to initialize the Ethereum client and set up the connections based on the provided configurations.
138 |
139 | Example usage:
140 |
141 | ```svelte
142 |
159 | ```
160 |
161 | ### configuredConnectors
162 |
163 | The `configuredConnectors` are store value array
164 |
165 | Example usage:
166 |
167 | ```svelte
168 |
175 |
176 |
177 | ```
178 |
179 | ### WC
180 |
181 | The `WC` function is used to connect to an Ethereum provider using WalletConnect. It takes one parameter:
182 |
183 | - `statement` (optional): A string that specifies the statement to be signed by the user when logging in.
184 |
185 | Example usage:
186 |
187 | ```svelte
188 |
195 |
196 |
197 | ```
198 |
199 | ### disconnectWagmi
200 |
201 | The `disconnectWagmi` function is used to disconnect from the Ethereum provider and clear the Svelte stores. Example usage:
202 |
203 | ```svelte
204 |
211 |
212 |
213 | ```
214 |
215 | ### Svelte stores
216 |
217 | The `svelte-wagmi` library also provides several Svelte stores that can be used to retrieve information about the user's Ethereum connection:
218 |
219 | - `connected`: A boolean that indicates whether the user is connected to an Ethereum provider.
220 | - `wagmiLoaded`: A boolean that indicates whether the `@wagmi/core` library has been loaded.
221 | - `chainId`: A number that indicates the chain ID of the user's Ethereum connection.
222 | - `signerAddress`: A string that contains the Ethereum address of the user's account.
223 | - `loading`: A boolean that indicates whether the library is currently loading.
224 | Example usage:
225 |
226 | ```svelte
227 |
234 |
235 |
54 | Svelte Wagmi is a package that provides a collection of Svelte stores and functions for
55 | interacting with the Ethereum network. It utilizes the @wagmi/core library for connecting to
56 | Ethereum networks and signing transactions.
57 |
58 | {#if $loading}
59 |
60 | Waiting...
61 |
62 | {:else if $connected}
63 |
{$signerAddress}
64 |
chain ID: {$chainId}
65 |
66 |
67 | {:else}
68 |
not connected
69 |
Connect With walletconnect
70 |
83 |
84 |
Connect With InjectedConnector
85 |
100 | {/if}
101 | {:else}
102 |
Svelte Wagmi Not Configured
103 | {/if}
104 |
105 |
106 |
159 |
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softwarecurator/svelte-wagmi/37fa093c38e7ea857c07748dbdf309f9340c5821/static/favicon.png
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 | commonjsOptions: {
10 | transformMixedEsModules: true
11 | },
12 | kit: {
13 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
14 | // If your environment is not supported or you settled on a specific environment, switch out the adapter.
15 | // See https://kit.svelte.dev/docs/adapters for more information about adapters.
16 | adapter: adapter()
17 | }
18 | };
19 |
20 | export default config;
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true
12 | }
13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | //
15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | // from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { nodePolyfills } from 'vite-plugin-node-polyfills';
3 | import { defineConfig } from 'vite';
4 | import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs';
5 |
6 | export default defineConfig({
7 | plugins: [
8 | nodePolyfills({
9 | exclude: ['fs'],
10 | globals: {
11 | Buffer: true,
12 | global: true,
13 | process: true
14 | },
15 | protocolImports: true
16 | }),
17 | sveltekit()
18 | ],
19 | build: {
20 | commonjsOptions: {
21 | transformMixedEsModules: true
22 | }
23 | },
24 | optimizeDeps: {
25 | esbuildOptions: {
26 | plugins: [esbuildCommonjs(['@wagmi/core'])]
27 | }
28 | }
29 | });
30 |
--------------------------------------------------------------------------------