[WCM] Implement missing ui + fix ui glitches

.gitignore

@@ -31,3 +31,5 @@ DerivedDataCache
 *.ipa
 *.zip
 test_results/
+
+Sources/WalletConnectModal/Secrets/secrets.json

Example/DApp/Sign/SelectChain/SelectChainViewController.swift

@@ -76,8 +76,6 @@ class SelectChainViewController: UIViewController, UITableViewDataSource {
                 optionalNamespaces: optionalNamespaces,
                 sessionProperties: sessionProperties
             ))
-
-            let uri = try await WalletConnectModal.instance.connect(topic: nil)
         }
 
         WalletConnectModal.present(from: self)

Package.swift

@@ -132,7 +132,10 @@ let package = Package(
             dependencies: ["WalletConnectUtils", "WalletConnectNetworking"]),
         .target(
             name: "WalletConnectModal",
-            dependencies: ["QRCode", "WalletConnectSign"]),
+            dependencies: ["QRCode", "WalletConnectSign"],
+            exclude: ["Secrets/secrets.json.sample"],
+            resources: [.copy("Secrets/secrets.json")]
+        ),
         .target(
             name: "WalletConnectSync",
             dependencies: ["WalletConnectSigner"]),

Sources/WalletConnectModal/Mocks/Listing+Mocks.swift

@@ -0,0 +1,13 @@
+import Foundation
+
+#if DEBUG
+
+extension Listing {
+    static let stubList: [Listing] = [
+        Listing(id: UUID().uuidString, name: "Sample Wallet", homepage: "https://example.com", order: 1, imageId: UUID().uuidString, app: Listing.App(ios: "https://example.com/download-ios", mac: "https://example.com/download-mac", safari: "https://example.com/download-safari"), mobile: Listing.Mobile(native: "sampleapp://deeplink", universal: "https://example.com/universal")),
+        Listing(id: UUID().uuidString, name: "Awesome Wallet", homepage: "https://example.com/awesome", order: 2, imageId: UUID().uuidString, app: Listing.App(ios: "https://example.com/download-ios", mac: "https://example.com/download-mac", safari: "https://example.com/download-safari"), mobile: Listing.Mobile(native: "awesomeapp://deeplink", universal: "https://example.com/awesome/universal")),
+        Listing(id: UUID().uuidString, name: "Cool Wallet", homepage: "https://example.com/cool", order: 3, imageId: UUID().uuidString, app: Listing.App(ios: "https://example.com/download-ios", mac: "https://example.com/download-mac", safari: "https://example.com/download-safari"), mobile: Listing.Mobile(native: "coolapp://deeplink", universal: "https://example.com/cool/universal"))
+    ]
+}
+
+#endif

Sources/WalletConnectModal/Modal/Modal+Previews.swift

@@ -22,7 +22,6 @@ class WebSocketFactoryMock: WebSocketFactory {
     }
 }
 
