Skip to content

add screenshots to the readme #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
keraliss merged 1 commit into from
Feb 26, 2026
Merged

add screenshots to the readme #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,26 @@ In the Coinswap protocol, a **Taker** is a Bitcoin user who initiates atomic swa

Unlike traditional Bitcoin transactions that create an on-chain trail, coinswaps mix your coins through multiple makers, making it significantly harder to trace the origin and destination of funds.

## Screenshots

### Wallet

![Wallet Screenshot](/screenshot/wallet.png)

### Swap Page

![Swap Screenshot](/screenshot/swap.png)

### Ongoing Swap

![Ongoing Swap Screenshot](/screenshot/swap1.png)

### Swap Report

![Swap Report Screenshot](/screenshot/report1.png)



## Prerequisites

### Required
Expand Down
Binary file added screenshot/report1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshot/swap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshot/swap1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshot/wallet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions src/styles/output.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,9 @@
.-top-1 {
top: calc(var(--spacing) * -1);
}
.top-1 {
top: calc(var(--spacing) * 1);
}
.top-1\/2 {
top: calc(1/2 * 100%);
}
Expand Down Expand Up @@ -320,6 +323,9 @@
.mx-auto {
margin-inline: auto;
}
.mt-0 {
margin-top: calc(var(--spacing) * 0);
}
.mt-0\.5 {
margin-top: calc(var(--spacing) * 0.5);
}
Expand Down Expand Up @@ -533,13 +539,27 @@
.flex-1 {
flex: 1;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1 {
--tw-translate-x: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
Comment on lines +551 to +554
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Resolve Stylelint empty-line errors in translate utilities.

Stylelint reports declaration-empty-line-before at Line 553, Line 557, and Line 561. Add blank lines between declarations (or adjust the lint rule for generated CSS) to unblock linting.

🧹 Suggested formatting fix 
 .-translate-x-1 {
   --tw-translate-x: calc(var(--spacing) * -1);
+
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
@@
 .-translate-y-1 {
   --tw-translate-y: calc(var(--spacing) * -1);
+
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }

Also applies to: 559-562

🧰 Tools
🪛 Stylelint (17.3.0)

[error] 553-553: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/styles/output.css` around lines 551 - 554, Stylelint is flagging
declaration-empty-line-before inside the generated translate utility blocks
(e.g., the .-translate-x-1 rule); fix by inserting a blank line between each
declaration in those utility CSS rules (for example between the --tw-translate-x
declaration and the translate declaration) so each property is separated by a
single empty line, or alternatively update the lint config to ignore generated
files if these are produced output files; locate the translate utility selectors
(like .-translate-x-1 and the other translate variants referenced around the
same area) and apply the blank-line separation consistently across them.

.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1 {
--tw-translate-y: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
Expand All @@ -565,6 +585,9 @@
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
Expand Down Expand Up @@ -793,6 +816,9 @@
.border-\[\#ff6b35\] {
border-color: #ff6b35;
}
.border-blue-500 {
border-color: var(--color-blue-500);
}
.border-blue-500\/30 {
border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
Expand All @@ -802,6 +828,9 @@
.border-gray-400 {
border-color: var(--color-gray-400);
}
.border-gray-500 {
border-color: var(--color-gray-500);
}
.border-gray-500\/30 {
border-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
Expand All @@ -817,6 +846,9 @@
.border-gray-800 {
border-color: var(--color-gray-800);
}
.border-green-500 {
border-color: var(--color-green-500);
}
.border-green-500\/30 {
border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
Expand All @@ -832,18 +864,27 @@
.border-orange-400 {
border-color: var(--color-orange-400);
}
.border-orange-500 {
border-color: var(--color-orange-500);
}
.border-orange-500\/30 {
border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
}
}
.border-purple-500 {
border-color: var(--color-purple-500);
}
.border-purple-500\/30 {
border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
}
}
.border-red-500 {
border-color: var(--color-red-500);
}
.border-red-500\/30 {
border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
Expand All @@ -853,6 +894,9 @@
.border-transparent {
border-color: transparent;
}
.border-yellow-500 {
border-color: var(--color-yellow-500);
}
.border-yellow-500\/30 {
border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
Expand Down Expand Up @@ -919,6 +963,9 @@
background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
}
}
.bg-blue-400 {
background-color: var(--color-blue-400);
}
.bg-blue-500 {
background-color: var(--color-blue-500);
}
Expand All @@ -934,12 +981,18 @@
background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
}
}
.bg-cyan-500 {
background-color: var(--color-cyan-500);
}
.bg-cyan-500\/20 {
background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
}
}
.bg-gray-500 {
background-color: var(--color-gray-500);
}
.bg-gray-500\/20 {
background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
Expand Down Expand Up @@ -1030,6 +1083,9 @@
.bg-yellow-400 {
background-color: var(--color-yellow-400);
}
.bg-yellow-500 {
background-color: var(--color-yellow-500);
}
.bg-yellow-500\/10 {
background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
Expand Down Expand Up @@ -1113,6 +1169,9 @@
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.py-0 {
padding-block: calc(var(--spacing) * 0);
}
.py-0\.5 {
padding-block: calc(var(--spacing) * 0.5);
}
Expand Down Expand Up @@ -1375,12 +1434,22 @@
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-black {
--tw-shadow-color: #000;
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
}
}
.shadow-black\/30 {
--tw-shadow-color: color-mix(in srgb, #000 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
Expand All @@ -1389,6 +1458,10 @@
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
Expand Down Expand Up @@ -1911,6 +1984,11 @@
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-blur {
syntax: "*";
inherits: false;
Expand Down Expand Up @@ -2084,6 +2162,7 @@
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-outline-style: solid;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
Expand Down
Loading