Feat: Native Swaps #3231

compojoom · 2024-02-09T10:50:56Z

What it solves

Resolves #3585

How this PR fixes it

Adds a native swap widget to a new page and shows decoded info for swap orders.

How to test it

Open a Safe
Go to the dashboard
Observe a Swap button in the top right
Observe a Swap button in the Sidebar
Go to the Assets page
Observe a Swap button next to each asset

Screenshots

Checklist

I've tested the branch on mobile 📱
I've documented how it affects the analytics (if at all) 📊
I've written a unit/e2e test for it (if applicable) 🧑‍💻

github-actions · 2024-02-09T11:03:13Z

Branch preview

✅ Deploy successful!

Website:
https://feat_cow_swap--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook:
https://feat_cow_swap--walletweb.review.5afe.dev/storybook/

github-actions · 2024-02-09T11:05:52Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-02-09T11:10:49Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	79.19% (-0.13% 🔻)	11626/14682
🔴	Branches	58.16% (-0.56% 🔻)	2754/4735
🟡	Functions	66.19% (-0.26% 🔻)	1860/2810
🟢	Lines	80.53% (-0.06% 🔻)	10479/13012

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / swapParamsSlice.ts	63.64%	100%	33.33%	85.71%
🟢	`...` / swapOrderSlice.ts	87.5%	82.61%	77.78%	89.06%
🟢	`...` / DataRow.tsx	83.33%	66.67%	100%	100%
🟡	`...` / index.tsx	71.43%	100%	0%	76.92%
🟢	`...` / swaps.ts	66.67%	100%	100%	100%
🟡	`...` / utils.ts	76.67%	65.22%	75%	78.85%
🟡	`...` / index.tsx	59.26%	0%	0%	66.67%
🟢	`...` / index.tsx	75%	0%	0%	85.71%
🟡	`...` / DataTable.tsx	50%	100%	0%	66.67%
🟢	`...` / index.tsx	88.89%	100%	0%	100%
🟢	`...` / index.tsx	100%	100%	100%	100%
🟢	`...` / index.tsx	69.23%	100%	0%	81.82%
🟢	`...` / useIsExpiredSwap.ts	92.86%	100%	100%	91.67%
🟢	`...` / index.tsx	57.14%	0%	0%	80%
🔴	`...` / index.tsx	52.5%	0%	0%	58.33%
🔴	`...` / index.tsx	38.46%	0%	0%	41.67%
🔴	`...` / useCustomAppCommunicator.tsx	49.37%	0%	15.79%	49.35%

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟡	`...` / extractTxInfo.ts	78.57% (-4.29% 🔻)	47.5% (+1.79% 🔼)	100%	78.05% (-4.3% 🔻)
🟢	src/utils/chains.ts	91.67% (-8.33% 🔻)	100%	100%	100%
🟢	`...` / index.tsx	95% (+0.26% 🔼)	90.63% (-5.67% 🔻)	50%	100%
🟢	`...` / useSafeWalletProvider.tsx	81.82%	63.16% (-1.55% 🔻)	69.23%	83.87%
🟢	`...` / index.tsx	93.33% (+5.83% 🔼)	50% (-7.14% 🔻)	100%	100%
🟡	`...` / index.tsx	60% (-2.16% 🔻)	0%	0%	66.67% (-3.03% 🔻)
🟢	`...` / tx-tracking.ts	93.94% (-2.83% 🔻)	93.75% (-6.25% 🔻)	100%	93.75% (-2.92% 🔻)
🟢	`...` / index.tsx	100%	90.48% (-2.38% 🔻)	100%	100%
🟡	`...` / index.tsx	73.53% (+0.2% 🔼)	26.47% (-4.56% 🔻)	42.86% (-7.14% 🔻)	75%
🟡	`...` / useTransactionType.ts	69.44% (-3.28% 🔻)	42.11% (-3.61% 🔻)	100%	70.59% (-3.61% 🔻)
🟢	`...` / index.tsx	87.5% (+1.14% 🔼)	50% (-2.94% 🔻)	50%	86.96% (+1.24% 🔼)
🟢	`...` / index.tsx	89.47% (-4.28% 🔻)	62.5% (-8.93% 🔻)	100%	88.89% (-4.44% 🔻)
🟢	`...` / useTransactionStatus.ts	88% (-3.3% 🔻)	60% (-6.67% 🔻)	100%	90.91% (-4.09% 🔻)
🔴	`...` / index.tsx	52.38% (-0.25% 🔻)	0%	0%	55% (-0.56% 🔻)
🟢	`...` / index.ts	95.45% (-4.55% 🔻)	66.67%	100%	100%

