Skip to content

Implement transfer management functionality #165

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
samwel141 merged 3 commits into from
Jan 5, 2026
Merged

Implement transfer management functionality #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42d97b0
feat(Transfers): enhance transfer management with new functionalities
samwel141 Dec 13, 2025
c3fd918
Merge branch 'v2' of https://github.com/samwel141/treetracker-wallet-…
samwel141 Dec 13, 2025
35a1c26
fix(Transfers): update default sorting and enhance row sorting logic
samwel141 Jan 5, 2026
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
79 changes: 78 additions & 1 deletion src/api/transfers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import apiClient from '../utils/apiClient';
import { makeQueryString } from '../utils/formatting';
import secureLocalStorage from 'react-secure-storage';

export const getTransfers = async (token, { pagination, filter }) => {
export const getTransfers = async (token, { pagination, filter, sorting }) => {
try {
const where = filter.getWhereObj();
// pagination: limit, offset
Expand All @@ -11,6 +12,14 @@ export const getTransfers = async (token, { pagination, filter }) => {
...where,
};

if (sorting) {
const { sort_by, order } = sorting;
if (sort_by) {
transferFilter.sort_by = sort_by;
transferFilter.order = order;
}
}

const queryString = makeQueryString(transferFilter);

const response = await apiClient
Expand All @@ -20,4 +29,72 @@ export const getTransfers = async (token, { pagination, filter }) => {
} catch (error) {
console.error(error);
}
};

export const getPendingTransfers = async (token) => {
try {
const response = await apiClient
.setAuthHeader(token)
.get(`/transfers?state=pending`);
return response.data;
} catch (error) {
console.error(error);
}
};

export const acceptTransfer = async ({ id, token }) => {
try {
const response = await fetch(
`${process.env.REACT_APP_WALLET_API_ROOT}/transfers/${id}/accept`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'TREETRACKER-API-KEY': secureLocalStorage.getItem('api-key') || '',
Authorization: token ? `Bearer ${token}` : '',
},
}
);
return response;
} catch (error) {
console.error(error);
}
};

export const declineTransfer = async ({ id, token }) => {
try {
const response = await fetch(
`${process.env.REACT_APP_WALLET_API_ROOT}/transfers/${id}/decline`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'TREETRACKER-API-KEY': secureLocalStorage.getItem('api-key') || '',
Authorization: token ? `Bearer ${token}` : '',
},
}
);
return response;
} catch (error) {
console.error(error);
}
};

