Skip to content

Commit ba21e94

Browse files
wainolawainola
authored
fixes and updates (#30)
1 parent 388093b commit ba21e94

File tree

5 files changed

+143
-43
lines changed

5 files changed

+143
-43
lines changed

‎public/assets/icons/khala.svg

+15
Loading

‎public/assets/icons/phala.svg

+35
Loading

‎src/components/ExplorerTable/ExplorerTable.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
shortenAddress,
1717
renderNetworkIcon,
1818
renderStatusIcon,
19+
getNetworNames,
1920
} from "../../utils/Helpers";
2021
import { useStyles } from "./styles";
2122

@@ -57,14 +58,19 @@ const ExplorerTable: React.FC<ExplorerTable> = ({
5758
toDomainId,
5859
id
5960
} = transfer;
61+
6062
const { type } = resource;
6163
let txHash: string | undefined;
6264

63-
if (status !== "pending") {
65+
if (fromDomainId === '1') {
6466
txHash = shortenAddress(deposit?.txHash!);
67+
} else {
68+
txHash = deposit?.txHash;
6569
}
70+
6671
const { name } = fromDomain;
67-
const { name: toName } = toDomain;
72+
const toDomainName = getNetworNames(toDomainId);
73+
6874

6975
return (
7076
<TableRow className={classes.row} key={transfer.id} sx={{ borderBottom: "2px solid #CDC2B1"}}>
@@ -88,7 +94,7 @@ const ExplorerTable: React.FC<ExplorerTable> = ({
8894
<TableCell className={classes.row}>
8995
<div style={{ width: '100%' }}>
9096
<span style={{ display: 'flex' }}>
91-
{renderNetworkIcon(toDomainId, classes)} {toName}
97+
{renderNetworkIcon(toDomainId, classes)} {toDomainName}
9298
</span>
9399
</div>
94100
</TableCell>

‎src/pages/ExplorerPage/ExplorerPage.tsx

+62-30
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const initState: State = {
2020
page: 1,
2121
limit: 10,
2222
},
23-
init: true
24-
}
23+
init: true,
24+
};
2525

2626
const ExplorerPage = () => {
2727
const explorerContext = useExplorer();
@@ -41,27 +41,56 @@ const ExplorerPage = () => {
4141
const [active, setActive] = useState(false);
4242
// NOTE: we are going to use the setter upon filters implementation
4343

44-
4544
const [state, dispatcher] = useReducer(reducer, initState);
4645

4746
const handleTimelineButtonClick = () =>
4847
explorerPageDispatcher({ type: "timelineButtonClick" });
4948

49+
// NOTE: this is super temporary
50+
const defaultValuesForNull = (transfers: Transfer[]) => {
51+
let parsedTransfers = [] as Transfer[];
52+
for (let transfer of transfers) {
53+
let newTransfer = {} as Transfer;
54+
for (let key in transfer) {
55+
if (transfer[key as keyof Transfer] === null) {
56+
if (key === "toDomainId") {
57+
console.warn("todomainid");
58+
// @ts-ignore-next-line
59+
newTransfer[key as keyof Transfer] = "1";
60+
} else if (key === "resource") {
61+
// @ts-ignore-next-line
62+
newTransfer[key as keyof Transfer] = { type: "fungible" };
63+
} else {
64+
// @ts-ignore-next-line
65+
newTransfer[key as keyof Transfer] = "";
66+
}
67+
} else {
68+
// @ts-ignore-next-line
69+
newTransfer[key as keyof Transfer] = transfer[key as keyof Transfer];
70+
}
71+
}
72+
parsedTransfers.push({ ...newTransfer });
73+
}
74+
75+
return parsedTransfers;
76+
};
77+
5078
const transferData = async () => {
5179
try {
5280
const transfersResponse = await routes.transfers(
5381
`${state.queryParams.page}`,
5482
`${state.queryParams.limit}`,
5583
);
84+
5685
dispatcher({
57-
type: 'fetch_transfers',
58-
payload: transfersResponse
59-
})
86+
type: "fetch_transfers",
87+
payload: defaultValuesForNull(transfersResponse),
88+
});
6089
} catch (e) {
6190
dispatcher({
62-
type: 'fetch_transfer_error',
63-
payload: "Error fetching all the transfers"
64-
})
91+
type: "fetch_transfer_error",
92+
payload: "Error fetching all the transfers",
93+
});
6594
}
6695
};
6796

@@ -73,14 +102,14 @@ const ExplorerPage = () => {
73102
`${state.queryParams.limit}`,
74103
);
75104
dispatcher({
76-
type: 'fetch_transfer_by_sender',
77-
payload: transferResponseBySender
78-
})
105+
type: "fetch_transfer_by_sender",
106+
payload: defaultValuesForNull(transferResponseBySender),
107+
});
79108
} catch (e) {
80109
dispatcher({
81-
type: 'fetch_transfer_by_sender_error',
82-
payload: "Error fetching all the transfers"
83-
})
110+
type: "fetch_transfer_by_sender_error",
111+
payload: "Error fetching all the transfers",
112+
});
84113
}
85114
};
86115

