diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 421a9e9..cc5a381 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -4803,12 +4803,12 @@ packages: acorn: 7.4.1 dev: true - /acorn-jsx@5.3.2(acorn@8.10.0): + /acorn-jsx@5.3.2(acorn@8.11.1): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: - acorn: 8.10.0 + acorn: 8.11.1 dev: true /acorn-walk@7.2.0: @@ -4828,8 +4828,8 @@ packages: hasBin: true dev: true - /acorn@8.10.0: - resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==} + /acorn@8.11.1: + resolution: {integrity: sha512-IJTNCJMRHfRfb8un89z1QtS0x890C2QUrUxFMK8zy+RizcId6mfnqOf68Bu9YkDgpLYuvCm6aYbwDatXVZPjMQ==} engines: {node: '>=0.4.0'} hasBin: true dev: true @@ -5734,7 +5734,7 @@ packages: hasBin: true dependencies: caniuse-lite: 1.0.30001554 - electron-to-chromium: 1.4.566 + electron-to-chromium: 1.4.568 escalade: 3.1.1 node-releases: 1.1.77 dev: true @@ -5745,7 +5745,7 @@ packages: hasBin: true dependencies: caniuse-lite: 1.0.30001554 - electron-to-chromium: 1.4.566 + electron-to-chromium: 1.4.568 node-releases: 2.0.13 update-browserslist-db: 1.0.13(browserslist@4.22.1) dev: true @@ -6106,7 +6106,7 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 '@types/estree': 1.0.3 - acorn: 8.10.0 + acorn: 8.11.1 estree-walker: 3.0.3 periscopic: 3.1.0 dev: true @@ -7077,8 +7077,8 @@ packages: requiresBuild: true dev: true - /electron-to-chromium@1.4.566: - resolution: {integrity: sha512-mv+fAy27uOmTVlUULy15U3DVJ+jg+8iyKH1bpwboCRhtDC69GKf1PPTZvEIhCyDr81RFqfxZJYrbgp933a1vtg==} + /electron-to-chromium@1.4.568: + resolution: {integrity: sha512-3TCOv8+BY6Ltpt1/CmGBMups2IdKOyfEmz4J8yIS4xLSeMm0Rf+psSaxLuswG9qMKt+XbNbmADybtXGpTFlbDg==} dev: true /elliptic@6.5.4: @@ -7737,8 +7737,8 @@ packages: resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - acorn: 8.10.0 - acorn-jsx: 5.3.2(acorn@8.10.0) + acorn: 8.11.1 + acorn-jsx: 5.3.2(acorn@8.11.1) eslint-visitor-keys: 3.4.3 dev: true @@ -9085,11 +9085,11 @@ packages: kind-of: 3.2.2 dev: true - /is-accessor-descriptor@1.0.0: - resolution: {integrity: sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==} - engines: {node: '>=0.10.0'} + /is-accessor-descriptor@1.0.1: + resolution: {integrity: sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==} + engines: {node: '>= 0.10'} dependencies: - kind-of: 6.0.3 + hasown: 2.0.0 dev: true /is-arguments@1.1.1: @@ -9193,11 +9193,11 @@ packages: kind-of: 3.2.2 dev: true - /is-data-descriptor@1.0.0: - resolution: {integrity: sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==} - engines: {node: '>=0.10.0'} + /is-data-descriptor@1.0.1: + resolution: {integrity: sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==} + engines: {node: '>= 0.4'} dependencies: - kind-of: 6.0.3 + hasown: 2.0.0 dev: true /is-date-object@1.0.5: @@ -9220,8 +9220,8 @@ packages: resolution: {integrity: sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==} engines: {node: '>=0.10.0'} dependencies: - is-accessor-descriptor: 1.0.0 - is-data-descriptor: 1.0.0 + is-accessor-descriptor: 1.0.1 + is-data-descriptor: 1.0.1 kind-of: 6.0.3 dev: true @@ -10131,7 +10131,7 @@ packages: optional: true dependencies: abab: 2.0.6 - acorn: 8.10.0 + acorn: 8.11.1 acorn-globals: 6.0.0 cssom: 0.4.4 cssstyle: 2.3.0 @@ -14320,7 +14320,7 @@ packages: '@ampproject/remapping': 2.2.1 '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping': 0.3.20 - acorn: 8.10.0 + acorn: 8.11.1 aria-query: 5.3.0 axobject-query: 3.2.1 code-red: 1.0.4 @@ -14463,7 +14463,7 @@ packages: hasBin: true dependencies: '@jridgewell/source-map': 0.3.5 - acorn: 8.10.0 + acorn: 8.11.1 commander: 2.20.3 source-map-support: 0.5.21 dev: true diff --git a/examples/wc-dapp-react/src/components/HelloWorld.tsx b/examples/wc-dapp-react/src/components/HelloWorld.tsx index a9a5c51..6c3bcc9 100644 --- a/examples/wc-dapp-react/src/components/HelloWorld.tsx +++ b/examples/wc-dapp-react/src/components/HelloWorld.tsx @@ -26,13 +26,14 @@ function HelloWorld() { 'testInvoke', 'signMessage', 'verifyMessage', - 'getWalletInfo', 'traverseIterator', + 'getWalletInfo', 'getNetworkVersion', - 'encrypt', 'decrypt', + 'encrypt', 'decryptFromArray', 'calculateFee', + 'signTransaction', ]) } diff --git a/examples/wc-dapp-sveltekit/src/routes/+page.svelte b/examples/wc-dapp-sveltekit/src/routes/+page.svelte index 154381e..b2d601b 100644 --- a/examples/wc-dapp-sveltekit/src/routes/+page.svelte +++ b/examples/wc-dapp-sveltekit/src/routes/+page.svelte @@ -1,5 +1,7 @@ - @@ -73,15 +458,38 @@

