Skip to content

Commit

Permalink
feature(ui-ux): enable transfer domain (#4032)
Browse files Browse the repository at this point in the history
* fix(ui-ux): filter out LP tokens in EVM domain

* fix(ui-ux): UI labels for address types

* fix(ui-ux): sendconfirmationscreen evm bg for addresses

* fix(ui-ux): hide any address labels if there are error messages

* remove unused comment

* fix lint

* fix(ui-ux): to display address label even with err msg

* fix(ui-ux): labelled address

* fix(ui-ux): cater for selected whitelisted evm addr

* feat(e2e): add tests

* fix: lint for AddressRow

* feat: enable transfer domain

* fix(ui-ux): update UI for convert confirmation screen

* fix(e2e): network details

* Revert "fix(e2e): network details"

This reverts commit c29aef8.

* fix(ui-ux): update isEVMDomain flag

* fix(ui-ux): remove LP filter

* fix(lint): add empty data for evmtx

---------

Co-authored-by: Lyka Labrada <[email protected]>
  • Loading branch information
chloezxyy and lykalabrada authored Oct 3, 2023
1 parent a150b13 commit 31cd4ab
Show file tree
Hide file tree
Showing 19 changed files with 952 additions and 441 deletions.
7 changes: 3 additions & 4 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ services:
- "/var/run/docker.sock:/var/run/docker.sock:ro"

defi-blockchain:
image: defi/defichain:master-91a01aea0
image: defi/defichain:master-b352814976
command: >
defid
-printtoconsole
Expand Down Expand Up @@ -55,10 +55,9 @@ services:
-grandcentralheight=16
-grandcentralepilogueheight=17
-nextnetworkupgradeheight=18
-changiintermediateheight=19
defi-playground:
image: ghcr.io/birthdayresearch/playground-api:3.34.0
image: ghcr.io/birthdayresearch/playground-api:4.0.0-rc.1.2
depends_on:
- defi-blockchain
ports:
Expand All @@ -71,7 +70,7 @@ services:
- "traefik.http.routers.playground.entrypoints=web"

defi-whale:
image: ghcr.io/birthdayresearch/whale-api:3.34.0
image: ghcr.io/birthdayresearch/whale-api:4.0.0-rc.1.2
depends_on:
- defi-blockchain
ports:
Expand Down
13 changes: 11 additions & 2 deletions mobile-app/app/api/transaction/transfer_domain.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,18 +48,20 @@ export async function transferDomainSigner(
src: {
address: sourceScript,
amount: {
token: Number(sourceTokenId),
token: stripEvmSuffixFromTokenId(sourceTokenId),
amount,
},
domain: srcDomain,
data: new Uint8Array([]),
},
dst: {
address: dstScript,
amount: {
token: Number(targetTokenId),
token: stripEvmSuffixFromTokenId(targetTokenId),
amount,
},
domain: dstDomain,
data: new Uint8Array([]),
},
},
],
Expand Down Expand Up @@ -139,3 +141,10 @@ export function transferDomainCrafter(
: undefined,
};
}

function stripEvmSuffixFromTokenId(tokenId: string) {
if (tokenId.includes("-EVM")) {
return Number(tokenId.replace("-EVM", ""));
}
return Number(tokenId);
}
106 changes: 76 additions & 30 deletions mobile-app/app/components/SummaryTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import { getNativeIcon } from "@components/icons/assets";
import { translate } from "@translations";
import { RandomAvatar } from "@screens/AppNavigator/screens/Portfolio/components/RandomAvatar";
import { AddressType } from "@waveshq/walletkit-ui/dist/store";
import { LocalAddress, WhitelistedAddress } from "@store/userPreferences";
import { DomainType } from "@contexts/DomainContext";
import { LinearGradient } from "expo-linear-gradient";
import { View } from ".";
import { ThemedTextV2, ThemedViewV2 } from "./themed";
import { EVMLinearGradient } from "./EVMLinearGradient";
Expand All @@ -22,6 +25,7 @@ interface ISummaryTitleProps {
iconB?: string;
addressType?: AddressType;
amountTextStyle?: string;
matchedAddress?: LocalAddress | WhitelistedAddress;
isEvmToken?: boolean;
}

