@1001-digital/components 1.0.2 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/base/components/Toasts.vue

@@ -42,7 +42,7 @@
           :model-value="toast.progress === true ? null : toast.progress"
         />
         <ToastAction
-          v-if="toast.action"
+          v-if="toast.action && !toast.action.persistent"
           :alt-text="toast.action.label"
           :as="Actions"
           class="left"
@@ -54,6 +54,17 @@
             {{ toast.action.label }}
           </Button>
         </ToastAction>
+        <Actions
+          v-if="toast.action?.persistent"
+          class="left"
+        >
+          <Button
+            class="small tertiary"
+            @click="toast.action!.onClick()"
+          >
+            {{ toast.action.label }}
+          </Button>
+        </Actions>
       </section>
     </ToastRoot>
 

package/src/base/composables/toast.ts

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 export interface ToastAction {
   label: string
   onClick: () => void
+  persistent?: boolean
 }
 
 export type ToastVariant = 'info' | 'success' | 'error'

package/src/evm/assets/wallets/coinbase.svg

@@ -0,0 +1,4 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1024" height="1024" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z" fill="white"/>
+</svg>

package/src/evm/assets/wallets/in-app.svg

@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="56" fill="#323232"/>
+<path d="M35.5 31H35.515" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5 20.5H38.5C39.2956 20.5 40.0587 20.8161 40.6213 21.3787C41.1839 21.9413 41.5 22.7044 41.5 23.5V38.5C41.5 39.2956 41.1839 40.0587 40.6213 40.6213C40.0587 41.1839 39.2956 41.5 38.5 41.5H17.5C16.7044 41.5 15.9413 41.1839 15.3787 40.6213C14.8161 40.0587 14.5 39.2956 14.5 38.5V17.5C14.5 16.7044 14.8161 15.9413 15.3787 15.3787C15.9413 14.8161 16.7044 14.5 17.5 14.5H38.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/evm/assets/wallets/metamask.svg

@@ -0,0 +1 @@
+<svg fill="none" height="33" viewBox="0 0 35 33" width="35" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-linejoin="round" stroke-width=".25"><path d="m32.9582 1-13.1341 9.7183 2.4424-5.72731z" fill="#e17726" stroke="#e17726"/><g fill="#e27625" stroke="#e27625"><path d="m2.66296 1 13.01714 9.809-2.3254-5.81802z"/><path d="m28.2295 23.5335-3.4947 5.3386 7.4829 2.0603 2.1436-7.2823z"/><path d="m1.27281 23.6501 2.13055 7.2823 7.46994-2.0603-3.48166-5.3386z"/><path d="m10.4706 14.5149-2.0786 3.1358 7.405.3369-.2469-7.969z"/><path d="m25.1505 14.5149-5.1575-4.58704-.1688 8.05974 7.4049-.3369z"/><path d="m10.8733 28.8721 4.4819-2.1639-3.8583-3.0062z"/><path d="m20.2659 26.7082 4.4689 2.1639-.6105-5.1701z"/></g><path d="m24.7348 28.8721-4.469-2.1639.3638 2.9025-.039 1.231z" fill="#d5bfb2" stroke="#d5bfb2"/><path d="m10.8732 28.8721 4.1572 1.9696-.026-1.231.3508-2.9025z" fill="#d5bfb2" stroke="#d5bfb2"/><path d="m15.1084 21.7842-3.7155-1.0884 2.6243-1.2051z" fill="#233447" stroke="#233447"/><path d="m20.5126 21.7842 1.0913-2.2935 2.6372 1.2051z" fill="#233447" stroke="#233447"/><path d="m10.8733 28.8721.6495-5.3386-4.13117.1167z" fill="#cc6228" stroke="#cc6228"/><path d="m24.0982 23.5335.6366 5.3386 3.4946-5.2219z" fill="#cc6228" stroke="#cc6228"/><path d="m27.2291 17.6507-7.405.3369.6885 3.7966 1.0913-2.2935 2.6372 1.2051z" fill="#cc6228" stroke="#cc6228"/><path d="m11.3929 20.6958 2.6242-1.2051 1.0913 2.2935.6885-3.7966-7.40495-.3369z" fill="#cc6228" stroke="#cc6228"/><path d="m8.392 17.6507 3.1049 6.0513-.1039-3.0062z" fill="#e27525" stroke="#e27525"/><path d="m24.2412 20.6958-.1169 3.0062 3.1049-6.0513z" fill="#e27525" stroke="#e27525"/><path d="m15.797 17.9876-.6886 3.7967.8704 4.4833.1949-5.9087z" fill="#e27525" stroke="#e27525"/><path d="m19.8242 17.9876-.3638 2.3584.1819 5.9216.8704-4.4833z" fill="#e27525" stroke="#e27525"/><path d="m20.5127 21.7842-.8704 4.4834.6236.4406 3.8584-3.0062.1169-3.0062z" fill="#f5841f" stroke="#f5841f"/><path d="m11.3929 20.6958.104 3.0062 3.8583 3.0062.6236-.4406-.8704-4.4834z" fill="#f5841f" stroke="#f5841f"/><path d="m20.5906 30.8417.039-1.231-.3378-.2851h-4.9626l-.3248.2851.026 1.231-4.1572-1.9696 1.4551 1.1921 2.9489 2.0344h5.0536l2.962-2.0344 1.442-1.1921z" fill="#c0ac9d" stroke="#c0ac9d"/><path d="m20.2659 26.7082-.6236-.4406h-3.6635l-.6236.4406-.3508 2.9025.3248-.2851h4.9626l.3378.2851z" fill="#161616" stroke="#161616"/><path d="m33.5168 11.3532 1.1043-5.36447-1.6629-4.98873-12.6923 9.3944 4.8846 4.1205 6.8983 2.0085 1.52-1.7752-.6626-.4795 1.0523-.9588-.8054-.622 1.0523-.8034z" fill="#763e1a" stroke="#763e1a"/><path d="m1 5.98873 1.11724 5.36447-.71451.5313 1.06527.8034-.80545.622 1.05228.9588-.66255.4795 1.51997 1.7752 6.89835-2.0085 4.8846-4.1205-12.69233-9.3944z" fill="#763e1a" stroke="#763e1a"/><path d="m32.0489 16.5234-6.8983-2.0085 2.0786 3.1358-3.1049 6.0513 4.1052-.0519h6.1318z" fill="#f5841f" stroke="#f5841f"/><path d="m10.4705 14.5149-6.89828 2.0085-2.29944 7.1267h6.11883l4.10519.0519-3.10487-6.0513z" fill="#f5841f" stroke="#f5841f"/><path d="m19.8241 17.9876.4417-7.5932 2.0007-5.4034h-8.9119l2.0006 5.4034.4417 7.5932.1689 2.3842.013 5.8958h3.6635l.013-5.8958z" fill="#f5841f" stroke="#f5841f"/></g></svg>