Test suite run success

1464 tests passing in 202 suites.

Report generated by 🧪jest coverage report action from 330d73e

github-actions · 2024-02-09T11:21:40Z

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`1011.96 KB` (🟡 +1.51 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

New Page Added

The following page was added to the bundle from the code in this PR:

Page	Size (compressed)	First Load
`/swap`	`28.25 KB`	1.02 MB

Thirteen Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/apps`	`50.02 KB` (🟡 +3.47 KB)	1.04 MB
`/apps/custom`	`41.64 KB` (🟡 +3.47 KB)	1.03 MB
`/apps/open`	`84.88 KB` (🟡 +10.85 KB)	1.07 MB
`/balances`	`30.58 KB` (🟡 +724 B)	1.02 MB
`/home`	`63.54 KB` (🟡 +3.83 KB)	1.05 MB
`/new-safe/create`	`32.23 KB` (🟡 +6 B)	1.02 MB
`/new-safe/load`	`18.35 KB` (🟡 +6 B)	1.01 MB
`/settings/safe-apps`	`25.33 KB` (🟡 +3.47 KB)	1.01 MB
`/transactions`	`108.02 KB` (🟡 +6.57 KB)	1.09 MB
`/transactions/history`	`107.99 KB` (🟡 +6.57 KB)	1.09 MB
`/transactions/messages`	`67.81 KB` (🟡 +6.56 KB)	1.05 MB
`/transactions/queue`	`63.12 KB` (🟡 +6.57 KB)	1.05 MB
`/transactions/tx`	`52.95 KB` (🟡 +6.57 KB)	1.04 MB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

github-actions · 2024-03-07T16:53:41Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-04-08T14:33:48Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-04-10T10:17:27Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-04-16T08:56:02Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-04-17T10:39:06Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

src/features/swap/index.tsx

github-actions · 2024-04-18T11:31:34Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-04-22T10:20:01Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-04-26T13:05:29Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-04-29T14:21:25Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-05-01T16:04:32Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

github-actions · 2024-05-02T20:30:48Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

* Add token symbols to swap transaction summary fix: make icons circular fix: increase overlap and right margin of token symbols fix: align text for swap orders with other tx types feat: implement swap label according to design * fix: icons are square in dark mode . --------- Co-authored-by: Daniel Dimitrov <daniel@compojoom.com>

…3654) * feat: check if recipient address is blocked only update params when changed fix: Move state setters into useEffect, adjust text slightly fix: Always set tradeType * fix: Adjust wording --------- Co-authored-by: Usame Algan <usame@safe.global> Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>

* Fix: tx summary pending and expired status overlap * remove duplicate fix

…ry (#3669) * fix: overlapping text in tx summary * fix: give more space to info block

* refactor: remove chainId * refactor: address review comments

* feat: add partially filled state * refactor: use new icon for partial fill * fix: wrong calculation for partially filled * improve tests

* fix: mobile view on desktop res * reserve column for actions even if not present to keep things aligned * fix: remove whitespace * fix: incorrent column names for actions and status

github-actions · 2024-05-08T16:27:22Z

ESLint Summary View Full Report

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

package.json

public/images/transactions/cow-logo.png

katspaugh · 2024-05-09T06:37:35Z

src/components/balances/AssetsTable/index.tsx

+  const router = useRouter()
+
+  return (
+    <CheckWallet allowSpendingLimit={!!spendingLimit}>


@liliya-soroka @francovenica have you checked swaps with a spending limit?

src/components/balances/AssetsTable/index.tsx

src/components/common/BlockedAddress/index.tsx

src/features/counterfactual/FirstTxFlow.tsx

src/features/swap/index.tsx

katspaugh · 2024-05-09T07:04:42Z

src/services/analytics/events/swaps.ts

+  SWAP_TOKENS: {
+    action: 'Swap total asset',
+    category: SWAP_CATEGORY,
+  },


@alicecha have you already reviewed the analytics events on this branch?

src/features/swap/hooks/useIsExpiredSwap.ts

tmp

Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>

src/features/swap/hooks/useIsExpiredSwap.ts

katspaugh

🎉

compojoom force-pushed the feat-cow-swap branch from 65ad80c to e44d617 Compare February 9, 2024 11:02

compojoom force-pushed the feat-cow-swap branch from 1404676 to bff64c1 Compare March 7, 2024 16:50

compojoom force-pushed the feat-cow-swap branch from 7f3ba03 to ffe8a88 Compare March 8, 2024 08:34

compojoom force-pushed the feat-cow-swap branch from fc4f0f2 to 5c236f2 Compare April 8, 2024 14:30

usame-algan changed the title ~~Feat swaps~~ Feat: Native Swaps Apr 15, 2024

usame-algan force-pushed the feat-cow-swap branch from a86fd47 to 9a8e387 Compare April 15, 2024 13:17

anxolin reviewed Apr 18, 2024

View reviewed changes

src/features/swap/index.tsx Show resolved Hide resolved

anxolin reviewed Apr 18, 2024

View reviewed changes

src/features/swap/index.tsx Outdated Show resolved Hide resolved

anxolin reviewed Apr 18, 2024

View reviewed changes

src/features/swap/index.tsx Show resolved Hide resolved

anxolin reviewed Apr 18, 2024

View reviewed changes

src/features/swap/index.tsx Outdated Show resolved Hide resolved

anxolin reviewed Apr 18, 2024

View reviewed changes

src/features/swap/index.tsx Outdated Show resolved Hide resolved

anxolin reviewed Apr 18, 2024

View reviewed changes

src/features/swap/index.tsx Show resolved Hide resolved

compojoom force-pushed the feat-cow-swap branch from 6e874fd to af242fe Compare April 26, 2024 13:02

jmealy force-pushed the feat-cow-swap branch from cd85798 to ddcaaf5 Compare April 29, 2024 12:41

compojoom force-pushed the feat-cow-swap branch from eb05e1e to 27ba816 Compare May 2, 2024 08:13

jmealy and others added 9 commits May 8, 2024 18:24

Fix: do not show pending status if swap order is expired (#3662)

b85ae36

* Fix: tx summary pending and expired status overlap * remove duplicate fix

fix: use native swap icon for swaps in the queue (#3667)

292bd83

Fix: text overlaps and hidden execute button in the transaction summa…

a85db53

…ry (#3669) * fix: overlapping text in tx summary * fix: give more space to info block

Address Swap review feedback (#3674)

9db1352

* refactor: remove chainId * refactor: address review comments

fix: limit -> market (#3672)

5b80be9

feat: add partially filled state [SWT-51] (#3666)

228994a

* feat: add partially filled state * refactor: use new icon for partial fill * fix: wrong calculation for partially filled * improve tests

Fix: queue changes to mobile layout on desktop resolutions (#3679)

32c909f

* fix: mobile view on desktop res * reserve column for actions even if not present to keep things aligned * fix: remove whitespace * fix: incorrent column names for actions and status

compojoom force-pushed the feat-cow-swap branch from 407cfcb to 32c909f Compare May 8, 2024 16:26

compojoom marked this pull request as ready for review May 8, 2024 16:27

compojoom requested review from katspaugh and usame-algan May 8, 2024 16:27

katspaugh reviewed May 9, 2024

View reviewed changes

jmealy and others added 9 commits May 9, 2024 09:47

Refactor: move swap button component to swap feature

f974359

tmp

fix: renaming functions and messages etc

00a8945

use existing useIntervalCounter hook for checking swap expiry

c177df9

remove commented out cow widget params

aff152f

remove unused rounded prop

9fb3f4f

Update src/components/common/Disclaimer/index.tsx

e465894

Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>

Update src/components/transactions/TxDetails/index.tsx

8aac74f

Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>

Update src/components/tx-flow/flows/SuccessScreen/index.tsx

09da79e

Co-authored-by: katspaugh <381895+katspaugh@users.noreply.github.com>

fix: keep safe apps disclaimer plural and swaps disclaimer singlulare

50714c4

katspaugh reviewed May 9, 2024

View reviewed changes

src/features/swap/hooks/useIsExpiredSwap.ts Outdated Show resolved Hide resolved

remove useinterval hook

330d73e

katspaugh approved these changes May 9, 2024

View reviewed changes

compojoom merged commit eeaf972 into dev May 10, 2024
18 of 19 checks passed

compojoom deleted the feat-cow-swap branch May 10, 2024 08:19

github-actions bot locked and limited conversation to collaborators May 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Native Swaps #3231

Feat: Native Swaps #3231

compojoom commented Feb 9, 2024 •

edited by usame-algan

github-actions bot commented Feb 9, 2024 •

edited

github-actions bot commented Feb 9, 2024 •

edited

github-actions bot commented Feb 9, 2024 •

edited

github-actions bot commented Feb 9, 2024 •

edited

github-actions bot commented Mar 7, 2024 •

edited

github-actions bot commented Apr 8, 2024 •

edited

github-actions bot commented Apr 10, 2024 •

edited

github-actions bot commented Apr 16, 2024 •

edited

github-actions bot commented Apr 17, 2024 •

edited

github-actions bot commented Apr 18, 2024 •

edited

github-actions bot commented Apr 22, 2024 •

edited

github-actions bot commented Apr 26, 2024 •

edited

github-actions bot commented Apr 29, 2024 •

edited

github-actions bot commented May 1, 2024 •

edited

github-actions bot commented May 2, 2024 •

edited

github-actions bot commented May 8, 2024 •

edited

katspaugh May 9, 2024

katspaugh May 9, 2024

katspaugh left a comment

Feat: Native Swaps #3231

Feat: Native Swaps #3231

Conversation

compojoom commented Feb 9, 2024 • edited by usame-algan

What it solves

How this PR fixes it

How to test it

Screenshots

Checklist

github-actions bot commented Feb 9, 2024 • edited

Branch preview

github-actions bot commented Feb 9, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Feb 9, 2024 • edited

Coverage report

Test suite run success

github-actions bot commented Feb 9, 2024 • edited

📦 Next.js Bundle Analysis for safe-wallet-web

⚠️ Global Bundle Size Increased

New Page Added

Thirteen Pages Changed Size

github-actions bot commented Mar 7, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Apr 8, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Apr 10, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Apr 16, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Apr 17, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Apr 18, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Apr 22, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Apr 26, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented Apr 29, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented May 1, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented May 2, 2024 • edited

ESLint Summary View Full Report

github-actions bot commented May 8, 2024 • edited

ESLint Summary View Full Report

katspaugh May 9, 2024

Choose a reason for hiding this comment

katspaugh May 9, 2024

Choose a reason for hiding this comment

katspaugh left a comment

Choose a reason for hiding this comment

compojoom commented Feb 9, 2024 •

edited by usame-algan

github-actions bot commented Feb 9, 2024 •

edited

github-actions bot commented Feb 9, 2024 •

edited

github-actions bot commented Feb 9, 2024 •

edited

github-actions bot commented Feb 9, 2024 •

edited

github-actions bot commented Mar 7, 2024 •

edited

github-actions bot commented Apr 8, 2024 •

edited

github-actions bot commented Apr 10, 2024 •

edited

github-actions bot commented Apr 16, 2024 •

edited

github-actions bot commented Apr 17, 2024 •

edited

github-actions bot commented Apr 18, 2024 •

edited

github-actions bot commented Apr 22, 2024 •

edited

github-actions bot commented Apr 26, 2024 •

edited

github-actions bot commented Apr 29, 2024 •

edited

github-actions bot commented May 1, 2024 •

edited

github-actions bot commented May 2, 2024 •

edited

github-actions bot commented May 8, 2024 •

edited