@1001-digital/components 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -17,7 +17,7 @@
     "@wagmi/vue": ">=0.5.0",
     "viem": ">=2.0.0",
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^1.0.0"
+    "@1001-digital/styles": "^1.0.1"
   },
   "peerDependenciesMeta": {
     "@wagmi/core": {

package/src/base/components/Button.vue

@@ -165,6 +165,10 @@ const linkProps = computed(() => {
       inline-size: min-content;
     }
 
+    &.block {
+      inline-size: 100%;
+    }
+
     &.invisible {
       position: absolute;
       inset-inline-start: -200vw;

package/src/base/components/Dialog.vue

@@ -271,6 +271,20 @@ onBeforeUnmount(() => {
     }
   }
 
+  /* Stacked compat dialog z-index layering */
+  .overlay ~ .dialog.compat {
+    z-index: calc(var(--z-index-dialog) + 2);
+  }
+  .overlay ~ .dialog.compat.open + .overlay {
+    z-index: calc(var(--z-index-dialog) + 1);
+  }
+  .overlay ~ .overlay ~ .dialog.compat {
+    z-index: calc(var(--z-index-dialog) + 4);
+  }
+  .overlay ~ .overlay ~ .dialog.compat.open + .overlay {
+    z-index: calc(var(--z-index-dialog) + 3);
+  }
+
   html:has(dialog[open]),
   body:has(dialog[open]),
   html:has(.dialog.open),

package/src/evm/components/EvmConnect.vue

@@ -25,19 +25,27 @@
       @connected="onInAppConnected"
       @back="showInAppSetup = false"
     />
-    <Alert
-      v-else-if="errorMessage"
-      type="error"
-    >
-      {{ errorMessage }}
-    </Alert>
+    <template v-else-if="errorMessage">
+      <Alert type="error">
+        {{ errorMessage }}
+      </Alert>
+      <Button
+        class="link muted small"
+        @click="resetConnection"
+      >
+        <Icon type="chevron-left" />
+        <span>Back</span>
+      </Button>
+    </template>
     <EvmMetaMaskQR
       v-else-if="metaMaskUri"
       :uri="metaMaskUri"
+      @back="resetConnection"
     />
     <EvmWalletConnectWallets
       v-else-if="walletConnectUri"
       :uri="walletConnectUri"
+      @back="resetConnection"
     />
     <template v-else-if="isConnecting">
       <Loading
@@ -54,7 +62,7 @@
         v-for="connector in shownConnectors"
         :key="connector.uid"
         @click="() => login(connector)"
-        class="choose-connector"
+        class="block choose-connector"
       >
         <img
           v-if="ICONS[connector.name] || connector.icon"
@@ -72,7 +80,7 @@
       <Button
         v-if="wcConnector"
         @click="loginWithSafe"
-        class="choose-connector"
+        class="block choose-connector"
       >
         <img
           :src="safeIcon"
@@ -83,7 +91,7 @@
       <Button
         v-if="inAppConnector"
         @click="showInAppSetup = true"
-        class="choose-connector"
+        class="block choose-connector"
       >
         <img
           :src="inAppIcon"
@@ -277,18 +285,23 @@ const login = async (connector: Connector) => {
   }
 }
 
-const onInAppConnected = () => {
-  chooseModalOpen.value = false
-  showInAppSetup.value = false
-}
-
-const onModalClosed = () => {
+const resetConnection = () => {
   errorMessage.value = ''
   isConnecting.value = false
   connectingWallet.value = ''
   metaMaskUri.value = ''
   walletConnectUri.value = ''
   safeDeepLink.value = false
+}
+
+const onInAppConnected = () => {
+  chooseModalOpen.value = false
+  showInAppSetup.value = false
+}
+
+const onModalClosed = () => {
+  chooseModalOpen.value = false
+  resetConnection()
   showInAppSetup.value = false
 }
 
@@ -309,8 +322,6 @@ onMounted(() => check())
   gap: var(--spacer);
 
   button.choose-connector {
-    width: 100%;
-    inline-size: auto;
     justify-content: flex-start;
     padding-inline-start: var(--ui-padding-inline);
 
@@ -337,6 +348,5 @@ onMounted(() => check())
 
 .link.muted {
   justify-self: center;
-  font-size: var(--font-xs);
 }
 </style>

package/src/evm/components/EvmInAppWalletSetup.vue

@@ -5,21 +5,29 @@
       v-if="step === 'choose'"
       class="setup-step"
     >
+      <p class="muted font-sm">{{ note }}</p>
+
       <div class="setup-options">
-        <Button @click="startGenerate">
+        <Button
+          class="block"
+          @click="startGenerate"
+        >
           <Icon type="plus" />
           <span>Create New Wallet</span>
         </Button>
-        <Button @click="step = 'restore'">
+        <Button
+          class="block"
+          @click="step = 'restore'"
+        >
           <Icon type="key" />
-          <span>I Have a Seed Phrase</span>
+          <span>Use Existing Recovery Key</span>
         </Button>
       </div>
       <Button
         class="link muted small"
         @click="$emit('back')"
       >
-        <Icon type="arrow-left" />
+        <Icon type="chevron-left" />
         <span>Back</span>
       </Button>
     </div>
@@ -29,9 +37,11 @@
       v-else-if="step === 'generate'"
       class="setup-step"
     >
-      <Alert type="info">
-        Write down these 12 words in order. You will need them to restore your wallet. They will not be shown again.
-      </Alert>
+      <p class="muted font-sm">
+        Write down these 12 words in order. Think of them as your secure
+        password so keep them safe - you will need them to restore your account.
+        They will not be shown again.
+      </p>
 
       <div class="generated-words">
         <div
@@ -44,11 +54,14 @@
         </div>
       </div>
 
-      <FormCheckbox v-model="backupConfirmed">
-        I've saved my seed phrase
-      </FormCheckbox>
+      <div>
+        <FormCheckbox v-model="backupConfirmed">
+          I've saved my seed phrase
+        </FormCheckbox>
+      </div>
 
       <Button
+        class="block"
         :disabled="!backupConfirmed"
         @click="confirmGenerated"
       >
@@ -58,7 +71,7 @@
         class="link muted small"
         @click="step = 'choose'"
       >
-        <Icon type="arrow-left" />
+        <Icon type="chevron-left" />
         <span>Back</span>
       </Button>
     </div>
@@ -68,7 +81,9 @@
       v-else-if="step === 'restore'"
       class="setup-step"
     >
-      <p class="muted font-sm">Enter your 12-word seed phrase to restore your wallet.</p>
+      <p class="muted font-sm">
+        Enter your 12-word seed phrase to restore your wallet.
+      </p>
 
       <EvmSeedPhraseInput
         v-model="restorePhrase"
@@ -77,6 +92,7 @@
       />
 
       <Button
+        class="block"
         :disabled="!restoreValid"
         @click="restoreWallet"
       >
@@ -86,7 +102,7 @@
         class="link muted small"
         @click="step = 'choose'"
       >
-        <Icon type="arrow-left" />
+        <Icon type="chevron-left" />
         <span>Back</span>
       </Button>
     </div>
@@ -116,6 +132,15 @@ import Loading from '../../base/components/Loading.vue'
 import EvmSeedPhraseInput from './EvmSeedPhraseInput.vue'
 import { prepareInAppWallet } from '../connectors/inAppWallet'
 
+const props = withDefaults(
+  defineProps<{
+    note?: string
+  }>(),
+  {
+    note: 'Create a browser-based wallet stored locally on this device. Only you have access to your keys.',
+  },
+)
+
 const emit = defineEmits<{
   connected: []
   back: []
@@ -190,11 +215,6 @@ async function restoreWallet() {
 .setup-options {
   display: grid;
   gap: var(--spacer);
-
-  :deep(button),
-  :deep(.button) {
-    width: 100%;
-  }
 }
 
 .generated-words {
@@ -203,25 +223,20 @@ async function restoreWallet() {
   gap: var(--spacer-sm);
 }
 
-@media (min-width: 600px) {
-  .generated-words {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
 .generated-word {
   display: flex;
   align-items: center;
-  gap: var(--spacer-xs);
+  gap: var(--spacer-sm);
   border: var(--border);
   border-radius: var(--border-radius);
-  padding: var(--spacer-xs) var(--spacer-sm);
+  padding: var(--spacer-sm);
 
   .word-number {
     font-size: var(--font-xs);
     color: var(--muted);
     min-width: 1.5em;
     text-align: right;
+    user-select: none;
   }
 
   .word-text {
@@ -232,7 +247,5 @@ async function restoreWallet() {
 
 .link.muted {
   justify-self: center;
-  font-size: var(--font-xs);
 }
-
 </style>

package/src/evm/components/EvmMetaMaskQR.vue

@@ -4,12 +4,31 @@
       Scan the code in your MetaMask mobile app
     </template>
   </EvmConnectorQR>
+  <Button
+    class="link muted small"
+    @click="$emit('back')"
+  >
+    <Icon type="chevron-left" />
+    <span>Back</span>
+  </Button>
 </template>
 
 <script setup lang="ts">
 import EvmConnectorQR from './EvmConnectorQR.vue'
+import Button from '../../base/components/Button.vue'
+import Icon from '../../base/components/Icon.vue'
 
 defineProps<{
   uri: string
 }>()
+
+defineEmits<{
+  back: []
+}>()
 </script>
+
+<style scoped>
+.link.muted {
+  justify-self: center;
+}
+</style>

package/src/evm/components/EvmProfile.vue

@@ -48,7 +48,7 @@
     <div class="profile-actions">
       <slot name="actions" />
 
-      <EvmSwitchNetwork>
+      <EvmSwitchNetwork class-name="block">
         <template #default="{ currentChain }">
           <Icon type="wallet" />
           <span>Switch Network ({{ currentChain?.name || 'Unknown' }})</span>
@@ -57,6 +57,7 @@
 
       <Button
         v-if="ensName"
+        class="block"
         :to="`https://app.ens.domains/${ensName}`"
         target="_blank"
       >
@@ -65,7 +66,7 @@
       </Button>
 
       <Button
-        class="danger"
+        class="block danger"
         @click="disconnect"
       >
         <span>Disconnect</span>
@@ -181,9 +182,5 @@ const disconnect = async () => {
   gap: var(--spacer);
   padding-block-start: var(--spacer);
 
-  & :deep(.button),
-  & :deep(button) {
-    width: 100%;
-  }
 }
 </style>

package/src/evm/components/EvmSeedPhraseInput.vue

@@ -10,7 +10,11 @@
         <label :for="`seed-word-${i}`">{{ i + 1 }}</label>
         <input
           :id="`seed-word-${i}`"
-          :ref="(el) => { if (el) inputRefs[i] = el as HTMLInputElement }"
+          :ref="
+            (el) => {
+              if (el) inputRefs[i] = el as HTMLInputElement
+            }
+          "
           v-model="words[i]"
           type="text"
           autocomplete="off"
@@ -55,9 +59,7 @@ const isValid = computed(() =>
 )
 
 const phrase = computed(() =>
-  words.value
-    .map((w) => w.trim().toLowerCase())
-    .join(' '),
+  words.value.map((w) => w.trim().toLowerCase()).join(' '),
 )
 
 watch(
@@ -155,19 +157,14 @@ onMounted(() => {
   gap: var(--spacer-sm);
 }
 
-@media (min-width: 600px) {
-  .seed-phrase-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
 
 .seed-word {
   display: flex;
   align-items: center;
-  gap: var(--spacer-xs);
+  gap: var(--spacer-sm);
   border: var(--border);
   border-radius: var(--border-radius);
-  padding: var(--spacer-xs) var(--spacer-sm);
+  padding: var(--spacer-sm);
   transition: border-color var(--speed);
 
   &:focus-within {

package/src/evm/components/EvmSwitchNetwork.vue

@@ -37,7 +37,7 @@
           v-for="chain in chains"
           :key="chain.id"
           :disabled="chain.id === currentChainId || undefined"
-          :class="['chain-item', { active: chain.id === currentChainId }]"
+          :class="['block', 'chain-item', { active: chain.id === currentChainId }]"
           @click="() => switchTo(chain)"
         >
           <span>{{ chain.name }}</span>
@@ -122,8 +122,6 @@ const onClosed = () => {
 }
 
 .chain-item {
-  width: 100%;
-  inline-size: auto;
   justify-content: space-between;
 
   &.active {

package/src/evm/components/EvmWalletConnectWallets.vue

@@ -58,12 +58,11 @@
     />
 
     <Button
-      to="https://ethereum.org/wallets/"
-      target="_blank"
-      class="link muted small help-link"
+      class="link muted small"
+      @click="$emit('back')"
     >
-      <Icon type="help" />
-      <span>New to wallets?</span>
+      <Icon type="chevron-left" />
+      <span>Back</span>
     </Button>
   </div>
 </template>
@@ -84,6 +83,10 @@ const props = defineProps<{
   uri: string
 }>()
 
+defineEmits<{
+  back: []
+}>()
+
 const explorer = useWalletExplorer()
 const searchQuery = ref('')
 let searchTimeout: ReturnType<typeof setTimeout>
@@ -184,10 +187,8 @@ onMounted(() => {
   }
 }
 
-/* Help link */
-.help-link {
+.link.muted {
   justify-self: center;
-  font-size: var(--font-xs);
 }
 
 /* Empty state */