Fix: Connect view on safari mobile & Remove unnecessary validation ch…

…eck for autoSelect (#1773)

* working as expected

* Bump versions

* Remove testing css

* Remove testing code from demo

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.20.1",
+  "version": "2.20.2-alpha.1",
   "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.",
   "keywords": [
     "Ethereum",

packages/core/src/validation.ts

@@ -247,7 +247,6 @@ const connectOptions = Joi.object({
       }),
       Joi.string()
     )
-    .required()
 })
 
 const disconnectOptions = Joi.object({

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

@@ -57,7 +57,7 @@
 
   export let autoSelect: ConnectOptions['autoSelect']
 
-  const { appMetadata, unstoppableResolution } = configuration
+  const { appMetadata, unstoppableResolution, device } = configuration
   const { icon } = appMetadata || {}
 
   const { walletModules, connect } = state.get()
@@ -414,6 +414,11 @@
   function scrollToTop() {
     scrollContainer && scrollContainer.scrollTo(0, 0)
   }
+
+  const isSafariMobile =
+    device.type === 'mobile' &&
+    device.browser.name &&
+    device.browser.name === 'Safari'
 </script>
 
 <style>
@@ -518,6 +523,11 @@
   .scroll-container::-webkit-scrollbar {
     display: none; /* Chrome, Safari and Opera */
   }
+  .mobile-safari {
+    /* Handles for Mobile Safari's floating Address Bar 
+    covering the bottom of the connect modal **/
+    padding-bottom: 80px;
+  }
 
   @media all and (min-width: 768px) {
     .container {
@@ -541,7 +551,7 @@
 
 {#if !autoSelect.disableModals}
   <Modal close={!connect.disableClose && close}>
-    <div class="container">
+    <div class="container" class:mobile-safari={isSafariMobile}>
       {#if connect.showSidebar}
         <Sidebar step={$modalStep$} />
       {/if}

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

@@ -71,7 +71,8 @@
   }
 
   .modal-styling {
-    --border-radius: var(--onboard-modal-border-radius,
+    --border-radius: var(
+      --onboard-modal-border-radius,
       var(--w3o-border-radius, 1rem)
     );
     border-radius: var(--border-radius) var(--border-radius) 0 0;

packages/demo/package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@web3-onboard/cede-store": "^2.0.2",
     "@web3-onboard/coinbase": "^2.2.3",
-    "@web3-onboard/core": "^2.20.1",
+    "@web3-onboard/core": "^2.20.2-alpha.1",
     "@web3-onboard/dcent": "^2.2.7",
     "@web3-onboard/enkrypt": "^2.0.3",
     "@web3-onboard/fortmatic": "^2.0.18",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.8.6",
+  "version": "2.8.7-alpha.1",
   "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.",
   "keywords": [
     "Ethereum",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.3.3",
-    "@web3-onboard/core": "^2.20.1",
+    "@web3-onboard/core": "^2.20.2-alpha.1",
     "use-sync-external-store": "1.0.0"
   },
   "peerDependencies": {

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.7.5",
+  "version": "2.7.6-alpha.1",
   "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.",
   "keywords": [
     "Ethereum",
@@ -63,7 +63,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.3.3",
-    "@web3-onboard/core": "^2.20.1",
+    "@web3-onboard/core": "^2.20.2-alpha.1",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {