[WCM] Landscape improvements

Sources/WalletConnectModal/Modal/ModalContainerView.swift

@@ -7,19 +7,7 @@ struct ModalContainerView: View {
 
     var body: some View {
         VStack(spacing: 0) {
-
-            Color.thickOverlay
-                .colorScheme(.light)
-                .transform {
-                    #if os(iOS)
-                        $0.onTapGesture {
-                            withAnimation {
-                                showModal = false
-                            }
-                        }
-                    #endif
-                }
-                .opacity(showModal ? 1 : 0)
+            Color.clear
 
             if showModal {
                 ModalSheet(
@@ -33,8 +21,22 @@ struct ModalContainerView: View {
                 .animation(.spring(), value: showModal)
             }
         }
-
+        .background(
+            Color.thickOverlay
+                .colorScheme(.light)
+                .opacity(showModal ? 1 : 0)
+                .transform {
+                    #if os(iOS)
+                        $0.onTapGesture {
+                            withAnimation {
+                                showModal = false
+                            }
+                        }
+                    #endif
+                }
+        )
         .edgesIgnoringSafeArea(.all)
+        .ignoresSafeArea(.keyboard, edges: .bottom)
         .onChangeBackported(of: showModal, perform: { newValue in
             if newValue == false {
                 withAnimation {

Sources/WalletConnectModal/Modal/ModalSheet.swift

@@ -3,39 +3,46 @@ import SwiftUI
 public struct ModalSheet: View {
     @ObservedObject var viewModel: ModalViewModel
 
+    @Environment(\.verticalSizeClass) var verticalSizeClass
+
+    @State var searchEditing = false
+
+    var isLandscape: Bool {
+        verticalSizeClass == .compact
+    }
+
     public var body: some View {
         VStack(spacing: 0) {
             modalHeader()
 
             VStack(spacing: 0) {
                 contentHeader()
                 content()
+
             }
             .frame(maxWidth: .infinity)
             .background(Color.background1)
             .cornerRadius(30, corners: [.topLeft, .topRight])
         }
-        .padding(.bottom, 40)
         .edgesIgnoringSafeArea(.bottom)
+        .background(
+            VStack(spacing: 0) {
+                Color.accent
+                    .frame(height: 90)
+                    .cornerRadius(8, corners: [[.topLeft, .topRight]])
+                Color.background1
+            }
+        )
+        .toastView(toast: $viewModel.toast)
+        .if(isLandscape) {
+            $0.padding(.horizontal, 80)
+        }
         .onAppear {
             Task {
                 await viewModel.fetchWallets()
                 await viewModel.createURI()
             }
         }
-        .background(
-            ZStack {
-                Color.thickOverlay.colorScheme(.light)
-
-                VStack(spacing: 0) {
-                    Color.accent
-                        .frame(height: 90)
-                        .cornerRadius(8, corners: [[.topLeft, .topRight]])
-                    Color.background1
-                }
-            }
-        )
-        .toastView(toast: $viewModel.toast)
     }
 
     private func modalHeader() -> some View {
@@ -81,14 +88,33 @@ public struct ModalSheet: View {
         .overlay(
             VStack {
                 if viewModel.destination.hasSearch {
-                    TextField("Search", text: $viewModel.searchTerm)
-                        .transform {
-                            #if os(iOS)
-                            $0.textFieldStyle(.roundedBorder)
-                                .autocapitalization(.none)
+
+                    HStack {
+                        Image(systemName: "magnifyingglass")
+                        TextField("Search", text: $viewModel.searchTerm, onEditingChanged: { editing in
+                            self.searchEditing = editing
+                        })
+                        .transform { view in
+                            #if os(macOS)
+                            view
+                            #else
+                            view.autocapitalization(.none)
                             #endif
                         }
-                        .padding(.horizontal, 50)
+                    }
+                    .padding(.vertical, 4)
+                    .padding(.horizontal, 10)
+                    .background(Color.background3)
+                    .foregroundColor(searchEditing ? .foreground1 : .foreground3)
+                    .cornerRadius(28)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 28)
+                            .stroke(searchEditing ? Color.accent : Color.thinOverlay, lineWidth: 1)
+                    )
+                    .onDisappear {
+                        searchEditing = false
+                    }
+                    .padding(.horizontal, 50)
                 } else {
                     Text(viewModel.destination.contentTitle)
                         .font(.system(size: 20).weight(.semibold))
@@ -135,14 +161,18 @@ public struct ModalSheet: View {
                 navigateTo: viewModel.navigateTo(_:),
                 navigateToExternalLink: viewModel.navigateToExternalLink(_:)
             )
+            .padding(.bottom, 20)
         case .qr:
             qrCode()
+                .padding(.bottom, 20)
         case .getWallet:
             GetAWalletView(
                 wallets: Array(viewModel.wallets.prefix(6)),
                 onWalletTap: viewModel.onGetWalletTap(_:),
                 navigateToExternalLink: viewModel.navigateToExternalLink(_:)
             )
+            .frame(minHeight: isLandscape ? 200 : 550)
+            .padding(.bottom, 20)
         }
     }
 }

Sources/WalletConnectModal/Modal/ModalViewModel.swift

@@ -79,7 +79,7 @@ final class ModalViewModel: ObservableObject {
             .sink { sessions in
                 print(sessions)
                 isShown.wrappedValue = false
-                self.toast = Toast(style: .success, message: "Session estabilished", duration: 15)
+                self.toast = Toast(style: .success, message: "Session estabilished", duration: 5)
             }
             .store(in: &disposeBag)
 

Sources/WalletConnectModal/Modal/Screens/GetAWalletView.swift

@@ -1,20 +1,17 @@
 import SwiftUI
 
 struct GetAWalletView: View {
-
     let wallets: [Listing]
     let onWalletTap: (Listing) -> Void
     let navigateToExternalLink: (URL) -> Void
 
     var body: some View {
-        VStack {
-
+        ScrollView {
             List {
-                ForEach(wallets) { wallet in
+                ForEach(wallets, id: \.id) { wallet in
                     Button {
                         onWalletTap(wallet)
                     } label: {
-
                         HStack {
                             WalletImage(wallet: wallet)
                                 .frame(width: 40, height: 40)
@@ -34,8 +31,8 @@ struct GetAWalletView: View {
             .frame(minHeight: 400)
             .listStyle(.plain)
 
+
             VStack(alignment: .center, spacing: 8) {
-
                 Text("Not what you’re looking for?")
                     .font(
                         .system(size: 16)
@@ -71,9 +68,7 @@ struct GetAWalletView: View {
 }
 
 struct GetAWalletView_Previews: PreviewProvider {
-
     static var previews: some View {
-
         GetAWalletView(
             wallets: Listing.stubList,
             onWalletTap: { _ in },