export const cancelTransfer = async ({ id, token }) => {
try {
const response = await fetch(
`${process.env.REACT_APP_WALLET_API_ROOT}/transfers/${id}`,
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'TREETRACKER-API-KEY': secureLocalStorage.getItem('api-key') || '',
Authorization: token ? `Bearer ${token}` : '',
},
}
);
return response;
} catch (error) {
console.error(error);
}
};
58 changes: 35 additions & 23 deletions src/components/Routes/ClientRoutes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,11 @@ const ClientRoutes = () => {
exact
element={
<TrustRelationshipsProvider>
<Layout>
<Wallet />
</Layout>
<TransfersProvider>
<Layout>
<Wallet />
</Layout>
</TransfersProvider>
</TrustRelationshipsProvider>
}
/>
Expand All @@ -44,11 +46,11 @@ const ClientRoutes = () => {
exact
element={
<TrustRelationshipsProvider>
<Layout>
<TransfersProvider>
<TransfersProvider>
<Layout>
<MyTransfers />
</TransfersProvider>
</Layout>
</Layout>
</TransfersProvider>
</TrustRelationshipsProvider>
}
/>
Expand All @@ -57,9 +59,11 @@ const ClientRoutes = () => {
exact
element={
<TrustRelationshipsProvider>
<Layout>
<SendTokens />
</Layout>
<TransfersProvider>
<Layout>
<SendTokens />
</Layout>
</TransfersProvider>
</TrustRelationshipsProvider>
}
/>
Expand All @@ -68,11 +72,13 @@ const ClientRoutes = () => {
exact
element={
<TrustRelationshipsProvider>
<Layout>
<WalletsProvider>
<MyWallets />
</WalletsProvider>
</Layout>
<TransfersProvider>
<Layout>
<WalletsProvider>
<MyWallets />
</WalletsProvider>
</Layout>
</TransfersProvider>
</TrustRelationshipsProvider>
}
/>
Expand All @@ -81,9 +87,11 @@ const ClientRoutes = () => {
exact
element={
<TrustRelationshipsProvider>
<Layout>
<TransfersProvider>
<Layout>
<TrustRelationship />
</Layout>
</Layout>
</TransfersProvider>
</TrustRelationshipsProvider>
}
/>
Expand All @@ -92,19 +100,23 @@ const ClientRoutes = () => {
exact
element={
<TrustRelationshipsProvider>
<Layout>
<CustomizeWallet />
</Layout>
<TransfersProvider>
<Layout>
<CustomizeWallet />
</Layout>
</TransfersProvider>
</TrustRelationshipsProvider>
}
/>
<Route
path="*"
element={
<TrustRelationshipsProvider>
<Layout>
<NotFound />
</Layout>
<TransfersProvider>
<Layout>
<NotFound />
</Layout>
</TransfersProvider>
</TrustRelationshipsProvider>
}
/>
Expand Down
7 changes: 5 additions & 2 deletions src/components/layout/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ import { useLocation } from "react-router-dom";
import { StyledContent } from "./LayoutStyled";
import Menu from "./Menu/Menu";
import { useTrustRelationshipsContext } from "../../store/TrustRelationshipsContext";
import { useTransfersContext } from "../../store/TransfersContext";


const Layout = ({ children }) => {
const [open, setOpen] = useState(false);

const { count } = useTrustRelationshipsContext();
const { count: trustRelationshipCount } = useTrustRelationshipsContext();
const { count: transfersCount } = useTransfersContext();

const handleDrawerOpen = () => {
setOpen(true);
Expand Down Expand Up @@ -44,7 +46,8 @@ const Layout = ({ children }) => {
<Box sx={{ display: "flex" }}>
<Menu
open={open}
count={count}
trustRelationshipCount={trustRelationshipCount}
transfersCount={transfersCount}
handleDrawerClose={handleDrawerClose}
handleDrawerOpen={handleDrawerOpen}
/>
Expand Down
8 changes: 6 additions & 2 deletions src/components/layout/Menu/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import MenuItem from './MenuItem/MenuItem';
import { DrawerHeaderStyled, DrawerStyled } from './MenuStyled';
import TopMenu from './TopMenu/TopMenu';

const Menu = ({ open, handleDrawerClose, handleDrawerOpen, count }) => {
const Menu = ({ open, handleDrawerClose, handleDrawerOpen, trustRelationshipCount, transfersCount }) => {
const theme = useTheme();

return (
Expand All @@ -23,7 +23,11 @@ const Menu = ({ open, handleDrawerClose, handleDrawerOpen, count }) => {
)}
</IconButton>
</DrawerHeaderStyled>
<MenuItem count={count} open={open} />
<MenuItem
trustRelationshipCount={trustRelationshipCount}
transfersCount={transfersCount}
open={open}
/>
</DrawerStyled>
</>
);
Expand Down
41 changes: 31 additions & 10 deletions src/components/layout/Menu/MenuItem/MenuItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import * as React from 'react';
import LinkItem from './LinkItem';
import { useState } from 'react';

const MenuItem = ({ open, count }) => {
const MenuItem = ({ open, trustRelationshipCount, transfersCount }) => {
const [isHovered, setIsHovered] = useState(false);

return (
Expand All @@ -27,21 +27,42 @@ const MenuItem = ({ open, count }) => {
isActive={location.pathname === '/send-tokens'}
open={open}
/>
<LinkItem
itemPath={'/my-transfers'}
itemName={'My Transfers'}
itemIcon={<CompareIcon />}
isActive={location.pathname === '/my-transfers'}
open={open}
/>
{transfersCount > 0 && open ? (
<div
style={{
display: 'flex',
alignItems: 'center',
backgroundColor: isHovered ? '#E1F2E89C' : 'transparent',
}}
onMouseOver={() => setIsHovered(true)}
onMouseOut={() => setIsHovered(false)}
>
<LinkItem
itemPath={'/my-transfers'}
itemName={'My Transfers'}
itemIcon={<CompareIcon />}
isActive={location.pathname === '/my-transfers'}
open={open}
pendingCount={transfersCount}
/>
</div>
) : (
<LinkItem
itemPath={'/my-transfers'}
itemName={'My Transfers'}
itemIcon={<CompareIcon />}
isActive={location.pathname === '/my-transfers'}
open={open}
/>
)}
<LinkItem
itemPath={'/list-wallets'}
itemName={'My Wallets'}
itemIcon={<AccountBalanceWalletRoundedIcon />}
isActive={location.pathname === '/list-wallets'}
open={open}
/>
{count > 0 && open ? (
{trustRelationshipCount > 0 && open ? (
<div
style={{
display: 'flex',
Expand All @@ -57,7 +78,7 @@ const MenuItem = ({ open, count }) => {
itemIcon={<HandshakeIcon />}
isActive={location.pathname === '/trust-relationship'}
open={open}
pendingCount={count}
pendingCount={trustRelationshipCount}
/>
</div>
) : (
Expand Down
37 changes: 2 additions & 35 deletions src/pages/MyTransfers/MyTransfers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import React, { useContext, useEffect, useState } from 'react';
import React from 'react';
import { Grid } from '@mui/material';
import TransfersTable from './TransfersTable';
import Message from '../../components/UI/components/Message/Message';
import { getTransfers } from '../../api/transfers';
import { useTransfersContext } from '../../store/TransfersContext';
import AuthContext from '../../store/auth-context';

/**@function
* @name MyTransfers
Expand All @@ -14,39 +12,8 @@ import AuthContext from '../../store/auth-context';
* */
const MyTransfers = () => {
// get data from context
const { pagination, filter, setIsLoading, prepareRows } =
const { message, tableRows, totalRowCount, setMessage } =
useTransfersContext();
// error
const [message, setMessage] = useState('');
// data to be displayed in the table
const [tableRows, setTableRows] = useState([]);
// total rows count for pagination
const [totalRowCount, setTotalRowCount] = useState(null);

const authContext = useContext(AuthContext);

// load data
useEffect(() => {
const loadData = async () => {
try {
setIsLoading(true);
const data = await getTransfers(authContext.token, {
pagination,
filter,
});
const preparedRows = prepareRows(await data.transfers);

setTableRows(preparedRows);
setTotalRowCount(data.total);
} catch (error) {
console.error(error);
setMessage('An error occurred while fetching the table data');
} finally {
setIsLoading(false);
}
};
loadData();
}, [pagination, filter]);

return (
<div
Expand Down
Loading