Sveltekit Dapp Example

-
- {#if !$isConnected} - +
+ {#if !isConnected} +
+ + +
{:else} - + {/if}
- + + + + + + + + + + + + + + + + +
diff --git a/packages/wallet-connect-sdk-svelte/README.md b/packages/wallet-connect-sdk-svelte/README.md index 4fee31f..58450e9 100644 --- a/packages/wallet-connect-sdk-svelte/README.md +++ b/packages/wallet-connect-sdk-svelte/README.md @@ -1,58 +1,51 @@ -# create-svelte +# WalletConnect SDK Svelte -Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). +- [Installation](#installation) +- [Setup](#setup) +- [Usage](#usage) -Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging). +## Installation -## Creating a project +Install the dependencies on your application -If you're seeing this, you've probably already done this step. Congrats! +### NPM -```bash -# create a new project in the current directory -npm create svelte@latest - -# create a new project in my-app -npm create svelte@latest my-app ``` - -## Developing - -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: - -```bash -npm run dev - -# or start the server and open the app in a new browser tab -npm run dev -- --open +npm i @cityofzion/wallet-connect-sdk-svelte @walletconnect/sign-client @walletconnect/types ``` -Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. - -## Building - -To build your library: +### YARN -```bash -npm run package ``` - -To create a production version of your showcase app: - -```bash -npm run build +yarn add @cityofzion/wallet-connect-sdk-svelte @walletconnect/sign-client @walletconnect/types ``` -You can preview the production build with `npm run preview`. - -> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. - -## Publishing - -Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). +## Setup +To begin development, first establish an account on the [Wallet Connect website](https://walletconnect.com/). Next, +generate a new Project. This process is straightforward, requiring only a few form fields. + +### Instantiate an object of the WCSDKStore class + +```ts +import { WCSDKStore } from '@cityofzion/wallet-connect-sdk-svelte' + +const wcOptions = { + projectId: '', // the ID of your project on Wallet Connect website + relayUrl: 'wss://relay.walletconnect.com', // we are using walletconnect's official relay server + metadata: { + name: 'MyApplicationName', // your application name to be displayed on the wallet + description: 'My Application description', // description to be shown on the wallet + url: 'https://myapplicationdescription.app/', // url to be linked on the wallet + icons: ['https://myapplicationdescription.app/myappicon.png'] // icon to be shown on the wallet + } +}; + + +``` -To publish your library to [npm](https://www.npmjs.com): +`autoManageSession` will reload the user's connected session and subscribe to the `disconnect` event. If you don't want this at startup, set the second constructor parameter to false and call the `manageSession` method at the correct time. -```bash -npm publish -``` +## Usage +Check this [Usage Guide](../../USAGE_GUIDE.md) to see how to use this SDK on your application. \ No newline at end of file diff --git a/packages/wallet-connect-sdk-svelte/src/WcSdkStore.ts b/packages/wallet-connect-sdk-svelte/src/WcSdkStore.ts index 3b51986..0b1d3d5 100644 --- a/packages/wallet-connect-sdk-svelte/src/WcSdkStore.ts +++ b/packages/wallet-connect-sdk-svelte/src/WcSdkStore.ts @@ -30,11 +30,12 @@ export interface IWalletConnectStore extends Neo3Invoker, Neo3Signer { * The current WalletConnect connected session */ session: Readable + setSession(session: SessionTypes.Struct): void /** * returns if the session is connected */ - readonly isConnected: Readable + readonly isConnected: () => boolean /** * returns the chain id of the connected wallet @@ -118,13 +119,18 @@ export class WCSDKStore implements IWalletConnectStore { private sdk: WcSdk | null private sessionWritable: Writable = writable(null) private signClientWritable: Writable = writable(null) + private autoManageSession: boolean - constructor(options: SignClientTypes.Options) { + constructor(options: SignClientTypes.Options, autoManageSession?: boolean) { this.setupWcClient(options) this.sdk = null + this.autoManageSession = autoManageSession ?? true } - get isConnected(): Readable { - return derived(this.sessionWritable, (session) => !!session) + setSession(session: SessionTypes.Struct): void { + this.sessionWritable.set(session) + } + isConnected(): boolean { + return this.sdk?.isConnected() ?? false } getChainId(): string | null { return this.sdk?.getChainId() ?? null @@ -241,7 +247,7 @@ export class WCSDKStore implements IWalletConnectStore { } private handleManageSession() { - if (this.sdk) { + if (this.sdk && this.autoManageSession) { this.manageSession() } }