Apply-exploration-styles (#2)

* Pretty good

* Remove debug styles

* Add more mock wallets

* Ensure square cells in wallets grid

* Update no-wallets-installed width

* Set max-height on wide viewport

* Remove comment

* Rename side panel to right panel

* Remove unused comments

* Modify user flow based on layout

* update core version and bump package version

---------

Co-authored-by: Mahmoud Aboelenein <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-connect/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -12,7 +12,7 @@
     "build-app": "tsc && vite build --config vite.config.app.ts"
   },
   "dependencies": {
-    "@sats-connect/core": "0.0.3"
+    "@sats-connect/core": "0.0.4"
   },
   "devDependencies": {
     "@ark-ui/solid": "2.2.0",

src/exampleApp/mocks.ts

@@ -78,7 +78,7 @@ export function mockAllInstalled(): Config {
 export function mockManySomeInstalled() {
   return {
     // 25 wallets
-    providers: Array.from({ length: 25 }, (_, i) => {
+    providers: Array.from({ length: 50 }, (_, i) => {
       const id = `wallet-${i + 1}`;
       return {
         name: `Wallet ${i + 1}`,

src/lib/WalletProviderSelector/components/SidePanelContainer.tsx → src/lib/WalletProviderSelector/components/RightPanelContainer.tsx

@@ -1,6 +1,6 @@
 import { ParentProps } from "solid-js";
 
-export function SidePanelContainer(props: ParentProps) {
+export function RightPanelContainer(props: ParentProps) {
   return (
     <div
       style={{

src/lib/WalletProviderSelector/components/SidePanelContentContainer.tsx → src/lib/WalletProviderSelector/components/RightPanelContentContainer.tsx

@@ -1,6 +1,6 @@
 import { ParentProps } from "solid-js";
 
-export function SidePanelContentContainer(props: ParentProps) {
+export function RightPanelContentContainer(props: ParentProps) {
   return (
     <div
       style={{

src/lib/WalletProviderSelector/components/SidePanelExplainer.tsx → src/lib/WalletProviderSelector/components/RightPanelExplainer.tsx

@@ -1,6 +1,6 @@
 import { bodyTextStyles, titleTextStyles } from "../../styles";
 
-export function SidePanelExplainer() {
+export function RightPanelExplainer() {
   return (
     <div
       style={{

src/lib/WalletProviderSelector/components/SidePanelInstallWalletPrompt.tsx → src/lib/WalletProviderSelector/components/RightPanelInstallWalletPrompt.tsx

@@ -5,20 +5,20 @@ import {
   buttonTextStyles,
   titleTextStyles,
 } from "../../styles";
-import { openChromeWebStore } from "../utils";
+import { openAppStore } from "../utils";
 
 interface Props {
   provider: SupportedWallet;
 }
 
-export function SidePanelInstallWalletPrompt(props: Props) {
+export function RightPanelInstallWalletPrompt(props: Props) {
   function handleKeyDown(event: KeyboardEvent) {
     if (event.key === "Enter" || event.key === " ") {
-      openChromeWebStore(props.provider);
+      openAppStore(props.provider);
     }
   }
   function handleClick() {
-    openChromeWebStore(props.provider);
+    openAppStore(props.provider);
   }
   return (
     <>

src/lib/WalletProviderSelector/components/SidePanelOpeningWallet.tsx → src/lib/WalletProviderSelector/components/RightPanelOpeningWallet.tsx

@@ -8,7 +8,7 @@ interface Props {
   provider: SupportedWallet;
 }
 
-export function SidePanelOpeningWallet(props: Props) {
+export function RightPanelOpeningWallet(props: Props) {
   return (
     <div
       style={{

src/lib/WalletProviderSelector/components/WalletProviderOption.tsx

@@ -46,6 +46,7 @@ export function WalletProviderOption(props: Props) {
     <div
       style={{
         "aspect-ratio": "1 / 1",
+        overflow: "hidden",
       }}
     >
       <div