Merge pull request #563 from cocrafts/dev

sync staging from dev: tezos assets, update point system, minor UI change, correct auth flow

apps/wallet/browser/kernel/utils/mockExtension.ts

@@ -11,7 +11,6 @@ export const mockLayoutCards: ExtensionDocument[] = [
 		storeMeta: {
 			iconUri: '/img/explore/logo-pixeverse.png',
 			iconSize: 40,
-			iconColor: '#ffffff',
 			coverUri: '/img/explore/thumbnail-pixeverse.png',
 			description:
 				'A hyper casual pixel-style game in which players step into the shoes of their ...',

apps/wallet/src/components/Logo.tsx

@@ -0,0 +1,95 @@
+import { type FC, useMemo } from 'react';
+import {
+	ClipPath,
+	Defs,
+	G,
+	LinearGradient,
+	Path,
+	Rect,
+	Stop,
+	Svg,
+} from 'react-native-svg';
+
+type Props = {
+	size?: number;
+};
+
+export const Logo: FC<Props> = ({ size = 118 }) => {
+	const width = size;
+	const height = (width * 62) / 118;
+	const id = useMemo(() => {
+		return Math.random();
+	}, []);
+
+	return (
+		<Svg width={width} height={height} viewBox="0 0 118 62" fill="none">
+			<G clipPath="url(#clip0_5230_9556)">
+				<Path
+					d="M51.0644 55.0649C47.8055 57.8308 46.3745 55.0649 46.3745 55.0649L38.4255 31.0542L32.5908 15.8607L27.7808 3.02468C27.0976 1.27051 25.4173 0.119629 23.5524 0.119629H2.87226C0.942725 0.119629 -0.386715 2.0687 0.314934 3.87856L20.5889 56.8748C21.6783 59.6963 22.3061 61.9424 27.4023 61.5618H45.7744C45.7744 61.5618 48.5533 61.172 49.3196 58.9909C50.5013 56.3272 51.0644 55.0649 51.0644 55.0649Z"
+					fill="#7667AE"
+				/>
+				<Path
+					d="M51.0644 55.0649C47.8055 57.8308 46.3745 55.0649 46.3745 55.0649L38.4255 31.0542L32.5908 15.8607L27.7808 3.02468C27.0976 1.27051 25.4173 0.119629 23.5524 0.119629H2.87226C0.942725 0.119629 -0.386715 2.0687 0.314934 3.87856L20.5889 56.8748C21.6783 59.6963 22.3061 61.9424 27.4023 61.5618H45.7744C45.7744 61.5618 48.5533 61.172 49.3196 58.9909C50.5013 56.3272 51.0644 55.0649 51.0644 55.0649Z"
+					fill={`url(#paint0_linear_5230_9556_${id})`}
+				/>
+				<Path
+					d="M114.99 0H94.3187C92.4446 0 90.7643 1.15088 90.0903 2.90505L84.9757 15.8525L82.1045 23.3332L78.4577 14.8965C77.673 13.0866 75.9004 11.9172 73.934 11.9172H47.3359L58.2669 36.5405L57.1959 36.7354C57.1959 36.7354 53.9462 39 53.6692 39.5662C53.4015 40.1231 52.7552 42.332 52.9122 43.0931C53.0784 43.8542 54.2693 46.1838 54.2693 46.1838L54.8602 46.5086C54.8602 46.5086 55.885 43.9841 58.7285 43.9841C59.3655 44.0305 61.3504 44.0212 62.5506 46.2116L62.9661 47.149L68.2192 58.9827C68.45 59.5303 68.7824 59.9851 69.244 60.3656C69.3086 60.4213 69.364 60.4584 69.4286 60.5141C69.4379 60.5141 69.4379 60.5234 69.4471 60.5234C70.0934 61.0246 70.6842 61.2659 71.072 61.3773C71.0812 61.3773 71.0997 61.3865 71.1089 61.3865C71.1458 61.3958 71.1643 61.4051 71.2012 61.4144C71.2382 61.4237 71.2751 61.4329 71.3028 61.4422C71.3305 61.4515 71.3582 61.4515 71.3766 61.4608C71.7921 61.5443 72.1798 61.5629 72.1798 61.5629H73.1585H73.1769C73.26 61.5629 73.3431 61.5629 73.4539 61.5629H90.1457H91.7614C93.7094 61.6186 95.3158 60.6255 96.0359 59.1683C96.1651 58.8992 96.3313 58.6021 96.4052 58.3144L98.7963 52.1238L117.547 3.75893C118.239 1.94907 116.919 0 114.99 0Z"
+					fill={`url(#paint1_linear_5230_9556_${id})`}
+				/>
+				<Path
+					d="M46.4047 55.0184C46.4047 55.0184 47.8357 57.7842 51.0946 55.0184L70.2515 11.8789H43.6627C41.6962 11.8789 39.9237 13.0484 39.1389 14.8582L35.4922 23.2949L46.4047 55.0184Z"
+					fill="#B0B0B0"
+				/>
+				<Path
+					d="M43.6322 11.9277C41.6658 11.9277 39.8932 13.0972 39.1084 14.907L26.7188 43.5306L23.1921 51.4754C22.749 52.2364 21.8811 52.5891 20.9764 52.5891C20.0716 52.5891 19.0468 52.1622 18.5391 51.4939L21.1518 58.3157C21.2256 58.6034 21.3918 58.9004 21.5211 59.1696C21.6411 59.4109 21.7888 59.6429 21.955 59.8564C21.955 59.8564 22.9982 61.6013 25.7217 61.6013C26.9404 61.5827 30.1994 61.5827 30.1994 61.5827L30.1532 61.5549H44.0754C44.1862 61.5549 44.2693 61.5549 44.3523 61.5549H44.3708H44.8047C45.0725 61.5827 46.328 61.6755 47.1128 61.165C47.4728 60.9794 48.8392 60.7103 49.5686 58.4085L70.2118 11.9092H43.6322V11.9277Z"
+					fill={`url(#paint2_linear_5230_9556_${id})`}
+				/>
+			</G>
+			<Defs>
+				<LinearGradient
+					id={`paint0_linear_5230_9556_${id}`}
+					x1="16.9936"
+					y1="22.7641"
+					x2="44.7031"
+					y2="56.9768"
+					gradientUnits="userSpaceOnUse"
+				>
+					<Stop stopColor="#19A3E1" />
+					<Stop offset="1" stopColor="#003393" />
+				</LinearGradient>
+				<LinearGradient
+					id={`paint1_linear_5230_9556_${id}`}
+					x1="112.406"
+					y1="18.5246"
+					x2="45.1108"
+					y2="38.3967"
+					gradientUnits="userSpaceOnUse"
+				>
+					<Stop stopColor="#19A3E1" />
+					<Stop offset="1" stopColor="#0A5AA2" />
+				</LinearGradient>
+				<LinearGradient
+					id={`paint2_linear_5230_9556_${id}`}
+					x1="53.8269"
+					y1="12.0535"
+					x2="37.6778"
+					y2="67.3536"
+					gradientUnits="userSpaceOnUse"
+				>
+					<Stop stopColor="#8FC5BE" />
+					<Stop offset="1" stopColor="#1BA0DA" />
+				</LinearGradient>
+				<ClipPath id="clip0_5230_9556">
+					<Rect
+						width="117.6"
+						height="61.6"
+						fill="white"
+						transform="translate(0.132812)"
+					/>
+				</ClipPath>
+			</Defs>
+		</Svg>
+	);
+};
+
+export default Logo;

apps/wallet/src/engine/runners/solana/index.ts

@@ -16,8 +16,8 @@ import { getParsedTokenAccountsByOwner, queryTokens } from './tokens';
 import type { SolanaContext } from './types';
 
 const endpointUrl: Record<string, string> = {
-	devnet: clusterApiUrl('devnet'),
-	testnet: clusterApiUrl('testnet'),
+	devnet: environment.SOLANA_CLUSTER_URL || clusterApiUrl('devnet'),
+	testnet: environment.SOLANA_CLUSTER_URL || clusterApiUrl('testnet'),
 	mainnet: environment.SOLANA_CLUSTER_URL,
 };
 

apps/wallet/src/engine/runners/tezos/index.ts

@@ -1,16 +1,95 @@
+import type { TezosToolkit } from '@taquito/taquito';
+import type { TezosToken } from '@walless/core';
+import { Networks } from '@walless/core';
+import type { PublicKeyDocument, TokenDocument } from '@walless/store';
+import { selectors } from '@walless/store';
+import { getTokenQuote } from 'utils/api';
+import { addTokenToStorage, storage } from 'utils/storage';
+
 import type { EngineConfig, Runner } from '../../types';
 
+import { constructTezosTokenDocument, XTZ } from './token';
+import { convertTezosImageUriToUrl, createContext } from './utils';
+
 export type TezosContext = {
-	connection: unknown;
+	connection: TezosToolkit;
+	tzktApi: string;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const createTezosRunner = (config: EngineConfig): Runner => {
+export const createTezosRunner = async (
+	config: EngineConfig,
+): Promise<Runner> => {
+	const { networkClusters } = config;
+	const cluster = networkClusters[Networks.tezos];
+	const { connection, tzktApi } = createContext(config);
+
+	const keysResult = await storage.find<PublicKeyDocument>(selectors.tezosKeys);
+	const keys = keysResult.docs;
+
 	return {
-		start() {},
+		async start() {
+			const tokensPromises = keys.map(async (key) => {
+				const owner = key._id;
+				const tzBalance = await connection.tz.getBalance(owner);
+
+				const tokenBalances = await fetch(
+					`${tzktApi}/tokens/balances?account=${owner}`,
+				);
+				const tokenBalancesJson = await tokenBalances.json();
+
+				const tzDocument = constructTezosTokenDocument({
+					...XTZ,
+					owner: key._id,
+					cluster,
+					amount: tzBalance.toString(),
+					balance: parseFloat(tzBalance.toString()) / 10 ** XTZ.decimals,
+				} as TezosToken);
+
+				const responseQuotes = await getTokenQuote({
+					address: `${tzDocument.contract?.address}`,
+					network: tzDocument.network,
+				});
+				tzDocument.quotes = responseQuotes?.quotes;
+
+				await addTokenToStorage<TokenDocument<TezosToken>>(tzDocument);
+
+				for (const tokenBalance of tokenBalancesJson) {
+					const tokenDocument = constructTezosTokenDocument({
+						owner: key._id,
+						network: Networks.tezos,
+						cluster,
+						tokenId: tokenBalance.token.tokenId,
+						contract: tokenBalance.token.contract,
+						tokenType: tokenBalance.token.standard,
+						decimals: tokenBalance.token.metadata.decimals,
+						symbol: tokenBalance.token.metadata.symbol,
+						name: tokenBalance.token.metadata.name,
+						amount: tokenBalance.balance,
+						balance:
+							parseFloat(tokenBalance.balance) /
+							10 ** tokenBalance.token.metadata.decimals,
+						image: convertTezosImageUriToUrl(
+							tokenBalance.token.metadata.thumbnailUri,
+						),
+					} as TezosToken);
+
+					const responseQuotes = await getTokenQuote({
+						address: `${tokenDocument.contract?.address}`,
+						network: tokenDocument.network,
+					});
+					tokenDocument.quotes = responseQuotes?.quotes;
+
+					await addTokenToStorage<TokenDocument<TezosToken>>(tokenDocument);
+				}
+
+				return tzBalance;
+			});
+			await Promise.all(tokensPromises).catch(console.error);
+		},
 		stop() {},
 		getContext: (): TezosContext => {
-			return {} as TezosContext;
+			return { connection, tzktApi } as TezosContext;
 		},
 		restart: () => {},
 	};

apps/wallet/src/engine/runners/tezos/token.ts

@@ -0,0 +1,51 @@
+import type { TezosToken } from '@walless/core';
+import { NetworkClusters, Networks, TezosTokenTypes } from '@walless/core';
+import type { TokenDocument } from '@walless/store';
+
+import { convertTezosImageUriToUrl } from './utils';
+
+export const constructTezosTokenDocument = (
+	token: TezosToken,
+): TokenDocument<TezosToken> => {
+	let image = convertTezosImageUriToUrl(token.image);
+	if (token.symbol === 'tzBTC') {
+		image = 'https://tzbtc.io/wp-content/uploads/2020/03/tzbtc_logo_single.svg';
+	}
+
+	const tokenDocument = {
+		_id: `${token.owner}/token/${token.contract.address}/${token.tokenId}`,
+		type: 'Token',
+		network: Networks.tezos,
+		cluster: token.cluster,
+		owner: token.owner,
+		balance: token.balance,
+		amount: token.amount,
+		decimals: token.decimals,
+		symbol: token.symbol,
+		name: token.name,
+		image: image,
+		contract: token.contract,
+		tokenType: token.tokenType,
+		tokenId: token.tokenId,
+	} as TokenDocument<TezosToken>;
+
+	return tokenDocument;
+};
+
+export const XTZ = {
+	tokenId: '0',
+	network: Networks.tezos,
+	owner: '',
+	cluster: NetworkClusters.mainnet,
+	balance: 0,
+	amount: '0',
+	decimals: 6,
+	symbol: 'XTZ',
+	name: 'XTZ',
+	image: 'https://s2.coinmarketcap.com/static/img/coins/200x200/2011.png',
+	contract: {
+		address: 'KT1VYsVfmobT7rsMVivvZ4J8i3bPiqz12NaH',
+		alias: 'XTZ',
+	},
+	tokenType: TezosTokenTypes.FA12,
+};

apps/wallet/src/engine/runners/tezos/utils.ts

@@ -0,0 +1,27 @@
+import { TezosToolkit } from '@taquito/taquito';
+import { Networks } from '@walless/core';
+import type { EngineConfig } from 'engine/types';
+
+const MAIN_NET = 'https://api.tez.ie/rpc/mainnet';
+const GHOST_NET = 'https://ghostnet.ecadinfra.com';
+
+const TZKT_API_MAINNET = 'https://api.tzkt.io/v1';
+const TZKT_API_GHOSTNET = 'https://api.ghostnet.tzkt.io/v1';
+
+export const createContext = (config: EngineConfig) => {
+	const { networkClusters } = config;
+	const cluster = networkClusters[Networks.tezos];
+	const rpc = cluster === 'mainnet' ? MAIN_NET : GHOST_NET;
+
+	const connection = new TezosToolkit(rpc);
+	const tzktApi = cluster === 'mainnet' ? TZKT_API_MAINNET : TZKT_API_GHOSTNET;
+	return { connection, tzktApi };
+};
+
+export const convertTezosImageUriToUrl = (uri: string) => {
+	if (!uri) return '';
+	if (!uri.startsWith('ipfs://')) return uri;
+	const path = uri.replaceAll('ipfs://', '');
+
+	return `https://ipfs.io/ipfs/${path}`;
+};

apps/wallet/src/features/Explorer/Header.tsx

@@ -15,21 +15,17 @@ const Header = () => {
 	const handleNavigateToSettings = () => {
 		navigate('Dashboard', {
 			screen: 'Explore',
-			params: {
-				screen: 'Widget',
-				params: {
-					screen: 'Setting',
-				},
-			},
+			params: { screen: 'Profile', params: { screen: 'Setting' } },
 		});
 	};
 
 	return (
 		<View style={styles.container}>
 			<View style={styles.balanceContainer}>
-				<Text style={styles.helloText}>Hi👋, your balance today:</Text>
+				<Text style={styles.helloText}>Hi 👋, your balance today:</Text>
 				<View style={styles.tokenValuationContainer}>
 					<Hoverable
+						style={!config.hideBalance && styles.eyeOffIcon}
 						onPress={() => {
 							setPrivacy(!config.hideBalance);
 						}}
@@ -40,7 +36,12 @@ const Header = () => {
 							<EyeOff color="#19A3E1" size={16} />
 						)}
 					</Hoverable>
-					<Text style={styles.tokenValuation}>
+					<Text
+						style={[
+							styles.tokenValuation,
+							config.hideBalance && styles.hiddenTokenValuation,
+						]}
+					>
 						{getValuationDisplay(valuation, config.hideBalance)}
 					</Text>
 				</View>
@@ -76,11 +77,18 @@ const styles = StyleSheet.create({
 	balanceContainer: {
 		gap: 4,
 	},
+	eyeOffIcon: {
+		top: 1,
+	},
 	tokenValuationContainer: {
 		flexDirection: 'row',
 		alignItems: 'center',
 		gap: 4,
 	},
+	hiddenTokenValuation: {
+		lineHeight: 21.5,
+		fontSize: 12,
+	},
 	tokenValuation: {
 		fontSize: 18,
 		color: '#ffffff',

apps/wallet/src/features/Explorer/Highlights/HighlightItem.tsx

@@ -36,10 +36,7 @@ const HighlightItem: FC<HighlightItemProps> = ({ animation, widget }) => {
 			screen: 'Explore',
 			params: {
 				screen: 'Widget',
-				params: {
-					screen: 'Default',
-					params: { id },
-				},
+				params: { id },
 			},
 		});
 	};

apps/wallet/src/features/Loyalty/internal.tsx

@@ -141,7 +141,8 @@ export const navigateInternalByCta = (cta: string) => {
 				params: {
 					screen: 'Widget',
 					params: {
-						id: 'pixeverse',
+						screen: 'Default',
+						params: { id: 'pixeverse' },
 					},
 				},
 			});
@@ -160,7 +161,8 @@ export const navigateInternalByCta = (cta: string) => {
 				params: {
 					screen: 'Widget',
 					params: {
-						id: 'solana',
+						screen: 'Default',
+						params: { id: 'solana' },
 					},
 				},
 			});

apps/wallet/src/features/Send/ConfirmByPasscode/Processing.tsx

@@ -1,11 +1,14 @@
 import { ActivityIndicator, StyleSheet } from 'react-native';
 import { Text, View } from '@walless/gui';
 
+import { SolanaShareButton } from '../TransactionResult/ShareButton';
+
 export const Processing = () => {
 	return (
 		<View style={styles.container}>
 			<ActivityIndicator />
 			<Text>Processing...</Text>
+			<SolanaShareButton />
 		</View>
 	);
 };