package/src/evm/assets/wallets/phantom.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" fill="#AB9FF2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.6416 82.1477C50.8744 89.4525 42.8862 98.6966 32.2568 98.6966C27.232 98.6966 22.4004 96.628 22.4004 87.6424C22.4004 64.7584 53.6445 29.3335 82.6339 29.3335C99.1257 29.3335 105.697 40.7755 105.697 53.7689C105.697 70.4471 94.8739 89.5171 84.1156 89.5171C80.7013 89.5171 79.0264 87.6424 79.0264 84.6688C79.0264 83.8931 79.1552 83.0527 79.4129 82.1477C75.7409 88.4182 68.6546 94.2361 62.0192 94.2361C57.1877 94.2361 54.7397 91.1979 54.7397 86.9314C54.7397 85.3799 55.0618 83.7638 55.6416 82.1477ZM80.6133 53.3182C80.6133 57.1044 78.3795 58.9975 75.8806 58.9975C73.3438 58.9975 71.1479 57.1044 71.1479 53.3182C71.1479 49.532 73.3438 47.6389 75.8806 47.6389C78.3795 47.6389 80.6133 49.532 80.6133 53.3182ZM94.8102 53.3184C94.8102 57.1046 92.5763 58.9977 90.0775 58.9977C87.5407 58.9977 85.3447 57.1046 85.3447 53.3184C85.3447 49.5323 87.5407 47.6392 90.0775 47.6392C92.5763 47.6392 94.8102 49.5323 94.8102 53.3184Z" fill="#FFFDF8"/>
+</svg>

package/src/evm/assets/wallets/rabby.svg

