@notabene/javascript-sdk 1.22.0 → 1.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CODEOWNERS +1 -1
- package/README.md +72 -1
- package/package.json +1 -1
package/CODEOWNERS
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
* @ajunge @brunosimplicio @lluissuros @omrinuri @dw1284 @ilja.nevolin @richardcrosby @
|
|
1
|
+
* @ajunge @brunosimplicio @lluissuros @omrinuri @dw1284 @ilja.nevolin @richardcrosby @david1250 @marieh_mai @timothy4915912
|
package/README.md
CHANGED
|
@@ -15,6 +15,14 @@ This library is the JavaScript SDK for loading the widget on a frontend.
|
|
|
15
15
|
|
|
16
16
|
</div>
|
|
17
17
|
|
|
18
|
+
- [Installation](#installation)
|
|
19
|
+
- [Usage](#usage)
|
|
20
|
+
- [Supported asset formats](#supported-asset-formats)
|
|
21
|
+
- [Re-rendering](#re-rendering)
|
|
22
|
+
- [Error handling](#error-handling)
|
|
23
|
+
- [Customization](#customization)
|
|
24
|
+
- [License](#license)
|
|
25
|
+
|
|
18
26
|
## Installation
|
|
19
27
|
|
|
20
28
|
There are two options for loading the Notabene SDK:
|
|
@@ -76,7 +84,7 @@ Once the widget determines the transaction is valid, it will call the `onValidSt
|
|
|
76
84
|
const currentTransactionInfo = notabene.tx;
|
|
77
85
|
```
|
|
78
86
|
|
|
79
|
-
###Supported asset formats
|
|
87
|
+
### Supported asset formats
|
|
80
88
|
|
|
81
89
|
- `USDC` the simple asset code passed as a `string`, in case different chain (polygon) -> `USDC-POLY`
|
|
82
90
|
- `CAIP19` format
|
|
@@ -112,6 +120,44 @@ notabene.renderWidget();
|
|
|
112
120
|
|
|
113
121
|
Calling the `renderWidget` methods without destroying it first will not work.
|
|
114
122
|
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
### Error handling
|
|
126
|
+
|
|
127
|
+
If any error occurs, the `onError` function from the Notabene instance will be triggered. The `error` passed as argument contains a `data` property that has the following type `ErrorData`.
|
|
128
|
+
|
|
129
|
+
> ⚠️ **Note**: These errors are mainly used for debugging internal issues while implementing the widget. They are not meant to be shown directly to the end user.
|
|
130
|
+
|
|
131
|
+
```js
|
|
132
|
+
type ErrorData = {
|
|
133
|
+
title: string;
|
|
134
|
+
detail: string;
|
|
135
|
+
code: number;
|
|
136
|
+
type: string;
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
const notabene = new Notabene({
|
|
140
|
+
...,
|
|
141
|
+
onError: (err) => {
|
|
142
|
+
const errorData = err.data;
|
|
143
|
+
|
|
144
|
+
// Do something
|
|
145
|
+
},
|
|
146
|
+
});
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
**Notabene Internal Errors**
|
|
150
|
+
|
|
151
|
+
Type | Code | Title | Detail
|
|
152
|
+
-- | -- | -- | --
|
|
153
|
+
`BAD_REQUEST` | `400` | `Bad Request` | `NotabeneBadRequest: ...`
|
|
154
|
+
`TRANSACTION_INVALID` | `400` | `Transaction Invalid` | `NotabeneTransactionInvalid: ...`
|
|
155
|
+
`TOKEN_INVALID` | `401` | `Token Invalid` | `NotabeneTokenInvalid: ...`
|
|
156
|
+
`ASSET_NOT_SUPPORTED` | `404` | `Asset Not Supported` | `NotabeneAssetNotSupported: ...`
|
|
157
|
+
`SERVICE_UNAVAILABLE` | `500` | `Service Unavailable` | `NotabeneServiceUnavailable: ...`
|
|
158
|
+
`WALLET_CONNECTED_FAILED` | `500` | `Wallet Connection Failed` | `NotabeneWalletConnectionFailed: ...`
|
|
159
|
+
`WALLET_NOT_SUPPORTED` | `501` | `Wallet Not Supported` | `NotabeneWalletNotSupported: ...`
|
|
160
|
+
|
|
115
161
|
## Customization
|
|
116
162
|
|
|
117
163
|
**Functionality**
|
|
@@ -164,11 +210,36 @@ Here you can pass configuration which will customize the styles of the widget to
|
|
|
164
210
|
fontFamily: Arial,
|
|
165
211
|
logo: {LOGO_URL},
|
|
166
212
|
mode: 'dark', // default: 'light'
|
|
213
|
+
|
|
214
|
+
// If you are using the Signature flow, here is the full list of custom theme that can be applied to the WalletConnect Modal.
|
|
215
|
+
'--w3m-font-family',
|
|
216
|
+
'--w3m-font-feature-settings',
|
|
217
|
+
'--w3m-overlay-background-color',
|
|
218
|
+
'--w3m-overlay-backdrop-filter',
|
|
219
|
+
'--w3m-z-index',
|
|
220
|
+
'--w3m-accent-color',
|
|
221
|
+
'--w3m-accent-fill-color',
|
|
222
|
+
'--w3m-background-color',
|
|
223
|
+
'--w3m-background-image-url',
|
|
224
|
+
'--w3m-logo-image-url',
|
|
225
|
+
'--w3m-background-border-radius',
|
|
226
|
+
'--w3m-container-border-radius',
|
|
227
|
+
'--w3m-wallet-icon-border-radius',
|
|
228
|
+
'--w3m-wallet-icon-large-border-radius',
|
|
229
|
+
'--w3m-wallet-icon-small-border-radius',
|
|
230
|
+
'--w3m-input-border-radius',
|
|
231
|
+
'--w3m-notification-border-radius',
|
|
232
|
+
'--w3m-button-border-radius',
|
|
233
|
+
'--w3m-secondary-button-border-radius',
|
|
234
|
+
'--w3m-icon-button-border-radius',
|
|
235
|
+
'--w3m-button-hover-highlight-border-radius',
|
|
167
236
|
}
|
|
168
237
|
```
|
|
169
238
|
|
|
170
239
|
To get a list of supported fonts, visit [https://fonts.google.com/](https://fonts.google.com/)
|
|
171
240
|
|
|
241
|
+
To get more details about the WalletConnect theme variables, visit [General style variables](https://docs.walletconnect.com/2.0/web/web3modal/react/wagmi/theming#general-style-variables).
|
|
242
|
+
|
|
172
243
|
---
|
|
173
244
|
|
|
174
245
|
**Dictionary**
|
package/package.json
CHANGED