@@ -99,16 +128,15 @@ const ExplorerPage = () => {
99128
useEffect(() => {
100129
if (state.loading === "loading" && state.transfers.length) {
101130
dispatcher({
102-
type: 'loading_done'
103-
})
131+
type: "loading_done",
132+
});
104133
}
105134
}, [state.loading, state.transfers]);
106135

107136
useEffect(() => {
108137
transferData();
109138
}, [state.queryParams]);
110139

111-
112140
return (
113141
<Box
114142
sx={{
@@ -134,33 +162,37 @@ const ExplorerPage = () => {
134162
<Button
135163
onClick={() => {
136164
dispatcher({
137-
type: 'set_query_params',
165+
type: "set_query_params",
138166
payload: {
139167
page: state.queryParams.page - 1,
140168
limit: state.queryParams.limit,
141-
}
142-
})
169+
},
170+
});
143171
}}
144172
className={classes.paginationButtons}
145173
disabled={state.queryParams.page === 1}
146174
>
147175
← Previous
148176
</Button>
149-
<span style={{
150-
display: 'flex',
151-
flexDirection: 'row',
152-
alignItems: 'center',
153-
marginLeft: '10px',
154-
}}>{state.queryParams.page}</span>
177+
<span
178+
style={{
179+
display: "flex",
180+
flexDirection: "row",
181+
alignItems: "center",
182+
marginLeft: "10px",
183+
}}
184+
>
185+
{state.queryParams.page}
186+
</span>
155187
<Button
156188
onClick={() => {
157189
dispatcher({
158-
type: 'set_query_params',
190+
type: "set_query_params",
159191
payload: {
160192
page: state.queryParams.page + 1,
161193
limit: state.queryParams.limit,
162-
}
163-
})
194+
},
195+
});
164196
}}
165197
className={classes.paginationButtons}
166198
>

‎src/utils/Helpers.tsx

+22-10
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const renderStatusIcon = (
7777
className={classes.statusPillIcon}
7878
/>
7979
);
80-
case "completed":
80+
case "executed":
8181
return (
8282
<img
8383
src={`/assets/icons/success.svg`}
@@ -112,27 +112,26 @@ export const renderNetworkIcon = (
112112
classes: Record<"networkIcon", string>,
113113
) => {
114114
switch (id) {
115-
case "0":
116-
case "3":
115+
case "1":
117116
return (
118117
<img
119118
src={`/assets/icons/all.svg`}
120119
alt="ethereum"
121120
className={classes.networkIcon}
122121
/>
123122
);
124-
case "1":
123+
case "2":
125124
return (
126125
<img
127-
src={`/assets/icons/polygon.svg`}
126+
src={`/assets/icons/khala.svg`}
128127
alt="polygon"
129128
className={classes.networkIcon}
130129
/>
131130
);
132-
case "2":
131+
case "3":
133132
return (
134133
<img
135-
src={`/assets/icons/moonbeam.svg`}
134+
src={`/assets/icons/phala.svg`}
136135
alt="moonbeam"
137136
className={classes.networkIcon}
138137
/>
@@ -152,13 +151,26 @@ export const getDisplayedStatuses = (status: string) => {
152151
switch (status) {
153152
case "pending":
154153
return "Pending";
155-
case "completed":
156-
return "Completed";
154+
case "executed":
155+
return "Executed";
157156
case "reverted":
158157
return "Reverted";
159158
case 'failed':
160159
return "Failed";
161160
default:
162161
return "Pending";
163162
}
164-
};
163+
};
164+
165+
export const getNetworNames = (networkId: string) => {
166+
switch (networkId) {
167+
case "1":
168+
return "Ethereum";
169+
case "2":
170+
return "Khala";
171+
case "3":
172+
return "Phala";
173+
default:
174+
return "Ethereum";
175+
}
176+
}

0 commit comments

Comments
 (0)