Skip to content

Commit 59d84df

Browse files
cmeislcmeisl
authored
version 0.8.2 (#222)
* Contract decoration improvements (#209) * Fix truffle contract decoration with web3 0.20 * Improve contract tests * - Improve robustness of contract tests - Fix contract method properties not being properly assigned on web3v1 - Fix overloaded contract methods not being properly assigned * Use Object.keys to pull properties off function * Truffle fixes (#219) * Fix legacyCall with truffle contracts * Fix truffle calls hanging forever * Configure mobile position (#216) * Setup an initial config parameters * - Improve notifications position API - Set default notification position on mobile to 'top' * Add additional notificationsPosition tests * Readme wording * Document both APIs for notificationsPosition * Update readme (#221) * update to version 0.8.2
1 parent bec0928 commit 59d84df

File tree

13 files changed

+322
-77
lines changed

13 files changed

+322
-77
lines changed

‎README.md

+47-10
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,16 @@ yarn add bnc-assist
4343
#### Script Tag
4444

4545
The library uses [semantic versioning](https://semver.org/spec/v2.0.0.html).
46-
The current version is 0.8.1.
46+
The current version is 0.8.2.
4747
There are minified and non-minified versions.
4848
Put this script at the top of your `<head>`
4949

5050
```html
51-
<script src="https://assist.blocknative.com/0-8-1/assist.js"></script>
51+
<script src="https://assist.blocknative.com/0-8-2/assist.js"></script>
5252

5353
<!-- OR... -->
5454

55-
<script src="https://assist.blocknative.com/0-8-1/assist.min.js"></script>
55+
<script src="https://assist.blocknative.com/0-8-2/assist.min.js"></script>
5656
```
5757

5858
### Initialize the Library
@@ -203,13 +203,49 @@ var config = {
203203
},
204204
style: {
205205
darkMode: Boolean, // Set Assist UI to dark mode
206-
notificationsPosition: String, // Defines which corner transaction notifications will be positioned. Options: 'topLeft', 'topRight', 'bottomRight', 'bottomLeft'. ['bottomRight']
206+
notificationsPosition: Object || String, // Defines where in the viewport notifications will be positioned. See below: 'Notification Positioning'
207207
css: String // Custom css string to overide Assist default styles
208208
},
209209
truffleContract: Boolean, // Set to true if contract object has been instantiated with truffle-contract [false]
210210
}
211211
```
212212

213+
### Notification Positioning
214+
215+
The position that notifications appear in the viewport can be configured by defining `style.notificationsPosition` in your config when initializing assist.
216+
217+
`notificationsPosition` can be either a `String` which will set only the desktop position, or an `Object` containing params `desktop` and/or `mobile` which set the notification position on desktop and mobile respectively.
218+
219+
Options for setting `desktop` positions: `['topLeft', 'topRight', 'bottomLeft', 'bottomRight']`
220+
221+
Options for setting `mobile` positions: `['top', 'bottom']`
222+
223+
By default, `Assist` positions notifications at the `top` of the viewport on mobile, and the `bottomRight` of the viewport on desktop.
224+
225+
#### Examples
226+
227+
```javascript
228+
// Set notifications to bottom on mobile and top right on desktop
229+
const config = {
230+
style: {
231+
notificationsPosition: {
232+
desktop: 'topLeft',
233+
mobile: 'bottom'
234+
}
235+
}
236+
}
237+
```
238+
239+
```javascript
240+
// Sets only the desktop position
241+
const config = {
242+
style: {
243+
notificationsPosition: 'bottomRight'
244+
}
245+
}
246+
```
247+
248+
213249
### Custom Transaction Messages
214250

215251
Custom transaction messages can be set to override the default messages `Assist` provides. To do this you provide callback functions for each `eventCode` that you want to override. The callback functions must return a `String` and will be called with the following object to provide context information about the transaction:
@@ -465,23 +501,24 @@ assistInstance.getState()
465501
const style = {
466502
darkMode: Boolean, // Set Assist UI to dark mode
467503
css: String, // Custom css string to overide Assist default styles
468-
notificationsPosition: String, // Defines which corner transaction notifications will be positioned. Options: 'topLeft', 'topRight', 'bottomRight', 'bottomLeft'. ['bottomRight']
504+
notificationsPosition: String || Object, // Defines which corner transaction notifications will be positioned. See 'Notification Positioning'
469505
}
470506
```
471507

472508
#### Examples
473509

474510
```javascript
475-
// Enable dark mode
511+
// Enable dark mode and position notifications at the bottom left on desktop
476512
const style = {
477-
darkMode: true
513+
darkMode: true,
514+
notificationsPosition: 'bottomLeft'
478515
}
479516
assistInstance.updateStyle(style)
480517

481-
// Disable dark mode and set notification background to black
518+
// Position notifications at the bottom of the viewport on mobile and set their background to black
482519
const style = {
483-
darkMode: false,
484-
css: `.bn-notification { background: black }`
520+
css: `.bn-notification { background: black }`,
521+
notificationsPosition: { mobile: 'bottom' }
485522
}
486523
assistInstance.updateStyle(style)
487524
```

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bnc-assist",
3-
"version": "0.8.1",
3+
"version": "0.8.2",
44
"description": "Blocknative Assist js library for Dapp developers",
55
"main": "lib/assist.min.js",
66
"scripts": {

‎src/__integration-tests__/ui-rendering/event-definitions.js

+62-19
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,24 @@ export default {
3535
success: {
3636
categories: ['userInitiatedNotify'],
3737
customStates: [
38-
{ config: { messages: { success: () => 'success custom msg' } } }
38+
{
39+
config: { messages: { success: () => 'success custom msg' }, style: {} }
40+
}
3941
]
4042
},
4143
pending: {
4244
categories: ['userInitiatedNotify'],
4345
params: { transaction: mockTxFactory({ startTime: true }) },
4446
customStates: [
45-
{ config: { messages: { pending: () => 'pending custom msg' } } }
47+
{
48+
config: { messages: { pending: () => 'pending custom msg' }, style: {} }
49+
}
4650
]
4751
},
4852
error: {
4953
categories: ['userInitiatedNotify'],
5054
customStates: [
51-
{ config: { messages: { error: () => 'error custom msg' } } }
55+
{ config: { messages: { error: () => 'error custom msg' }, style: {} } }
5256
]
5357
},
5458
browserFail: {
@@ -64,7 +68,10 @@ export default {
6468
},
6569
{
6670
transactionQueue: [{ transaction: mockTransaction }],
67-
config: { messages: { txSpeedUp: () => 'txSpeedUp custom msg' } }
71+
config: {
72+
messages: { txSpeedUp: () => 'txSpeedUp custom msg' },
73+
style: {}
74+
}
6875
}
6976
]
7077
},
@@ -87,7 +94,8 @@ export default {
8794
config: {
8895
images: {
8996
complete: { src: 'custom-img-src', srcset: 'custom-img-srcset' }
90-
}
97+
},
98+
style: {}
9199
}
92100
}
93101
]
@@ -105,7 +113,7 @@ export default {
105113
clickHandlers: new Set(['onClose', 'onClick']),
106114
customStates: [
107115
initialState,
108-
{ userCurrentNetworkId: 42, config: { networkId: 4 } }
116+
{ userCurrentNetworkId: 42, config: { networkId: 4, style: {} } }
109117
]
110118
},
111119
welcomeUser: {
@@ -118,7 +126,8 @@ export default {
118126
config: {
119127
images: {
120128
welcome: { src: 'custom-img-src', srcset: 'custom-img-srcset' }
121-
}
129+
},
130+
style: {}
122131
}
123132
}
124133
]
@@ -135,7 +144,8 @@ export default {
135144
{
136145
config: {
137146
minimumBalance: '12300000000000000000',
138-
messages: { nsfFail: () => 'nsfFail custom msg' }
147+
messages: { nsfFail: () => 'nsfFail custom msg' },
148+
style: {}
139149
}
140150
}
141151
]
@@ -145,7 +155,12 @@ export default {
145155
params: { transaction: mockTxFactory() },
146156
customStates: [
147157
initialState,
148-
{ config: { messages: { txRepeat: () => 'txRepeat custom msg' } } }
158+
{
159+
config: {
160+
messages: { txRepeat: () => 'txRepeat custom msg' },
161+
style: {}
162+
}
163+
}
149164
]
150165
},
151166
txAwaitingApproval: {
@@ -157,7 +172,8 @@ export default {
157172
config: {
158173
messages: {
159174
txAwaitingApproval: () => 'txAwaitingApproval custom msg'
160-
}
175+
},
176+
style: {}
161177
}
162178
}
163179
]
@@ -167,7 +183,12 @@ export default {
167183
params: { transaction: mockTxFactory() },
168184
customStates: [
169185
initialState,
170-
{ config: { messages: { txRequest: () => 'txRequest custom msg' } } }
186+
{
187+
config: {
188+
messages: { txRequest: () => 'txRequest custom msg' },
189+
style: {}
190+
}
191+
}
171192
]
172193
},
173194
txConfirmReminder: {
@@ -177,7 +198,8 @@ export default {
177198
initialState,
178199
{
179200
config: {
180-
messages: { txConfirmReminder: () => 'txConfirmReminder custom msg' }
201+
messages: { txConfirmReminder: () => 'txConfirmReminder custom msg' },
202+
style: {}
181203
}
182204
}
183205
]
@@ -187,31 +209,43 @@ export default {
187209
params: { transaction: mockTxFactory() },
188210
customStates: [
189211
initialState,
190-
{ config: { messages: { txSendFail: () => 'txSendFail custom msg' } } }
212+
{
213+
config: {
214+
messages: { txSendFail: () => 'txSendFail custom msg' },
215+
style: {}
216+
}
217+
}
191218
]
192219
},
193220
txSent: {
194221
categories: ['activeTransaction', 'activeContract'],
195222
params: { transaction: mockTxFactory({ startTime: true }) },
196223
customStates: [
197224
initialState,
198-
{ config: { messages: { txSent: () => 'txSent custom msg' } } }
225+
{ config: { messages: { txSent: () => 'txSent custom msg' }, style: {} } }
199226
]
200227
},
201228
txStall: {
202229
categories: ['activeTransaction', 'activeContract'],
203230
params: { transaction: mockTxFactory({ nonce: true, startTime: true }) },
204231
customStates: [
205232
initialState,
206-
{ config: { messages: { txStall: () => 'txStall custom msg' } } }
233+
{
234+
config: { messages: { txStall: () => 'txStall custom msg' }, style: {} }
235+
}
207236
]
208237
},
209238
txPending: {
210239
categories: ['activeTransaction', 'activeContract'],
211240
params: { transaction: mockTxFactory({ nonce: true, startTime: true }) },
212241
customStates: [
213242
initialState,
214-
{ config: { messages: { txPending: () => 'txPending custom msg' } } }
243+
{
244+
config: {
245+
messages: { txPending: () => 'txPending custom msg' },
246+
style: {}
247+
}
248+
}
215249
]
216250
},
217251
txConfirmed: {
@@ -223,7 +257,10 @@ export default {
223257
},
224258
{
225259
transactionQueue: [{ transaction: mockTransaction }],
226-
config: { messages: { txConfirmed: () => 'txConfirmed custom msg' } }
260+
config: {
261+
messages: { txConfirmed: () => 'txConfirmed custom msg' },
262+
style: {}
263+
}
227264
}
228265
]
229266
},
@@ -237,7 +274,8 @@ export default {
237274
{
238275
transactionQueue: [{ transaction: mockTransaction }],
239276
config: {
240-
messages: { txConfirmed: () => 'txConfirmedClient custom msg' }
277+
messages: { txConfirmed: () => 'txConfirmedClient custom msg' },
278+
style: {}
241279
}
242280
}
243281
]
@@ -247,7 +285,12 @@ export default {
247285
params: { transaction: mockTxFactory({ nonce: true, startTime: true }) },
248286
customStates: [
249287
initialState,
250-
{ config: { messages: { txFailed: () => 'txFailed custom msg' } } }
288+
{
289+
config: {
290+
messages: { txFailed: () => 'txFailed custom msg' },
291+
style: {}
292+
}
293+
}
251294
]
252295
}
253296
}

