Skip to content
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.

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

Enhance Dex functionality with new components and improved user experience #563

Closed
wants to merge 97 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
97 commits
Select commit Hold shift + click to select a range
b6cc048
feat(dex): add Dex home page component and routing
etsraphael Oct 29, 2024
478e318
feat(dex): enhance Dex home page with navigation and add liquidity an…
etsraphael Oct 29, 2024
e3cc40c
feat(dex): update Dex swapping page layout and add payment functionality
etsraphael Oct 29, 2024
2d35ee4
feat(dex): update Dex swapping page layout and improve input fields
etsraphael Oct 29, 2024
0ceff47
feat(dex): enhance Dex swapping page layout and styling with improved…
etsraphael Oct 29, 2024
e6620b9
feat(dex): update Dex swapping page layout with improved input fields…
etsraphael Oct 30, 2024
9858ba6
feat(dex): improve layout and styling of the Dex swapping page with u…
etsraphael Oct 30, 2024
74fd395
feat(dex): add network selection dialog to Dex swapping page
etsraphael Oct 30, 2024
00a4e8c
feat(dex): implement network selection dialog with dynamic network li…
etsraphael Oct 30, 2024
8268560
feat(dex): update network selection handling in Dex swapping page wit…
etsraphael Oct 30, 2024
07df161
feat(dex): enhance network dialog with selected chain ID and active s…
etsraphael Oct 31, 2024
5181f14
feat(dex): add tokens dialog and integrate with swapping page for tok…
etsraphael Oct 31, 2024
e42be38
feat(dex): implement token selection dialog with search functionality
etsraphael Oct 31, 2024
ebaa79e
feat(dex): enhance tokens dialog with token selection and filtering f…
etsraphael Nov 1, 2024
cf13e4e
feat(dex): update token handling to use TokenId type in swapping and …
etsraphael Nov 1, 2024
ab97efb
feat(dex): update token handling to use IToken type and improve token…
etsraphael Nov 3, 2024
4971686
feat(dex): refactor dialog data handling to use INetworkDialogData an…
etsraphael Nov 3, 2024
4ad336f
feat(dex): implement swap store with actions, reducers, and effects f…
etsraphael Nov 3, 2024
b6b0a67
feat(dex): implement form handling for token swapping and integrate s…
etsraphael Nov 3, 2024
e8aaf90
feat(dex): add swapRouter configuration and integrate swap payload in…
etsraphael Nov 6, 2024
25f3a5a
feat(dex): implement liquidity form with network and token selection …
etsraphael Nov 6, 2024
e11ec81
feat(dex): implement add liquidity functionality with payload structu…
etsraphael Nov 6, 2024
5042c5a
fix(dex): update addLiquidity method to clarify contract source and a…
etsraphael Nov 6, 2024
69d4bb6
feat(dex): integrate PoolContract for liquidity management and update…
etsraphael Nov 7, 2024
491daf6
feat(dex): add IPoolSearch interface and implement getPool method in …
etsraphael Nov 7, 2024
5fb4e9d
feat(dex): enhance SwapFactoryContract and DexService with fee retrie…
etsraphael Nov 7, 2024
c21b1a7
feat(dex): implement create pool functionality and update liquidity f…
etsraphael Nov 7, 2024
eef0bbc
feat(dex): update createPool function to remove owner restriction and…
etsraphael Nov 7, 2024
f52df10
feat(dex): enhance getPool method to retrieve token0, token1, and res…
etsraphael Nov 7, 2024
d69737f
feat(dex): add IPoolDetail interface and enhance pool-related functio…
etsraphael Nov 8, 2024
cf74fab
feat(dex): enhance liquidity page with loading indicators and update …
etsraphael Nov 9, 2024
e8ee2ec
feat(dex): improve loading indicators for total liquidity display in …
etsraphael Nov 9, 2024
723ee88
feat(dex): update createPool method to return IPoolDetail and enhance…
etsraphael Nov 10, 2024
c8887c2
feat(dex): refactor addLiquidity method to streamline logic and impro…
etsraphael Nov 11, 2024
23998d4
feat(dex): add allowance checks in addLiquidity method to ensure suff…
etsraphael Nov 11, 2024
5b668e6
feat(dex): enhance addLiquidity method with gas estimation and improv…
etsraphael Nov 12, 2024
ffb4b06
feat(dex): add ERC20 token retrieval method and enhance liquidity han…
etsraphael Nov 12, 2024
a87185d
feat(dex): implement token address validation and lookup in tokens di…
etsraphael Nov 12, 2024
33b95a2
feat(dex): add token search state and integrate into liquidity and sw…
etsraphael Nov 13, 2024
f0b8ae3
feat(dex): refactor token balance retrieval to use new ITokenAndBalan…
etsraphael Nov 13, 2024
2fda246
feat(dex): update token selection handling to support null values in …
etsraphael Nov 13, 2024
bee1872
feat(swap): add balance and allowance handling for token details in s…
etsraphael Nov 14, 2024
939f7ca
feat(dex): update contract addresses for CustomERC20Token and balance…
etsraphael Nov 14, 2024
c82ba36
refactor(swap): improve type handling and formatting in interfaces an…
etsraphael Nov 14, 2024
b5f858d
feat(dex): rename token availability observables for consistency and …
etsraphael Nov 14, 2024
3d6b9ff
feat(dex): add approval handling for token allowances in liquidity page
etsraphael Nov 14, 2024
a918b7f
refactor(dex): improve code formatting and update token allowance han…
etsraphael Nov 14, 2024
bb57a6f
feat(dex): enhance liquidity page with dynamic button states and appr…
etsraphael Nov 15, 2024
2e74ba8
refactor(dex): simplify token approval handling and improve addLiquid…
etsraphael Nov 15, 2024
f188d6f
fix(dex): update network details to use LOCALHOST and adjust liquidit…
etsraphael Nov 15, 2024
492b76b
feat(dex): implement loadQuote functionality and update swap form sub…
etsraphael Nov 15, 2024
bef1002
feat(dex): initialize swap router and enhance contract fragment logging
etsraphael Nov 16, 2024
c027060
fix(dex): update SwapRouterObjectResponse structure and validation logic
etsraphael Nov 16, 2024
4a53bff
feat(dex): implement dynamic token quote display and update quote han…
etsraphael Nov 16, 2024
ee5b396
feat(dex): refactor swap functionality to use ISwappingPayload and up…
etsraphael Nov 16, 2024
da02917
feat(dex): enhance swapping page with token approval functionality an…
etsraphael Nov 16, 2024
d0c41d5
feat(dex): add token selection and query parameter handling for liqui…
etsraphael Nov 16, 2024
8f6a959
feat(dex): implement preloadLiquidityForm action and update token ret…
etsraphael Nov 17, 2024
65d6265
feat(dex): implement handling for preloadLiquidityForm action success…
etsraphael Nov 18, 2024
f627342
feat(dex): clean up code formatting and improve readability in swappi…
etsraphael Nov 18, 2024
0a16a99
feat(dex): enhance liquidity handling by updating poolId type and imp…
etsraphael Nov 18, 2024
356484f
feat(dex): refactor addLiquidity method to improve address retrieval …
etsraphael Nov 18, 2024
deae616
feat(dex): refactor balance and allowance handling by removing hardco…
etsraphael Nov 19, 2024
1baaa5b
feat(dex): enhance balance and allowance handling by integrating wall…
etsraphael Nov 19, 2024
7a6771d
loadBalanceAndAllowanceAction fix
etsraphael Nov 20, 2024
13f417b
feat(dex): implement fetchFormValues method to retrieve token and cha…
etsraphael Nov 20, 2024
96c79d2
save wip
etsraphael Nov 27, 2024
4823e72
feat(dex): update approval button logic and enhance form value fetchi…
etsraphael Nov 30, 2024
571c250
feat(dex): add toAmount control to swap form and implement dynamic am…
etsraphael Nov 30, 2024
7084be0
feat(dex): implement cleanup logic in DexSwappingPageComponent and en…
etsraphael Nov 30, 2024
737b90e
contractaddress renaming
etsraphael Nov 30, 2024
1f06959
feat(dex): refactor approve allowance logic to use dynamic spender ad…
etsraphael Dec 2, 2024
4d15b6e
feat(dex): remove unnecessary console logs and update payload structu…
etsraphael Dec 2, 2024
b9778fd
fix: update import paths for consistency and handle error in DexService
etsraphael Dec 2, 2024
7739846
feat(dex): enhance balance display with rounding and update layout fo…
etsraphael Dec 2, 2024
f5eecac
feat(dex): implement transaction cards for liquidity and swapping pag…
etsraphael Dec 4, 2024
2864062
feat(dex): add createdAt field to transaction card and enhance pool c…
etsraphael Dec 4, 2024
e623169
refactor(dex): reorganize liquidity buttons for improved readability …
etsraphael Dec 4, 2024
011f86f
feat(dex): add loading state and disable approval buttons during toke…
etsraphael Dec 4, 2024
d6f05b9
feat(dex): add tokenId to approve allowance actions and enhance liqui…
etsraphael Dec 5, 2024
19e5c4e
feat(dex): enhance approve allowance actions with chainId and add eff…
etsraphael Dec 5, 2024
3bc43e2
feat(dex): enhance liquidity addition process with loading state and …
etsraphael Dec 5, 2024
22bef44
feat(dex): add swapping state management with loading indicators and …
etsraphael Dec 5, 2024
9c19e5a
feat(dex): enhance liquidity and swapping functionality with improved…
etsraphael Dec 7, 2024
faf8241
fix(dex): correct amount calculation for token2 in addLiquidity method
etsraphael Dec 7, 2024
637bab0
feat(dex): add default network pairs and refactor token path initiali…
etsraphael Dec 7, 2024
2dc5e38
feat(dex): add pool detail state management to swapping page component
etsraphael Dec 7, 2024
f154782
feat(dex): implement pool loading functionality in swapping page comp…
etsraphael Dec 7, 2024
9cf8aa4
feat(dex): add pool empty state handling and improve swapping form logic
etsraphael Dec 7, 2024
37765c0
feat(dex): refactor token handling and improve pool loading logic in …
etsraphael Dec 7, 2024
1f64922
feat(dex): enhance token selection handling and improve default token…
etsraphael Dec 7, 2024
3821887
feat(dex): add pool not found handling and improve quote loading logi…
etsraphael Dec 9, 2024
9bb1c94
feat(dex): fix network dialog function name and improve allowance but…
etsraphael Dec 9, 2024
a8dc25f
feat(dex): enhance test setup by adding shared modules and mock servi…
etsraphael Dec 9, 2024
3eed68c
feat(dex): enhance test setup by adding mock store states for swap an…
etsraphael Dec 9, 2024
21b7803
feat(dex): enhance test setup by adding global state mock for liquidi…
etsraphael Dec 9, 2024
8dde175
Merge branch 'release/dev' of https://github.com/etsraphael/ChainBrar…
etsraphael Dec 9, 2024
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
Prev Previous commit
Next Next commit
feat(dex): add tokens dialog and integrate with swapping page for tok…
…en selection
  • Loading branch information
