diff --git a/packages/ui/package.json b/packages/ui/package.json
index c7ca619..aef4c87 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -50,11 +50,10 @@
"@sveltejs/package": "^2.3.2",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@tsconfig/svelte": "^5.0.2",
- "@types/qrcode": "^1.5.5",
"@wagmi/core": "2.0.1",
+ "@castlenine/svelte-qrcode": "^2.2.0",
"postcss": "^8.4.40",
"postcss-preset-env": "^9.3.0",
- "qrcode": "^1.5.3",
"sass": "^1.77.8",
"svelte": "^4.2.9",
"svelte-check": "^3.6.3",
diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte
index fff9f06..f6f2fbd 100644
--- a/packages/ui/src/components/AccountModal.svelte
+++ b/packages/ui/src/components/AccountModal.svelte
@@ -71,7 +71,7 @@
- {balance ? `${balance.substring(0, 7)} ${symbol}` : 0}
diff --git a/packages/ui/src/components/Common/Modal.svelte b/packages/ui/src/components/Common/Modal.svelte
index e1a9c1c..a8eb949 100644
--- a/packages/ui/src/components/Common/Modal.svelte
+++ b/packages/ui/src/components/Common/Modal.svelte
@@ -1,11 +1,11 @@
@@ -61,8 +83,7 @@
aria-labelledby="fcl__dialog-title"
on:click|self={close}
use:restoreStyles
- inert={isOpen ? undefined : true}
- style:inline-size={`min(${inlineSize || 240}px, 100%)`}
+ class="fcl__el"
>
@@ -95,6 +116,11 @@
+
{#if !customTrigger}
@@ -103,33 +129,27 @@
diff --git a/packages/ui/src/components/ConnectModal/skeletonQr.svg b/packages/ui/src/components/ConnectModal/skeletonQr.svg
new file mode 100644
index 0000000..6635ac5
--- /dev/null
+++ b/packages/ui/src/components/ConnectModal/skeletonQr.svg
@@ -0,0 +1 @@
+
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 2dd3af4..10eb89a 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -141,12 +141,13 @@ button.fcl__btn-primary svg,
margin: 0;
padding-block-start: 1.25em;
padding-block-end: 0.25em;
+ color: var(--fcl-text-primary-color);
}
-.fcl__subhead {
- opacity: 0.7; /* hacky... _/(:/)\_ */
- font-size: 0.9em;
- font-weight: 400;
+.fcl__text-secondary {
+ color: var(--fcl-text-secondary-color, hsl(0, 0%, 70%));
+ font-size: var(--fcl-text-secondary-size, 0.85rem);
+ font-weight: var(--fcl-text-secondary-weight, 400);
text-align: center;
margin: 0;
/* padding-bottom: 1.25em; */
@@ -226,7 +227,7 @@ button.fcl__btn-primary svg,
border: 1px solid hsla(0, 0%, 100%, 0%);
border-radius: 50%;
background: transparent;
- color: var(--fcl-text-color);
+ color: var(--fcl-text-primary-color);
transition:
background-color 140ms ease-in,
@@ -261,4 +262,23 @@ button.fcl__btn-primary svg,
.mt-1 {
margin-top: 1em;
}
+
+ &::-webkit-scrollbar {
+ inline-size: 0.5em;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: var(--fcl-body-background);
+ }
+ &::-webkit-scrollbar-thumb {
+ background: var(--fcl-text-color, #222429);
+ border: 0.2em solid transparent;
+ border-radius: calc(var(--fcl-border-radius, 50em) / 8);
+ &:hover {
+ background-color: var(--fcl-btn-hover-background, #2f3139);
+ }
+ }
+ &::-webkit-scrollbar-button {
+ background: var(--fcl-body-background);
+ }
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2332835..10b2815 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,6 +225,9 @@ importers:
packages/ui:
devDependencies:
+ '@castlenine/svelte-qrcode':
+ specifier: ^2.2.0
+ version: 2.2.0(svelte@4.2.9)
'@fractl-ui/types':
specifier: workspace:^
version: link:../types
@@ -240,9 +243,6 @@ importers:
'@tsconfig/svelte':
specifier: ^5.0.2
version: 5.0.2
- '@types/qrcode':
- specifier: ^1.5.5
- version: 1.5.5
'@wagmi/core':
specifier: 2.0.1
version: 2.0.1(react@18.2.0)(typescript@5.3.3)(viem@2.0.1(typescript@5.3.3))
@@ -252,9 +252,6 @@ importers:
postcss-preset-env:
specifier: ^9.3.0
version: 9.6.0(postcss@8.4.40)
- qrcode:
- specifier: ^1.5.3
- version: 1.5.3
sass:
specifier: ^1.77.8
version: 1.77.8
@@ -365,6 +362,11 @@ packages:
resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==}
engines: {node: '>=6.9.0'}
+ '@castlenine/svelte-qrcode@2.2.0':
+ resolution: {integrity: sha512-0PbzjH86AQOPFomHD7FDxSzWlQC8MOfyvOfHS0kmRXNA2nz5+oOL9kjpE+7IywejCGIXFN3sZrBpvx9i6xsdeA==}
+ peerDependencies:
+ svelte: '>=3.54.0'
+
'@changesets/apply-release-plan@7.0.4':
resolution: {integrity: sha512-HLFwhKWayKinWAul0Vj+76jVx1Pc2v55MGPVjZ924Y/ROeSsBMFutv9heHmCUj48lJyRfOTJG5+ar+29FUky/A==}
@@ -2007,9 +2009,6 @@ packages:
'@types/pug@2.0.10':
resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
- '@types/qrcode@1.5.5':
- resolution: {integrity: sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==}
-
'@types/semver@7.5.8':
resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
@@ -5010,6 +5009,10 @@ snapshots:
'@babel/helper-validator-identifier': 7.22.20
to-fast-properties: 2.0.0
+ '@castlenine/svelte-qrcode@2.2.0(svelte@4.2.9)':
+ dependencies:
+ svelte: 4.2.9
+
'@changesets/apply-release-plan@7.0.4':
dependencies:
'@babel/runtime': 7.25.0
@@ -7040,10 +7043,6 @@ snapshots:
'@types/pug@2.0.10': {}
- '@types/qrcode@1.5.5':
- dependencies:
- '@types/node': 22.0.0
-
'@types/semver@7.5.8': {}
'@types/trusted-types@2.0.7': {}