‎src/__integration-tests__/ui-rendering/index.test.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ export const initialState = Object.assign({}, state, {
1818
engine: { name: 'Blink' },
1919
os: { name: 'Linux' },
2020
platform: { type: 'desktop' }
21-
},
22-
config: {}
21+
}
2322
})
2423

2524
// Generates the suffix to append to test names that are

‎src/__tests__/helpers/iframe.test.js

+46-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { updateState, initialState } from '~/js/helpers/state'
77
import { handleEvent } from '~/js/helpers/events'
88

99
test('iframe gets rendered to document', () => {
10-
updateState({ config: {} })
1110
createIframe(window.document, styles)
1211

1312
const iframe = document.querySelector('iframe')
@@ -28,6 +27,45 @@ describe('when the initial notification position is bottomRight', () => {
2827
const da = assist.init(config)
2928
da.updateStyle({ notificationsPosition: 'topLeft' })
3029
})
30+
test(`changing the notification position to {desktop: 'topLeft'} doesn't throw`, () => {
31+
const da = assist.init(config)
32+
da.updateStyle({ notificationsPosition: { desktop: 'topLeft' } })
33+
})
34+
})
35+
describe('and there are notifications in the DOM', () => {
36+
test(`changing the notification position to topLeft doesn't throw`, () => {
37+
const da = assist.init(config)
38+
handleEvent({ eventCode: 'txPending', categoryCode: 'activeTransaction' })
39+
handleEvent({ eventCode: 'txSent', categoryCode: 'activeTransaction' })
40+
handleEvent({ eventCode: 'txFailed', categoryCode: 'activeTransaction' })
41+
da.updateStyle({ notificationsPosition: 'topLeft' })
42+
})
43+
test(`changing the notification position to {desktop: 'topLeft'} doesn't throw`, () => {
44+
const da = assist.init(config)
45+
handleEvent({ eventCode: 'txPending', categoryCode: 'activeTransaction' })
46+
handleEvent({ eventCode: 'txSent', categoryCode: 'activeTransaction' })
47+
handleEvent({ eventCode: 'txFailed', categoryCode: 'activeTransaction' })
48+
da.updateStyle({ notificationsPosition: { desktop: 'topLeft' } })
49+
})
50+
})
51+
})
52+
53+
describe(`when the initial notification position is {desktop: 'bottomRight'}`, () => {
54+
let notificationsPosition
55+
let config
56+
beforeEach(() => {
57+
notificationsPosition = { desktop: 'bottomRight' }
58+
config = { dappId: '123', style: { notificationsPosition } }
59+
})
60+
describe('and there are no notifications in the DOM', () => {
61+
test(`changing the notification position to topLeft doesn't throw`, () => {
62+
const da = assist.init(config)
63+
da.updateStyle({ notificationsPosition: 'topLeft' })
64+
})
65+
test(`changing the notification position to {desktop: 'topLeft'} doesn't throw`, () => {
66+
const da = assist.init(config)
67+
da.updateStyle({ notificationsPosition: { desktop: 'topLeft' } })
68+
})
3169
})
3270
describe('and there are notifications in the DOM', () => {
3371
test(`changing the notification position to topLeft doesn't throw`, () => {
@@ -37,6 +75,13 @@ describe('when the initial notification position is bottomRight', () => {
3775
handleEvent({ eventCode: 'txFailed', categoryCode: 'activeTransaction' })
3876
da.updateStyle({ notificationsPosition: 'topLeft' })
3977
})
78+
test(`changing the notification position to {desktop: 'topLeft'} doesn't throw`, () => {
79+
const da = assist.init(config)
80+
handleEvent({ eventCode: 'txPending', categoryCode: 'activeTransaction' })
81+
handleEvent({ eventCode: 'txSent', categoryCode: 'activeTransaction' })
82+
handleEvent({ eventCode: 'txFailed', categoryCode: 'activeTransaction' })
83+
da.updateStyle({ notificationsPosition: { desktop: 'topLeft' } })
84+
})
4085
})
4186
})
4287

0 commit comments

Comments
 (0)