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.

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

Improve destination chain #35

Merged
merged 3 commits into from
Aug 10, 2023
Merged

Improve destination chain #35

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
d1c05bf
improve selectable destination chains
rubenguc Aug 9, 2023
110cdef
fix destion tests
rubenguc Aug 9, 2023
2afe6b5
evm fixes
rubenguc Aug 10, 2023
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
3 changes: 2 additions & 1 deletion src/entries/background/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,8 +271,9 @@ const processEVMTx = async ({
)) as ethers.providers.JsonRpcProvider;
const txReceipt = await api.getTransaction(txHash);
const date = Date.now();

const activity: Partial<IRecord> = {
address: originAddress,
address: destinationAddress,
type: RecordType.TRANSFER,
reference: AccountType.EVM,
hash: txHash,
Expand Down
3 changes: 2 additions & 1 deletion src/pages/send/components/CommonFormFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { SelectableChain } from "./SelectableChain";
import { useNetworkContext } from "@src/providers";
import { useEffect, useState } from "react";
import Extension from "@src/Extension";
import { Chain } from "@src/storage/entities/Chains";

export const CommonFormFields = () => {
const { t } = useTranslation("send");
Expand All @@ -26,7 +27,7 @@ export const CommonFormFields = () => {

const to = watch("to");

const [destinationChains, setDestinationChains] = useState<any[]>([]);
const [destinationChains, setDestinationChains] = useState<Chain[]>([]);

const getDestinationChains = async () => {
let chains = [selectedChain];
Expand Down
27 changes: 19 additions & 8 deletions src/pages/send/components/Destination.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ describe("Destination", () => {
useNetworkContext: () => ({
state: {
selectedChain: selectedEVMChainMock,
type: "EVM"
},
}),
useAccountContext: () => ({
Expand All @@ -34,18 +35,18 @@ describe("Destination", () => {
contacts: [
{
name: "test",
address: "0x1234",
address: "0xbE1b7B9e75b96449a9286e3dE0fa0e6E89428968",
},
],
ownAccounts: [
{
name: "test",
address: "0x1235",
address: "0xf24FF3a9CF04c71Dbc94D0b566f7A27B94566cac",
},
],
recent: [
{
address: "0x1236",
address: "0x798d4Ba9baf0064Ec19eB4F0a1a45785ae9D6DFc",
},
],
}),
Expand All @@ -57,7 +58,17 @@ describe("Destination", () => {
register: vi.fn().mockReturnValue({
onChange: vi.fn(),
}),
watch: vi.fn().mockReturnValue(true),
watch: vi.fn().mockImplementation((val: string) => {

if (val === "isXcm") return false

if (val === "to") return {
name: "Ethereum",
supportedAccounts: ["EVM"],
}

}),

}),
}));
});
Expand All @@ -71,7 +82,7 @@ describe("Destination", () => {
fireEvent.click(input);
});
await waitFor(() => {
expect(getAllByText("0x1234").length).toBe(1);
expect(getAllByText("0xbE1b7B9e75b96449a9286e3dE0fa0e6E89428968").length).toBe(1);
});
});

Expand All @@ -85,17 +96,17 @@ describe("Destination", () => {
});

await waitFor(() => {
const address = getAllByText("0x1234");
const address = getAllByText("0xbE1b7B9e75b96449a9286e3dE0fa0e6E89428968");

expect(address.length).toBe(1);
});

act(() => {
fireEvent.change(input, { target: { value: "0x123" } });
fireEvent.change(input, { target: { value: "0xbE1b7B9e75b96449a9286e3dE0fa0e6E89428968" } });
});

await waitFor(() => {
const address = getAllByText("0x1234");
const address = getAllByText("0xbE1b7B9e75b96449a9286e3dE0fa0e6E89428968");

expect(address.length).toBe(1);
});
Expand Down
70 changes: 46 additions & 24 deletions src/pages/send/components/Destination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,28 @@ import Contact from "@src/storage/entities/registry/Contact";
import { captureError } from "@src/utils/error-handling";
import { useToast } from "@src/hooks";
import { useTranslation } from "react-i18next";
import Register from "@src/storage/entities/registry/Register";
import { Chain } from "@src/storage/entities/Chains";
import { AccountType } from "@src/accounts/types";
import { isHex } from "@polkadot/util";
import { transformAddress } from "@src/utils/account-utils";


const filterAddress = (account: Register | Contact, type: AccountType) => {
const address = account.address;

if (isHex(address) && type.includes("EVM")) return true

if (!isHex(address) && type.includes("WASM")) return true

return false
}

export const Destination = () => {
const { showErrorToast } = useToast();
const { t } = useTranslation("common");
const {
state: { selectedChain },
state: { selectedChain, type },
} = useNetworkContext();
const {
state: { selectedAccount },
Expand All @@ -22,50 +38,56 @@ export const Destination = () => {

const [destinationAddress, setDestinationAddress] = useState("");

const [accountToSelect, setAccountToSelect] = useState<any>([]);
const [accountToSelect, setAccountToSelect] = useState<{ label: string, values: Contact[] | Register[] }[]>([]);
const [isOpenOptions, setisOpenOptions] = useState(false);

const isXcm = watch("isXcm");
const to = watch("to");

useEffect(() => {
if (selectedAccount.key && selectedChain?.name) {
if (selectedAccount.key && selectedChain?.name && to.name) {
(async () => {
try {
const { contacts, ownAccounts, recent } =
await Extension.getRegistryAddresses();

let _ownAccounts: Contact[] = [];

if (!isXcm) {
_ownAccounts = ownAccounts.filter(
(acc) => acc.name !== selectedAccount.value.name
);
} else {
_ownAccounts = ownAccounts;
}


_ownAccounts = !isXcm ? ownAccounts.filter(
(acc) => acc.name !== selectedAccount.value.name
) : ownAccounts

const filterByType = (to as Chain).supportedAccounts[0] === (type as AccountType) ? type as AccountType : (to as Chain).supportedAccounts[0] as AccountType;

setAccountToSelect([
{
label: "recent",
values: recent,
values: recent.filter((v) => filterAddress(v, filterByType))
},
{
label: "contacts",
values: contacts,
values: contacts.filter((v) => filterAddress(v, filterByType)),
},
{
label: "own accounts",
values: _ownAccounts,
values: _ownAccounts.filter((v) => filterAddress(v, filterByType)).map(v => ({
...v, address: transformAddress(
v?.address,
selectedChain?.addressPrefix
)
})),
},
]);

} catch (error) {
captureError(error);
showErrorToast(t("failed_to_get_addresses"));
}
})();
}
}, [selectedAccount?.key, selectedChain?.name, isXcm]);
}, [selectedAccount?.key, selectedChain?.name, isXcm, type, to?.name]);



const onChangeAccount = (account: string) => {
setDestinationAddress(account);
Expand All @@ -80,13 +102,13 @@ export const Destination = () => {

const filters = [];

const filterdRecent = recent.values.filter((v: { address: string }) =>
const filterdRecent = (recent.values as Register[]).filter((v: { address: string }) =>
v?.address?.toLowerCase().includes(destinationAddress.toLowerCase() || "")
);
const filterdContacts = contacts.values.filter((v: { address: string }) =>
const filterdContacts = (contacts.values as Contact[]).filter((v: { address: string }) =>
v?.address?.toLowerCase().includes(destinationAddress.toLowerCase() || "")
);
const filterdOwnAccounts = ownAccounts.values.filter(
const filterdOwnAccounts = (ownAccounts.values as Contact[]).filter(
(v: { address: string }) =>
v?.address
?.toLowerCase()
Expand Down Expand Up @@ -156,7 +178,7 @@ export const Destination = () => {
{filteredAddresses.map(
(type: {
label: string;
values: { name: string; address: string }[];
values: Register[] | Contact[];
}) =>
type.values?.length > 0 && (
<div key={type.label}>
Expand All @@ -165,14 +187,14 @@ export const Destination = () => {
<div className="h-[1px] w-full bg-[#343A40]" />
</div>
{type.values.map(
(acc: { name: string; address: string }) => (
(acc: Register | Contact) => (
<Combobox.Option
key={acc.address}
value={acc.address}
className="hover:bg-gray-400 hover:bg-opacity-20 cursor-pointer rounded-md overflow-hidden px-1 py-1 font-extralight text-sm text-gray-300"
onClick={() => setisOpenOptions(false)}
>
<p>{acc.name}</p>
<p>{'name' in acc ? acc.name : ""}</p>
<p className="text-ellipsis overflow-hidden">
{acc.address}
</p>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/send/components/EvmForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ export const EvmForm: FC<EvmFormProps> = ({ confirmTx }) => {
)}

<Button
classname={`font-medium text-base bg-[#212529] hover:bg-${color}-fill transition-all w-full py-2 md:py-4 rounded-md mt-7`}
classname={`font-medium text-base bg-[#212529] hover:bg-${color}-fill transition-all w-full py-2 md:py-4 rounded-md mt-7 mx-2`}
isDisabled={!canContinue || !isEnoughToPay}
onClick={onSubmit}
style={{
Expand Down
6 changes: 3 additions & 3 deletions src/pages/send/components/Fees.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const Fees = ({ fee }: any) => {
{type === "EVM" && (
<div className="flex justify-between gap-2">
<p>{t("gas_limit")}</p>
<p className="font-bold">{String(fee["gas limit"])} gwei</p>
<p className="font-bold font-inter">{String(fee["gas limit"])} gwei</p>
</div>
)}

Expand All @@ -36,7 +36,7 @@ export const Fees = ({ fee }: any) => {
<p>{t("estimated_total")}</p>
{isNativeAsset ? (
<>
<p className="font-bold">
<p className="font-bold font-inter">
{`${formatBN(
String(fee["estimated total"]),
decimals
Expand All @@ -45,7 +45,7 @@ export const Fees = ({ fee }: any) => {
</>
) : (
<>
<p className="font-bold">{`${amount} ${asset?.symbol} + ${formatBN(
<p className="font-bold font-inter">{`${amount} ${asset?.symbol} + ${formatBN(
String(fee["estimated total"]),
decimals
)} ${nativeSymbol}`}</p>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/send/components/SelectableChain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const SelectableChain: FC<SelectableChainProps> = ({
</span>
</Listbox.Button>
{canSelectChain && (optionChains?.length || 0) > 0 && (
<Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-[#212529] py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-50">
<Listbox.Options className="absolute mt-1 max-h-60 w-max overflow-auto rounded-md bg-[#212529] py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-50">
{optionChains?.map((chain) => (
<Listbox.Option
key={chain.name}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/send/components/WasmForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export const WasmForm: FC<WasmFormProps> = ({ confirmTx }) => {
setIsLoadingFee(true);

const loadFees = setTimeout(async () => {
await getFeeData();
await getFeeData().catch();
setIsLoadingFee(false);
}, 1000);

Expand Down Expand Up @@ -325,7 +325,7 @@ export const WasmForm: FC<WasmFormProps> = ({ confirmTx }) => {
)}

<Button
classname={`font-medium text-base bg-[#212529] hover:bg-${color}-primary transition-all w-full py-2 md:py-4 rounded-md mt-7`}
classname={`font-medium text-base bg-[#212529] hover:bg-${color}-primary transition-all w-full py-2 md:py-4 rounded-md mt-7 mx-0`}
isDisabled={!canContinue || !isEnoughToPay}
onClick={onSubmit}
style={{
Expand Down