etsraphael committed Oct 31, 2024
commit 5181f145d8ac438eb1863424b2253e71fc999b87
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ <h6 class="mb-0 text-muted">From</h6>
<mat-form-field appearance="outline" class="col-12">
<mat-label>Amount</mat-label>
<input class="px-2" matInput type="number" placeholder="0" />
<span class="currency-container-input px-2" matTextSuffix>
<span (click)="openTokensDialog(true)" class="currency-container-input px-2" matTextSuffix>
USDC
<i class="bi bi-chevron-down"></i>
</span>
@@ -38,7 +38,7 @@ <h6 class="mb-0 text-muted">To</h6>
<mat-form-field appearance="outline" class="col-12">
<mat-label>Amount</mat-label>
<input class="px-2" matInput type="number" placeholder="0" />
<span class="currency-container-input px-2" matTextSuffix>
<span (click)="openTokensDialog(false)" class="currency-container-input px-2" matTextSuffix>
USDC
<i class="bi bi-chevron-down"></i>
</span>
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Component } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { NetworkDialogComponent } from './../../../../../../shared/components/modal/network-dialog/network-dialog.component';
import { INetworkDetail, NetworkChainId, Web3LoginService } from '@chainbrary/web3-login';
import { NetworkDialogComponent } from './../../../../../../shared/components/modal/network-dialog/network-dialog.component';
import { TokensDialogComponent } from './../../../../../../shared/components/modal/tokens-dialog/tokens-dialog.component';

