Skip to content

Commit d399e0b

Browse files
authored
Fix: Connect view on safari mobile & Remove unnecessary validation check for autoSelect (#1773)
* working as expected * Bump versions * Remove testing css * Remove testing code from demo
1 parent bf2600f commit d399e0b

File tree

7 files changed

+20
-10
lines changed

7 files changed

+20
-10
lines changed

packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/core",
3-
"version": "2.20.1",
3+
"version": "2.20.2-alpha.1",
44
"description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",

packages/core/src/validation.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,6 @@ const connectOptions = Joi.object({
247247
}),
248248
Joi.string()
249249
)
250-
.required()
251250
})
252251

253252
const disconnectOptions = Joi.object({

packages/core/src/views/connect/Index.svelte

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
5858
export let autoSelect: ConnectOptions['autoSelect']
5959
60-
const { appMetadata, unstoppableResolution } = configuration
60+
const { appMetadata, unstoppableResolution, device } = configuration
6161
const { icon } = appMetadata || {}
6262
6363
const { walletModules, connect } = state.get()
@@ -414,6 +414,11 @@
414414
function scrollToTop() {
415415
scrollContainer && scrollContainer.scrollTo(0, 0)
416416
}
417+
418+
const isSafariMobile =
419+
device.type === 'mobile' &&
420+
device.browser.name &&
421+
device.browser.name === 'Safari'
417422
</script>
418423

419424
<style>
@@ -518,6 +523,11 @@
518523
.scroll-container::-webkit-scrollbar {
519524
display: none; /* Chrome, Safari and Opera */
520525
}
526+
.mobile-safari {
527+
/* Handles for Mobile Safari's floating Address Bar
528+
covering the bottom of the connect modal **/
529+
padding-bottom: 80px;
530+
}
521531
522532
@media all and (min-width: 768px) {
523533
.container {
@@ -541,7 +551,7 @@
541551

542552
{#if !autoSelect.disableModals}
543553
<Modal close={!connect.disableClose && close}>
544-
<div class="container">
554+
<div class="container" class:mobile-safari={isSafariMobile}>
545555
{#if connect.showSidebar}
546556
<Sidebar step={$modalStep$} />
547557
{/if}

packages/core/src/views/shared/Modal.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@
7171
}
7272
7373
.modal-styling {
74-
--border-radius: var(--onboard-modal-border-radius,
74+
--border-radius: var(
75+
--onboard-modal-border-radius,
7576
var(--w3o-border-radius, 1rem)
7677
);
7778
border-radius: var(--border-radius) var(--border-radius) 0 0;

packages/demo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"dependencies": {
2727
"@web3-onboard/cede-store": "^2.0.2",
2828
"@web3-onboard/coinbase": "^2.2.3",
29-
"@web3-onboard/core": "^2.20.1",
29+
"@web3-onboard/core": "^2.20.2-alpha.1",
3030
"@web3-onboard/dcent": "^2.2.7",
3131
"@web3-onboard/enkrypt": "^2.0.3",
3232
"@web3-onboard/fortmatic": "^2.0.18",

packages/react/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/react",
3-
"version": "2.8.6",
3+
"version": "2.8.7-alpha.1",
44
"description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",
@@ -63,7 +63,7 @@
6363
},
6464
"dependencies": {
6565
"@web3-onboard/common": "^2.3.3",
66-
"@web3-onboard/core": "^2.20.1",
66+
"@web3-onboard/core": "^2.20.2-alpha.1",
6767
"use-sync-external-store": "1.0.0"
6868
},
6969
"peerDependencies": {

packages/vue/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/vue",
3-
"version": "2.7.5",
3+
"version": "2.7.6-alpha.1",
44
"description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",
@@ -63,7 +63,7 @@
6363
"@vueuse/core": "^8.4.2",
6464
"@vueuse/rxjs": "^8.2.0",
6565
"@web3-onboard/common": "^2.3.3",
66-
"@web3-onboard/core": "^2.20.1",
66+
"@web3-onboard/core": "^2.20.2-alpha.1",
6767
"vue-demi": "^0.12.4"
6868
},
6969
"peerDependencies": {

0 commit comments

Comments
 (0)