@@ -0,0 +1,24 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M438.47 279.097C452.952 246.637 381.359 155.948 312.964 118.165C269.853 88.895 224.93 92.9162 215.832 105.768C195.865 133.972 281.948 157.871 339.518 185.759C327.143 191.152 315.481 200.83 308.623 213.207C287.16 189.697 240.052 169.451 184.777 185.759C147.528 196.749 116.571 222.658 104.606 261.791C101.699 260.495 98.4799 259.774 95.0934 259.774C82.1436 259.774 71.6456 270.308 71.6456 283.301C71.6456 296.295 82.1436 306.828 95.0934 306.828C97.4937 306.828 104.999 305.213 104.999 305.213L224.93 306.085C176.967 382.43 139.063 393.59 139.063 406.817C139.063 420.043 175.331 416.459 188.948 411.529C254.138 387.928 324.155 314.373 336.17 293.199C386.625 299.515 429.028 300.262 438.47 279.097Z" fill="url(#paint0_linear_1758_656)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M339.513 185.763C339.516 185.764 339.519 185.766 339.522 185.767C342.191 184.712 341.759 180.758 341.026 177.652C339.342 170.515 310.284 141.724 282.997 128.829C245.815 111.257 218.435 112.163 214.39 120.262C221.964 135.837 257.077 150.461 293.748 165.733C309.394 172.249 325.323 178.883 339.519 185.76C339.517 185.761 339.515 185.762 339.513 185.763Z" fill="url(#paint1_linear_1758_656)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M292.329 342.523C284.809 339.64 276.315 336.994 266.658 334.594C276.955 316.108 279.115 288.74 269.391 271.437C255.743 247.153 238.612 234.228 198.802 234.228C176.907 234.228 117.955 241.628 116.909 291.006C116.799 296.187 116.906 300.935 117.28 305.301L224.93 306.084C210.417 329.185 196.825 346.318 184.926 359.345C199.213 363.019 211.003 366.103 221.828 368.934C232.098 371.62 241.499 374.079 251.339 376.598C266.182 365.748 280.135 353.917 292.329 342.523Z" fill="url(#paint2_linear_1758_656)"/>
+<path d="M103.169 300.228C107.567 337.737 128.813 352.437 172.227 356.788C215.641 361.138 240.544 358.22 273.698 361.246C301.389 363.774 326.113 377.932 335.285 373.04C343.539 368.636 338.921 352.728 327.876 342.521C313.558 329.291 293.742 320.093 258.875 316.828C265.824 297.739 263.877 270.973 253.085 256.411C237.481 235.355 208.68 225.836 172.227 229.995C134.143 234.34 97.6504 253.153 103.169 300.228Z" fill="url(#paint3_linear_1758_656)"/>
+<defs>
+<linearGradient id="paint0_linear_1758_656" x1="180.439" y1="250.352" x2="435.479" y2="322.433" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8697FF"/>
+<stop offset="1" stop-color="#ABB7FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1758_656" x1="392.428" y1="245.489" x2="207.876" y2="61.1077" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8697FF"/>
+<stop offset="1" stop-color="#5156D8" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1758_656" x1="297.446" y1="348.967" x2="120.465" y2="247.558" gradientUnits="userSpaceOnUse">
+<stop stop-color="#465EED"/>
+<stop offset="1" stop-color="#8697FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1758_656" x1="195.658" y1="248.443" x2="315.581" y2="400.306" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8898FF"/>
+<stop offset="0.983895" stop-color="#6277F1"/>
+</linearGradient>
+</defs>
+</svg>

package/src/evm/assets/wallets/rainbow.svg

@@ -0,0 +1,59 @@
+<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_8_458)">
+  <rect width="120" height="120" fill="url(#paint0_linear_8_458)"/>
+  <path d="M20 38H26C56.9279 38 82 63.0721 82 94V100H94C97.3137 100 100 97.3137 100 94C100 53.1309 66.8691 20 26 20C22.6863 20 20 22.6863 20 26V38Z" fill="url(#paint1_radial_8_458)"/>
+  <path d="M84 94H100C100 97.3137 97.3137 100 94 100H84V94Z" fill="url(#paint2_linear_8_458)"/>
+  <path d="M26 20L26 36H20L20 26C20 22.6863 22.6863 20 26 20Z" fill="url(#paint3_linear_8_458)"/>
+  <path d="M20 36H26C58.0325 36 84 61.9675 84 94V100H66V94C66 71.9086 48.0914 54 26 54H20V36Z" fill="url(#paint4_radial_8_458)"/>
+  <path d="M68 94H84V100H68V94Z" fill="url(#paint5_linear_8_458)"/>
+  <path d="M20 52L20 36L26 36L26 52H20Z" fill="url(#paint6_linear_8_458)"/>
+  <path d="M20 62C20 65.3137 22.6863 68 26 68C40.3594 68 52 79.6406 52 94C52 97.3137 54.6863 100 58 100H68V94C68 70.804 49.196 52 26 52H20V62Z" fill="url(#paint7_radial_8_458)"/>
+  <path d="M52 94H68V100H58C54.6863 100 52 97.3137 52 94Z" fill="url(#paint8_radial_8_458)"/>
+  <path d="M26 68C22.6863 68 20 65.3137 20 62L20 52L26 52L26 68Z" fill="url(#paint9_radial_8_458)"/>
+  </g>
+  <defs>
+  <linearGradient id="paint0_linear_8_458" x1="60" y1="0" x2="60" y2="120" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#174299"/>
+  <stop offset="1" stop-color="#001E59"/>
+  </linearGradient>
+  <radialGradient id="paint1_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26 94) rotate(-90) scale(74)">
+  <stop offset="0.770277" stop-color="#FF4000"/>
+  <stop offset="1" stop-color="#8754C9"/>
+  </radialGradient>
+  <linearGradient id="paint2_linear_8_458" x1="83" y1="97" x2="100" y2="97" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FF4000"/>
+  <stop offset="1" stop-color="#8754C9"/>
+  </linearGradient>
+  <linearGradient id="paint3_linear_8_458" x1="23" y1="20" x2="23" y2="37" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#8754C9"/>
+  <stop offset="1" stop-color="#FF4000"/>
+  </linearGradient>
+  <radialGradient id="paint4_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26 94) rotate(-90) scale(58)">
+  <stop offset="0.723929" stop-color="#FFF700"/>
+  <stop offset="1" stop-color="#FF9901"/>
+  </radialGradient>
+  <linearGradient id="paint5_linear_8_458" x1="68" y1="97" x2="84" y2="97" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FFF700"/>
+  <stop offset="1" stop-color="#FF9901"/>
+  </linearGradient>
+  <linearGradient id="paint6_linear_8_458" x1="23" y1="52" x2="23" y2="36" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FFF700"/>
+  <stop offset="1" stop-color="#FF9901"/>
+  </linearGradient>
+  <radialGradient id="paint7_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26 94) rotate(-90) scale(42)">
+  <stop offset="0.59513" stop-color="#00AAFF"/>
+  <stop offset="1" stop-color="#01DA40"/>
+  </radialGradient>
+  <radialGradient id="paint8_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(51 97) scale(17 45.3333)">
+  <stop stop-color="#00AAFF"/>
+  <stop offset="1" stop-color="#01DA40"/>
+  </radialGradient>
+  <radialGradient id="paint9_radial_8_458" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23 69) rotate(-90) scale(17 322.37)">
+  <stop stop-color="#00AAFF"/>
+  <stop offset="1" stop-color="#01DA40"/>
+  </radialGradient>
+  <clipPath id="clip0_8_458">
+  <rect width="120" height="120" fill="white"/>
+  </clipPath>
+  </defs>
+  </svg>