@Component({
selector: 'app-dex-swapping-page',
@@ -10,8 +11,8 @@ import { INetworkDetail, NetworkChainId, Web3LoginService } from '@chainbrary/we
})
export class DexSwappingPageComponent {
networkPath: INetworkDetail[] = [
this.web3loginService.getNetworkDetailByChainId(NetworkChainId.ETHEREUM),
this.web3loginService.getNetworkDetailByChainId(NetworkChainId.ETHEREUM)
this.web3loginService.getNetworkDetailByChainId(NetworkChainId.POLYGON),
this.web3loginService.getNetworkDetailByChainId(NetworkChainId.POLYGON)
];

constructor(
@@ -35,6 +36,19 @@ export class DexSwappingPageComponent {
return dialogRef;
}

openTokensDialog(from: boolean): MatDialogRef<TokensDialogComponent> {
const dialogRef: MatDialogRef<TokensDialogComponent> = this.dialog.open(TokensDialogComponent, {
panelClass: ['col-12', 'col-md-8', 'col-lg-6', 'col-xl-5'],
autoFocus: false
});

dialogRef.afterClosed().subscribe((chainId: NetworkChainId) => {
if (chainId) this.handleNetworkSelected(chainId, from);
});

return dialogRef;
}

private handleNetworkSelected(chainId: NetworkChainId, from: boolean): void {
// Handle the selected network here
if (from) {
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>tokens-dialog works!</p>
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { TokensDialogComponent } from './tokens-dialog.component';

describe('TokensDialogComponent', () => {
let component: TokensDialogComponent;
let fixture: ComponentFixture<TokensDialogComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TokensDialogComponent]
}).compileComponents();

fixture = TestBed.createComponent(TokensDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-tokens-dialog',
templateUrl: './tokens-dialog.component.html',
styleUrl: './tokens-dialog.component.scss'
})
export class TokensDialogComponent {}
7 changes: 5 additions & 2 deletions UI/src/app/shared/components/shared-components.module.ts
Original file line number Diff line number Diff line change
@@ -23,6 +23,7 @@ import { TransactionCardComponent } from './transaction-card/transaction-card.co
import { UserAvatarComponent } from './user-avatar/user-avatar.component';
import { LOAD_WASM, NgxScannerQrcodeModule } from 'ngx-scanner-qrcode';
import { NetworkDialogComponent } from './modal/network-dialog/network-dialog.component';
import { TokensDialogComponent } from './modal/tokens-dialog/tokens-dialog.component';

// Necessary to solve the problem of losing internet connection
LOAD_WASM().subscribe();
@@ -42,7 +43,8 @@ LOAD_WASM().subscribe();
DrawerSidebarComponent,
ServiceCardComponent,
QrCodeScanningPageComponent,
NetworkDialogComponent
NetworkDialogComponent,
TokensDialogComponent
],
imports: [
CommonModule,
@@ -67,7 +69,8 @@ LOAD_WASM().subscribe();
DrawerSidebarComponent,
ServiceCardComponent,
QrCodeScanningPageComponent,
NetworkDialogComponent
NetworkDialogComponent,
TokensDialogComponent
]
})
export class SharedComponentsModule {}