Expand Down Expand Up @@ -123,39 +127,81 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
>
{props.customToAddressTitle ?? translate("screens/common", "To")}
</ThemedTextV2>
<ThemedViewV2
dark={tailwind("bg-mono-dark-v2-200")}
light={tailwind("bg-mono-light-v2-200")}
style={tailwind(
"flex flex-row items-center overflow-hidden rounded-full pr-2.5 py-1 ml-2",
{
"pl-1": props.addressType === AddressType.WalletAddress,
"pl-2.5": props.addressType !== AddressType.WalletAddress,
},
)}
>
{props.addressType === AddressType.WalletAddress && (
<View style={tailwind("mr-1")}>
<RandomAvatar name={props.toAddress} size={20} />
</View>
)}
<ThemedTextV2
ellipsizeMode="middle"
numberOfLines={1}
style={[
tailwind("text-sm font-normal-v2"),
{/* TODO @chloe cater for selection of evm addr from addr pair */}
{(props.matchedAddress as WhitelistedAddress)?.addressDomainType ===
DomainType.EVM ? (
<LinearGradient
colors={["#42F9C2", "#3B57CF"]}
start={[0, 0]}
end={[1, 1]}
style={tailwind(
"flex flex-row items-center overflow-hidden rounded-full pr-2.5 py-1 ml-2",
{
minWidth: 10,
maxWidth: 108,
"pl-1": props.addressType === AddressType.WalletAddress,
"pl-2.5": props.addressType !== AddressType.WalletAddress,
},
]}
testID="summary_to_value"
)}
testID="to_address_label_evm_tag"
>
{props.toAddressLabel != null && props.toAddressLabel.length > 0
? props.toAddressLabel
: props.toAddress}
</ThemedTextV2>
</ThemedViewV2>
{props.addressType === AddressType.WalletAddress && (
<View style={tailwind("mr-1")}>
<RandomAvatar name={props.toAddress} size={20} />
</View>
)}
<ThemedTextV2
ellipsizeMode="middle"
numberOfLines={1}
style={[
tailwind("text-sm font-normal-v2"),
{
minWidth: 10,
maxWidth: 108,
},
]}
testID="summary_to_value"
>
{props.toAddressLabel != null &&
props.toAddressLabel.length > 0
? props.toAddressLabel
: props.toAddress}
</ThemedTextV2>
</LinearGradient>
) : (
<ThemedViewV2
dark={tailwind("bg-mono-dark-v2-200")}
light={tailwind("bg-mono-light-v2-200")}
style={tailwind(
"flex flex-row items-center overflow-hidden rounded-full pr-2.5 py-1 ml-2",
{
"pl-1": props.addressType === AddressType.WalletAddress,
"pl-2.5": props.addressType !== AddressType.WalletAddress,
},
)}
>
{props.addressType === AddressType.WalletAddress && (
<View style={tailwind("mr-1")}>
<RandomAvatar name={props.toAddress} size={20} />
</View>
)}
<ThemedTextV2
ellipsizeMode="middle"
numberOfLines={1}
style={[
tailwind("text-sm font-normal-v2"),
{
minWidth: 10,
maxWidth: 108,
},
]}
testID="summary_to_value"
>
{props.toAddressLabel != null &&
props.toAddressLabel.length > 0
? props.toAddressLabel
: props.toAddress}
</ThemedTextV2>
</ThemedViewV2>
)}
</View>
)}
</View>
Expand Down
3 changes: 1 addition & 2 deletions mobile-app/app/hooks/useWalletAddress.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ export function useWalletAddress(): {
for (let i = 0; i <= addressLength; i++) {
const account = wallet.get(i);
const dvm = await account.getAddress();
// TODO (Harsh) replace it with getEvmAddress
const evm = "evmaddress"; // await account.getEvmAddress();
const evm = await account.getEvmAddress();
addresses.push({ dvm, evm });
}
return addresses;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { BarCodeScanner } from "@components/BarCodeScanner";
import { HeaderTitle } from "@components/HeaderTitle";
import { tailwind } from "@tailwind";
import { translate } from "@translations";
import { WhitelistedAddress } from "@store/userPreferences";
import { LocalAddress, WhitelistedAddress } from "@store/userPreferences";
import { FutureSwapData } from "@store/futureSwap";
import { TransactionsScreen } from "@screens/AppNavigator/screens/Transactions/TransactionsScreen";
import { TransactionDetailScreen } from "@screens/AppNavigator/screens/Transactions/screens/TransactionDetailScreen";
Expand Down Expand Up @@ -78,6 +78,7 @@ export interface PortfolioParamList {
toAddressLabel?: string;
addressType?: AddressType;
originScreen?: ScreenName;
matchedAddress?: WhitelistedAddress | LocalAddress;
};
TokenDetailScreen: { token: WalletToken };
ConvertScreen: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -367,13 +367,18 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {

return filteredTokens.sort(sortTokensFunc);
},
[filteredTokens, assetSortType, denominationCurrency],
[domain, filteredTokens, assetSortType, denominationCurrency],
);

useEffect(() => {
setAssetSortType(PortfolioSortType.HighestDenominationValue); // reset sorting state upon denominationCurrency change
}, [denominationCurrency]);

// Reset button group in EVM domain
useEffect(() => {
setActiveButtonGroup(ButtonGroupTabKey.AllTokens);
}, [domain]);

// token tab items
const [activeButtonGroup, setActiveButtonGroup] = useState<ButtonGroupTabKey>(
ButtonGroupTabKey.AllTokens,
Expand Down
Loading

0 comments on commit 31cd4ab

Please sign in to comment.