package/src/evm/assets/wallets/walletconnect.svg

@@ -0,0 +1 @@
+<svg fill="none" height="400" viewBox="0 0 400 400" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h400v400h-400z"/></clipPath><g clip-path="url(#a)"><circle cx="200" cy="200" fill="#3396ff" r="199.5" stroke="#66b1ff"/><path d="m122.519 148.965c42.791-41.729 112.171-41.729 154.962 0l5.15 5.022c2.14 2.086 2.14 5.469 0 7.555l-17.617 17.18c-1.07 1.043-2.804 1.043-3.874 0l-7.087-6.911c-29.853-29.111-78.253-29.111-108.106 0l-7.59 7.401c-1.07 1.043-2.804 1.043-3.874 0l-17.617-17.18c-2.14-2.086-2.14-5.469 0-7.555zm191.397 35.529 15.679 15.29c2.14 2.086 2.14 5.469 0 7.555l-70.7 68.944c-2.139 2.087-5.608 2.087-7.748 0l-50.178-48.931c-.535-.522-1.402-.522-1.937 0l-50.178 48.931c-2.139 2.087-5.608 2.087-7.748 0l-70.7015-68.945c-2.1396-2.086-2.1396-5.469 0-7.555l15.6795-15.29c2.1396-2.086 5.6085-2.086 7.7481 0l50.1789 48.932c.535.522 1.402.522 1.937 0l50.177-48.932c2.139-2.087 5.608-2.087 7.748 0l50.179 48.932c.535.522 1.402.522 1.937 0l50.179-48.931c2.139-2.087 5.608-2.087 7.748 0z" fill="#fff"/></g></svg>

package/src/evm/components/EvmConnect.vue

@@ -20,8 +20,13 @@
     v-model:open="chooseModalOpen"
     @closed="onModalClosed"
   >
+    <EvmInAppWalletSetup
+      v-if="showInAppSetup"
+      @connected="onInAppConnected"
+      @back="showInAppSetup = false"
+    />
     <Alert
-      v-if="errorMessage"
+      v-else-if="errorMessage"
       type="error"
     >
       {{ errorMessage }}
@@ -52,10 +57,8 @@
         class="choose-connector"
       >
         <img
-          v-if="ICONS[connector.name]"
-          :src="
-            connector.icon || `${base}icons/wallets/${ICONS[connector.name]}`
-          "
+          v-if="ICONS[connector.name] || connector.icon"
+          :src="ICONS[connector.name] || connector.icon"
           :alt="connector.name"
         />
         <div
@@ -72,11 +75,22 @@
         class="choose-connector"
       >
         <img
-          :src="`${base}icons/wallets/safe.png`"
+          :src="safeIcon"
           alt="Safe"
         />
         <span>Safe</span>
       </Button>
+      <Button
+        v-if="inAppConnector"
+        @click="showInAppSetup = true"
+        class="choose-connector"
+      >
+        <img
+          :src="inAppIcon"
+          alt="Seed Phrase"
+        />
+        <span>In App</span>
+      </Button>
       <Button
         to="https://ethereum.org/wallets/"
         target="_blank"
@@ -106,16 +120,26 @@ import Loading from '../../base/components/Loading.vue'
 import EvmAccount from './EvmAccount.vue'
 import EvmMetaMaskQR from './EvmMetaMaskQR.vue'
 import EvmWalletConnectWallets from './EvmWalletConnectWallets.vue'
-import { useBaseURL } from '../composables/base'
+import EvmInAppWalletSetup from './EvmInAppWalletSetup.vue'
+
+import coinbaseIcon from '../assets/wallets/coinbase.svg'
+import metamaskIcon from '../assets/wallets/metamask.svg'
+import phantomIcon from '../assets/wallets/phantom.svg'
+import rabbyIcon from '../assets/wallets/rabby.svg'
+import rainbowIcon from '../assets/wallets/rainbow.svg'
+import safeIcon from '../assets/wallets/safe.png'
+import inAppIcon from '../assets/wallets/in-app.svg'
+import walletconnectIcon from '../assets/wallets/walletconnect.svg'
 
 const ICONS: Record<string, string> = {
-  'Base Account': 'coinbase.svg',
-  MetaMask: 'metamask.svg',
-  Phantom: 'phantom.svg',
-  'Rabby Wallet': 'rabby.svg',
-  Rainbow: 'rainbow.svg',
-  Safe: 'safe.png',
-  WalletConnect: 'walletconnect.svg',
+  'Base Account': coinbaseIcon,
+  MetaMask: metamaskIcon,
+  Phantom: phantomIcon,
+  'Rabby Wallet': rabbyIcon,
+  Rainbow: rainbowIcon,
+  Safe: safeIcon,
+  'In App': inAppIcon,
+  WalletConnect: walletconnectIcon,
 }
 
 const PRIORITY: Record<string, number> = {
@@ -130,13 +154,16 @@ const emit = defineEmits<{
   connected: [{ address: `0x${string}` | undefined }]
   disconnected: []
 }>()
-const base = useBaseURL()
-
 const chainId = useChainId()
 const connectors = useConnectors()
 const { mutateAsync: connectAsync } = useConnect()
 const { address, isConnected } = useConnection()
 
+const inAppConnector = computed(() =>
+  connectors.value.find((c) => c.type === 'inAppWallet'),
+)
+const showInAppSetup = ref(false)
+
 const showConnect = computed(() => !isConnected.value)
 const shownConnectors = computed(() => {
   const unique = Array.from(
@@ -147,8 +174,11 @@ const shownConnectors = computed(() => {
 
   const filtered =
     unique.length > 1
-      ? unique.filter((c) => c.id !== 'injected' && c.id !== 'safe')
-      : unique
+      ? unique.filter(
+          (c) =>
+            c.id !== 'injected' && c.id !== 'safe' && c.type !== 'inAppWallet',
+        )
+      : unique.filter((c) => c.type !== 'inAppWallet')
 
   return filtered.sort((a, b) => {
     const priorityA = PRIORITY[a.name] ?? 5
@@ -247,6 +277,11 @@ const login = async (connector: Connector) => {
   }
 }
 
+const onInAppConnected = () => {
+  chooseModalOpen.value = false
+  showInAppSetup.value = false
+}
+
 const onModalClosed = () => {
   errorMessage.value = ''
   isConnecting.value = false
@@ -254,6 +289,7 @@ const onModalClosed = () => {
   metaMaskUri.value = ''
   walletConnectUri.value = ''
   safeDeepLink.value = false
+  showInAppSetup.value = false
 }
 
 const check = () =>
@@ -276,6 +312,7 @@ onMounted(() => check())
     width: 100%;
     inline-size: auto;
     justify-content: flex-start;
+    padding-inline-start: var(--ui-padding-inline);
 
     img,
     .default-wallet-icon {

package/src/evm/components/EvmInAppWalletSetup.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="in-app-wallet-setup">
+    <!-- Step: Choose -->
+    <div
+      v-if="step === 'choose'"
+      class="setup-step"
+    >
+      <div class="setup-options">
+        <Button @click="startGenerate">
+          <Icon type="plus" />
+          <span>Create New Wallet</span>
+        </Button>
+        <Button @click="step = 'restore'">
+          <Icon type="key" />
+          <span>I Have a Seed Phrase</span>
+        </Button>
+      </div>
+      <Button
+        class="link muted small"
+        @click="$emit('back')"
+      >
+        <Icon type="arrow-left" />
+        <span>Back</span>
+      </Button>
+    </div>
+
+    <!-- Step: Generate -->
+    <div
+      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>
+
+      <div class="generated-words">
+        <div
+          v-for="(word, i) in generatedWords"
+          :key="i"
+          class="generated-word"
+        >
+          <span class="word-number">{{ i + 1 }}</span>
+          <span class="word-text">{{ word }}</span>
+        </div>
+      </div>
+
+      <FormCheckbox v-model="backupConfirmed">
+        I've saved my seed phrase
+      </FormCheckbox>
+
+      <Button
+        :disabled="!backupConfirmed"
+        @click="confirmGenerated"
+      >
+        Continue
+      </Button>
+      <Button
+        class="link muted small"
+        @click="step = 'choose'"
+      >
+        <Icon type="arrow-left" />
+        <span>Back</span>
+      </Button>
+    </div>
+
+    <!-- Step: Restore -->
+    <div
+      v-else-if="step === 'restore'"
+      class="setup-step"
+    >
+      <p class="muted font-sm">Enter your 12-word seed phrase to restore your wallet.</p>
+
+      <EvmSeedPhraseInput
+        v-model="restorePhrase"
+        @valid="restoreValid = $event"
+        @submit="restoreWallet"
+      />
+
+      <Button
+        :disabled="!restoreValid"
+        @click="restoreWallet"
+      >
+        Restore Wallet
+      </Button>
+      <Button
+        class="link muted small"
+        @click="step = 'choose'"
+      >
+        <Icon type="arrow-left" />
+        <span>Back</span>
+      </Button>
+    </div>
+
+    <!-- Step: Connecting -->
+    <div
+      v-else-if="step === 'connecting'"
+      class="setup-step"
+    >
+      <Loading
+        txt="Connecting wallet..."
+        spinner
+        stacked
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useConnect, useConnectors } from '@wagmi/vue'
+import Button from '../../base/components/Button.vue'
+import Icon from '../../base/components/Icon.vue'
+import Alert from '../../base/components/Alert.vue'
+import FormCheckbox from '../../base/components/FormCheckbox.vue'
+import Loading from '../../base/components/Loading.vue'
+import EvmSeedPhraseInput from './EvmSeedPhraseInput.vue'
+import { prepareInAppWallet } from '../connectors/inAppWallet'
+
+const emit = defineEmits<{
+  connected: []
+  back: []
+}>()
+
+const connectors = useConnectors()
+const { mutateAsync: connectAsync } = useConnect()
+const inAppConnector = computed(() =>
+  connectors.value.find((c) => c.type === 'inAppWallet'),
+)
+
+type Step = 'choose' | 'generate' | 'restore' | 'connecting'
+const step = ref<Step>('choose')
+
+// Generate state
+const generatedMnemonic = ref('')
+const generatedWords = ref<string[]>([])
+const backupConfirmed = ref(false)
+
+// Restore state
+const restorePhrase = ref('')
+const restoreValid = ref(false)
+
+async function startGenerate() {
+  const { generateMnemonic, english } = await import('viem/accounts')
+  generatedMnemonic.value = generateMnemonic(english)
+  generatedWords.value = generatedMnemonic.value.split(' ')
+  backupConfirmed.value = false
+  step.value = 'generate'
+}
+
+async function connectWithMnemonic(mnemonic: string) {
+  await prepareInAppWallet(mnemonic)
+  await connectAsync({ connector: inAppConnector.value! })
+}
+
+async function confirmGenerated() {
+  step.value = 'connecting'
+  try {
+    await connectWithMnemonic(generatedMnemonic.value)
+    emit('connected')
+  } catch (e) {
+    console.error('Failed to connect in-app wallet:', e)
+    step.value = 'generate'
+  }
+}
+
+async function restoreWallet() {
+  if (!restoreValid.value) return
+  step.value = 'connecting'
+  try {
+    await connectWithMnemonic(restorePhrase.value)
+    emit('connected')
+  } catch (e) {
+    console.error('Failed to restore in-app wallet:', e)
+    step.value = 'restore'
+  }
+}
+</script>
+
+<style scoped>
+.in-app-wallet-setup {
+  display: grid;
+  gap: var(--spacer);
+}
+
+.setup-step {
+  display: grid;
+  gap: var(--spacer);
+}
+
+.setup-options {
+  display: grid;
+  gap: var(--spacer);
+
+  :deep(button),
+  :deep(.button) {
+    width: 100%;
+  }
+}
+
+.generated-words {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  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);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  padding: var(--spacer-xs) var(--spacer-sm);
+
+  .word-number {
+    font-size: var(--font-xs);
+    color: var(--muted);
+    min-width: 1.5em;
+    text-align: right;
+  }
+
+  .word-text {
+    font-size: var(--font-sm);
+    font-family: var(--font-mono, monospace);
+  }
+}
+
+.link.muted {
+  justify-self: center;
+  font-size: var(--font-xs);
+}
+
+</style>

package/src/evm/components/EvmSeedPhraseInput.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="seed-phrase-input">
+    <div class="seed-phrase-grid">
+      <div
+        v-for="(_, i) in 12"
+        :key="i"
+        class="seed-word"
+        :class="{ invalid: words[i] && !isValidWord(words[i]) }"
+      >
+        <label :for="`seed-word-${i}`">{{ i + 1 }}</label>
+        <input
+          :id="`seed-word-${i}`"
+          :ref="(el) => { if (el) inputRefs[i] = el as HTMLInputElement }"
+          v-model="words[i]"
+          type="text"
+          autocomplete="off"
+          autocapitalize="none"
+          spellcheck="false"
+          :disabled="disabled"
+          @keydown="onKeydown($event, i)"
+          @paste="onPaste($event, i)"
+          @input="onInput(i)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import { english } from 'viem/accounts'
+
+const props = defineProps<{
+  modelValue?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  valid: [isValid: boolean]
+  submit: []
+}>()
+
+const wordSet = new Set(english)
+
+const words = ref<string[]>(Array.from({ length: 12 }, () => ''))
+const inputRefs = ref<HTMLInputElement[]>([])
+
+function isValidWord(word: string): boolean {
+  return wordSet.has(word.trim().toLowerCase())
+}
+
+const isValid = computed(() =>
+  words.value.every((w) => w.trim() !== '' && isValidWord(w)),
+)
+
+const phrase = computed(() =>
+  words.value
+    .map((w) => w.trim().toLowerCase())
+    .join(' '),
+)
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!val) return
+    const incoming = val.trim().split(/\s+/)
+    if (incoming.length === 12) {
+      for (let i = 0; i < 12; i++) {
+        words.value[i] = incoming[i]
+      }
+    }
+  },
+  { immediate: true },
+)
+
+watch(phrase, (val) => {
+  emit('update:modelValue', val)
+})
+
+watch(isValid, (val) => {
+  emit('valid', val)
+})
+
+function focusInput(index: number) {
+  const el = inputRefs.value[index]
+  if (el) {
+    el.focus()
+    el.select()
+  }
+}
+
+function onKeydown(event: KeyboardEvent, index: number) {
+  if (event.key === ' ' || (event.key === 'Enter' && index < 11)) {
+    event.preventDefault()
+    focusInput(index + 1)
+  } else if (event.key === 'Enter' && index === 11 && isValid.value) {
+    event.preventDefault()
+    emit('submit')
+  } else if (
+    event.key === 'Backspace' &&
+    words.value[index] === '' &&
+    index > 0
+  ) {
+    event.preventDefault()
+    focusInput(index - 1)
+  } else if (event.key === 'Tab' && !event.shiftKey && index === 11) {
+    // Allow natural tab out
+  } else if (event.key === 'Tab' && event.shiftKey && index === 0) {
+    // Allow natural tab out
+  }
+}
+
+function onPaste(event: ClipboardEvent, index: number) {
+  const text = event.clipboardData?.getData('text')
+  if (!text) return
+
+  const pasted = text.trim().split(/\s+/)
+  if (pasted.length > 1) {
+    event.preventDefault()
+    for (let i = 0; i < pasted.length && index + i < 12; i++) {
+      words.value[index + i] = pasted[i].toLowerCase()
+    }
+    const nextIndex = Math.min(index + pasted.length, 11)
+    focusInput(nextIndex)
+  }
+}
+
+function onInput(index: number) {
+  // Auto-advance if the word contains a space (mobile autocomplete)
+  const val = words.value[index]
+  if (val.includes(' ')) {
+    const parts = val.trim().split(/\s+/)
+    words.value[index] = parts[0]
+    if (parts.length > 1 && index < 11) {
+      for (let i = 1; i < parts.length && index + i < 12; i++) {
+        words.value[index + i] = parts[i]
+      }
+      focusInput(Math.min(index + parts.length, 11))
+    }
+  }
+}
+
+onMounted(() => {
+  if (!props.disabled) {
+    focusInput(0)
+  }
+})
+</script>
+
+<style scoped>
+.seed-phrase-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  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);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  padding: var(--spacer-xs) var(--spacer-sm);
+  transition: border-color var(--speed);
+
+  &:focus-within {
+    border-color: var(--accent);
+  }
+
+  &.invalid {
+    border-color: var(--error);
+  }
+
+  label {
+    font-size: var(--font-xs);
+    color: var(--muted);
+    min-width: 1.5em;
+    text-align: right;
+    user-select: none;
+  }
+
+  input {
+    all: unset;
+    width: 100%;
+    font-size: var(--font-sm);
+    font-family: var(--font-mono, monospace);
+  }
+}
+</style>

package/src/evm/components/EvmTransactionFlow.vue

@@ -261,6 +261,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
     action: {
       label: 'View on Block Explorer',
       onClick: () => window.open(link, '_blank'),
+      persistent: true,
     },
   })
 

package/src/evm/connectors/inAppWallet.ts

@@ -0,0 +1,220 @@
+import { createConnector } from '@wagmi/core'
+import {
+  type Address,
+  type Hex,
+  createPublicClient,
+  createWalletClient,
+  custom,
+  getAddress,
+  hexToBigInt,
+  hexToNumber,
+  http,
+  numberToHex,
+} from 'viem'
+import { privateKeyToAccount, type PrivateKeyAccount } from 'viem/accounts'
+
+const STORAGE_KEY = 'evm:in-app-wallet-pk'
+
+/**
+ * Derive a private key from a BIP39 mnemonic and store it in localStorage.
+ * Call this before `connectAsync({ connector })`.
+ */
+export async function prepareInAppWallet(mnemonic: string): Promise<Address> {
+  const { mnemonicToAccount } = await import('viem/accounts')
+  const { bytesToHex } = await import('viem')
+
+  const normalized = mnemonic.trim().toLowerCase().replace(/\s+/g, ' ')
+  const hdAccount = mnemonicToAccount(normalized)
+  const hdKey = hdAccount.getHdKey()
+  const pk = bytesToHex(hdKey.privateKey!) as `0x${string}`
+
+  localStorage.setItem(STORAGE_KEY, pk)
+  return hdAccount.address
+}
+
+export type InAppWalletParameters = {
+  storageKey?: string
+}
+
+inAppWallet.type = 'inAppWallet' as const
+
+export function inAppWallet(parameters: InAppWalletParameters = {}) {
+  const key = parameters.storageKey ?? STORAGE_KEY
+
+  type Provider =
+    ReturnType<typeof custom> extends (...args: infer A) => infer R ? R : never
+
+  return createConnector<Provider>((config) => {
+    let account: PrivateKeyAccount | null = null
+    let currentChainId: number = config.chains[0].id
+
+    function loadAccount(): PrivateKeyAccount | null {
+      if (typeof window === 'undefined') return null
+      try {
+        const stored = localStorage.getItem(key)
+        if (stored?.startsWith('0x')) {
+          account = privateKeyToAccount(stored as `0x${string}`)
+          return account
+        }
+      } catch {}
+      return null
+    }
+
+    function getChain(chainId?: number) {
+      return (
+        config.chains.find((c) => c.id === (chainId ?? currentChainId)) ??
+        config.chains[0]
+      )
+    }
+
+    return {
+      id: 'inAppWallet',
+      name: 'In App',
+      type: inAppWallet.type,
+
+      async connect({ chainId } = {}) {
+        const acct = account ?? loadAccount()
+        if (!acct) throw new Error('No in-app wallet key found in storage')
+
+        if (chainId) currentChainId = chainId
+
+        return {
+          accounts: [getAddress(acct.address)],
+          chainId: currentChainId,
+        }
+      },
+
+      async disconnect() {
+        account = null
+        if (typeof window !== 'undefined') {
+          localStorage.removeItem(key)
+        }
+      },
+
+      async getAccounts() {
+        const acct = account ?? loadAccount()
+        return acct ? [getAddress(acct.address)] : []
+      },
+
+      async getChainId() {
+        return currentChainId
+      },
+
+      async getProvider() {
+        const chain = getChain()
+        const transport = config.transports?.[chain.id] ?? http()
+
+        const request = async ({
+          method,
+          params,
+        }: {
+          method: string
+          params?: unknown[]
+        }): Promise<unknown> => {
+          // Account methods
+          if (method === 'eth_accounts' || method === 'eth_requestAccounts') {
+            return account ? [account.address] : []
+          }
+          if (method === 'eth_chainId') {
+            return numberToHex(currentChainId)
+          }
+
+          // Signing methods — handled locally
+          if (method === 'personal_sign') {
+            if (!account) throw new Error('Not connected')
+            const [data] = params as [Hex, Address]
+            return account.signMessage({ message: { raw: data } })
+          }
+          if (method === 'eth_signTypedData_v4') {
+            if (!account) throw new Error('Not connected')
+            const [, typedDataJson] = params as [Address, string]
+            const typedData = JSON.parse(typedDataJson)
+            return account.signTypedData(typedData)
+          }
+          if (method === 'eth_sign') {
+            if (!account) throw new Error('Not connected')
+            const [, data] = params as [Address, Hex]
+            return account.sign!({ hash: data })
+          }
+
+          // Send transaction — sign locally, broadcast via RPC
+          if (method === 'eth_sendTransaction') {
+            if (!account) throw new Error('Not connected')
+            const [tx] = params as [Record<string, string>]
+            const walletClient = createWalletClient({
+              account,
+              chain,
+              transport,
+            })
+            return walletClient.sendTransaction({
+              chain,
+              to: tx.to as Address,
+              data: tx.data as Hex | undefined,
+              value: tx.value ? hexToBigInt(tx.value as Hex) : undefined,
+              gas: tx.gas ? hexToBigInt(tx.gas as Hex) : undefined,
+              nonce:
+                tx.nonce != null ? hexToNumber(tx.nonce as Hex) : undefined,
+            })
+          }
+
+          // Chain switching
+          if (method === 'wallet_switchEthereumChain') {
+            const [{ chainId: hexChainId }] = params as [
+              { chainId: `0x${string}` },
+            ]
+            const newChainId = hexToNumber(hexChainId)
+            const chain = config.chains.find((c) => c.id === newChainId)
+            if (!chain) throw new Error('Chain not configured')
+            currentChainId = newChainId
+            config.emitter.emit('change', { chainId: newChainId })
+            return null
+          }
+
+          // Everything else — forward to RPC
+          const publicClient = createPublicClient({ chain, transport })
+          return (
+            publicClient as unknown as {
+              request: (args: {
+                method: string
+                params?: unknown[]
+              }) => Promise<unknown>
+            }
+          ).request({ method, params: params as unknown[] })
+        }
+
+        return custom({ request })({ retryCount: 0 })
+      },
+
+      async isAuthorized() {
+        const acct = account ?? loadAccount()
+        return !!acct
+      },
+
+      async switchChain({ chainId }) {
+        const chain = config.chains.find((c) => c.id === chainId)
+        if (!chain) throw new Error('Chain not configured')
+        currentChainId = chainId
+        config.emitter.emit('change', { chainId })
+        return chain
+      },
+
+      onAccountsChanged(accounts) {
+        if (accounts.length === 0) this.onDisconnect()
+        else
+          config.emitter.emit('change', {
+            accounts: accounts.map((a) => getAddress(a)),
+          })
+      },
+
+      onChainChanged(chain) {
+        const chainId = Number(chain)
+        config.emitter.emit('change', { chainId })
+      },
+
+      onDisconnect() {
+        config.emitter.emit('disconnect')
+        account = null
+      },
+    }
+  })
+}

package/src/evm/index.ts

@@ -34,6 +34,9 @@ export { usePriceFeed } from './composables/priceFeed'
 export { useWalletExplorer } from './composables/walletExplorer'
 export type { ExplorerWallet } from './composables/walletExplorer'
 
+// Connectors
+export { inAppWallet, prepareInAppWallet } from './connectors/inAppWallet'
+
 // Components
 export { default as EvmAccount } from './components/EvmAccount.vue'
 export { default as EvmAvatar } from './components/EvmAvatar.vue'
@@ -45,3 +48,5 @@ export { default as EvmMetaMaskQR } from './components/EvmMetaMaskQR.vue'
 export { default as EvmWalletConnectQR } from './components/EvmWalletConnectQR.vue'
 export { default as EvmWalletConnectWallets } from './components/EvmWalletConnectWallets.vue'
 export { default as EvmTransactionFlow } from './components/EvmTransactionFlow.vue'
+export { default as EvmSeedPhraseInput } from './components/EvmSeedPhraseInput.vue'
+export { default as EvmInAppWalletSetup } from './components/EvmInAppWalletSetup.vue'