-@available(iOS 14.0, *)
 struct ModalContainerView_Previews: PreviewProvider {
 
     static var previews: some View {
@@ -33,7 +32,8 @@ struct ModalContainerView_Previews: PreviewProvider {
     struct Content: View {
 
         init() {
-            let projectId = "9bfe94c9cbf74aaa0597094ef561f703"
+
+            let projectId = Secrets.load().projectID
             let metadata = AppMetadata(
                 name: "Showcase App",
                 description: "Showcase description",

Sources/WalletConnectModal/Modal/ModalContainerView.swift

@@ -1,15 +1,13 @@
 import SwiftUI
 
 struct ModalContainerView: View {
-
     @Environment(\.presentationMode) var presentationMode
 
     @State var showModal: Bool = false
 
     var body: some View {
-
-        VStack(spacing: -10) {
-
+        VStack(spacing: 0) {
+
             Color.thickOverlay
                 .colorScheme(.light)
                 .transform {
@@ -21,6 +19,7 @@ struct ModalContainerView: View {
                         }
                     #endif
                 }
+                .opacity(showModal ? 1 : 0)
 
             if showModal {
                 ModalSheet(
@@ -34,6 +33,7 @@ struct ModalContainerView: View {
                 .animation(.spring(), value: showModal)
             }
         }
+
         .edgesIgnoringSafeArea(.all)
         .onChangeBackported(of: showModal, perform: { newValue in
             if newValue == false {

Sources/WalletConnectModal/Modal/ModalSheet.swift

@@ -24,11 +24,15 @@ public struct ModalSheet: View {
             }
         }
         .background(
-            VStack(spacing: 0) {
-                Color.accent
-                    .frame(height: 90)
-                    .cornerRadius(8, corners: [[.topLeft, .topRight]])
-                Color.background1
+            ZStack {
+                Color.thickOverlay.colorScheme(.light)
+
+                VStack(spacing: 0) {
+                    Color.accent
+                        .frame(height: 90)
+                        .cornerRadius(8, corners: [[.topLeft, .topRight]])
+                    Color.background1
+                }
             }
         )
         .toastView(toast: $viewModel.toast)
@@ -127,13 +131,17 @@ public struct ModalSheet: View {
              .viewAll:
             welcome()
         case .help:
-            WhatIsWalletView(navigateTo: viewModel.navigateTo(_:))
+            WhatIsWalletView(
+                navigateTo: viewModel.navigateTo(_:),
+                navigateToExternalLink: viewModel.navigateToExternalLink(_:)
+            )
         case .qr:
             qrCode()
         case .getWallet:
             GetAWalletView(
                 wallets: Array(viewModel.wallets.prefix(6)),
-                onTap: viewModel.onGetWalletTap(_:)
+                onWalletTap: viewModel.onGetWalletTap(_:),
+                navigateToExternalLink: viewModel.navigateToExternalLink(_:)
             )
         }
     }
@@ -154,9 +162,7 @@ extension ModalSheet {
 
     private func closeButton() -> some View {
         Button {
-            withAnimation {
-                viewModel.isShown.wrappedValue = false
-            }
+            viewModel.onCloseButton()
         } label: {
             Image(.close)
                 .padding(8)

Sources/WalletConnectModal/Modal/ModalViewModel.swift

@@ -115,6 +115,10 @@ final class ModalViewModel: ObservableObject {
         destinationStack.append(destination)
     }
 
+    func navigateToExternalLink(_ url: URL) {
+        uiApplicationWrapper.openURL(url, nil)
+    }
+
     func onListingTap(_ listing: Listing) {
         navigateToDeepLink(
             universalLink: listing.mobile.universal ?? "",
@@ -161,6 +165,12 @@ final class ModalViewModel: ObservableObject {
         toast = Toast(style: .info, message: "URI copied into clipboard")
     }
 
+    func onCloseButton() {
+        withAnimation {
+            isShown.wrappedValue = false
+        }
+    }
+
     @MainActor
     func fetchWallets() async {
         do {

Sources/WalletConnectModal/Modal/Screens/GetAWalletView.swift

@@ -3,32 +3,82 @@ import SwiftUI
 struct GetAWalletView: View {
 
     let wallets: [Listing]
-    let onTap: (Listing) -> Void
+    let onWalletTap: (Listing) -> Void
+    let navigateToExternalLink: (URL) -> Void
 
     var body: some View {
-        List {
-            ForEach(wallets) { wallet in
-                Button {
-                    onTap(wallet)
-                } label: {
-
-                    HStack {
-                        WalletImage(wallet: wallet)
-                            .frame(width: 40, height: 40)
-
-                        Text(wallet.name)
-                            .font(.system(size: 16, weight: .medium))
-                            .padding(.horizontal)
-
-                        Spacer()
+        VStack {
+
+            List {
+                ForEach(wallets) { wallet in
+                    Button {
+                        onWalletTap(wallet)
+                    } label: {
 
-                        Image(systemName: "chevron.right")
-                            .font(.system(.footnote).weight(.semibold))
+                        HStack {
+                            WalletImage(wallet: wallet)
+                                .frame(width: 40, height: 40)
+
+                            Text(wallet.name)
+                                .font(.system(size: 16, weight: .medium))
+                                .padding(.horizontal)
+
+                            Spacer()
+
+                            Image(systemName: "chevron.right")
+                                .font(.system(.footnote).weight(.semibold))
+                        }
                     }
                 }
             }
+            .frame(minHeight: 400)
+            .listStyle(.plain)
+
+            VStack(alignment: .center, spacing: 8) {
+
+                Text("Not what you’re looking for?")
+                    .font(
+                        .system(size: 16)
+                        .weight(.semibold)
+                    )
+                    .multilineTextAlignment(.center)
+                    .foregroundColor(.foreground1)
+
+                Text("With hundreds of wallets out there, 
there’s something for everyone ")
+                    .font(
+                        .system(size: 14)
+                        .weight(.medium)
+                    )
+                    .foregroundColor(.foreground2)
+                    .fixedSize(horizontal: false, vertical: true)
+
+                Button(action: {
+                    navigateToExternalLink(URL(string: "https://walletconnect.com/explorer?type=wallet")!)
+                }) {
+                    HStack {
+                        Text("Explore Wallets")
+                        Image(.external_link)
+                    }
+                }
+                .buttonStyle(W3MButtonStyle())
+            }
+            .multilineTextAlignment(.center)
+            .padding(.horizontal, 0)
+            .padding(.top, 0)
+            .frame(maxHeight: .infinity, alignment: .bottom)
         }
-        .frame(height: 500)
-        .listStyle(.plain)
+    }
+}
+
+struct GetAWalletView_Previews: PreviewProvider {
+
+    static var previews: some View {
+
+        GetAWalletView(
+            wallets: Listing.stubList,
+            onWalletTap: { _ in },
+            navigateToExternalLink: { _ in }
+        )
+        .environment(\.projectId, Secrets.load().projectID)
     }
 }

Sources/WalletConnectModal/Modal/Screens/WalletList.swift

@@ -139,9 +139,9 @@ struct WalletList: View {
             .padding(.vertical, 3)
             .frame(width: 60, height: 60)
             .background(Color.background2)
-            .cornerRadius(8)
+            .cornerRadius(16)
             .overlay(
-                RoundedRectangle(cornerRadius: 8)
+                RoundedRectangle(cornerRadius: 16)
                     .stroke(.gray.opacity(0.4), lineWidth: 1)
             )
 
@@ -153,7 +153,7 @@ struct WalletList: View {
 
             Spacer()
         }
-        .frame(maxWidth: 80, maxHeight: 96)
+        .frame(width: 80, height: 96)
     }
 
     @ViewBuilder
@@ -162,6 +162,11 @@ struct WalletList: View {
             VStack {
                 WalletImage(wallet: wallet)
                     .frame(width: 60, height: 60)
+                    .cornerRadius(16)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 16)
+                            .stroke(.gray.opacity(0.4), lineWidth: 1)
+                    )
 
                 Text(wallet.name)
                     .font(.system(size: 12))
@@ -209,7 +214,7 @@ struct WalletList: View {
             } label: {
                 HStack {
                     Text("Try Again")
-                    Image("external_link", bundle: .module)
+                    Image(.external_link)
                 }
             }
             .buttonStyle(W3MButtonStyle())

Sources/WalletConnectModal/Modal/Screens/WhatIsWalletView.swift

@@ -3,41 +3,42 @@ import SwiftUI
 struct WhatIsWalletView: View {
 
     var navigateTo: (Destination) -> Void
+    var navigateToExternalLink: (URL) -> Void
 
     var body: some View {
 
         VStack(spacing: 10) {
             HelpSection(
                 title: "A home for your digital assets",
                 description: "A wallet lets you store, send and receive digital assets like cryptocurrencies and NFTs.",
-                assets: ["DeFi", "NFT", "ETH"]
+                assets: [.DeFi, .NFT, .ETH]
             )
             HelpSection(
                 title: "One login for all of web3",
                 description: "Log in to any app by connecting your wallet. Say goodbye to countless passwords!",
-                assets: ["Login", "Profile", "Lock"]
+                assets: [.Login, .Profile, .Lock]
             )
             HelpSection(
                 title: "Your gateway to a new web",
                 description: "With your wallet, you can explore and interact with DeFi, NFTs, DAOs, and much more.",
-                assets: ["Browser", "Noun", "DAO"]
+                assets: [.Browser, .Noun, .DAO]
             )
 
             HStack {
                 Button(action: {
                     navigateTo(.getWallet)
                 }) {
                     HStack {
-                        Image("wallet", bundle: .module)
+                        Image(.wallet)
                         Text("Get a Wallet")
                     }
                 }
                 Button(action: {
-
+                    navigateToExternalLink(URL(string: "https://ethereum.org/en/wallets/")!)
                 }) {
                     HStack {
                         Text("Learn More")
-                        Image("external_link", bundle: .module)
+                        Image(.external_link)
                     }
                 }
             }
@@ -51,13 +52,13 @@ struct HelpSection: View {
 
     let title: String
     let description: String
-    let assets: [String]
+    let assets: [Asset]
 
     var body: some View {
         VStack {
             HStack {
                 ForEach(assets, id: \.self) { asset in
-                    Image(asset, bundle: .module)
+                    Image(asset)
                 }
             }
 
@@ -81,6 +82,6 @@ struct WhatIsWalletView_Previews: PreviewProvider {
 
     static var previews: some View {
 
-        WhatIsWalletView(navigateTo: { _ in})
+        WhatIsWalletView(navigateTo: { _ in}, navigateToExternalLink: { _ in })
     }
 }