Merge pull request #591 from cocrafts/staging

[wallet] feat: release point system, new explorer, minor UI changes

.github/workflows/cd-deploy.yml

@@ -2,7 +2,7 @@ name: CD Deploy
 on:
   workflow_dispatch:
   push:
-    branches: 
+    branches:
       - "main"
       - "staging"
       - "dev"
@@ -29,26 +29,31 @@ jobs:
 
       - name: Install @metacraft/cli
         run: npm i --location=global @metacraft/cli@latest
-      
+
       - name: Setup Yarn
         run: corepack enable && yarn set version stable
 
       - name: Install dependencies
         run: yarn
 
-      - name: Check wallet build
-        run: cd apps/wallet && yarn build:web && ls -a
-
       - name: Execute eslint
         run: yarn lint
 
+      - name: Execute type check with tsc
+        run: yarn type-check
+
+      - name: Create .env.test file for testing
+        run: |
+          touch .env.test
+          echo "${{ secrets.WALLET_TEST_ENV_FILE }}" >> apps/wallet/.env.test
+
       - name: Run test cases
         run: yarn test
 
       - name: Set branch name
         id: branch
         run: echo "::set-output name=BRANCH_NAME::${GITHUB_REF##*/}"
-      
+
       - name: Inspect stacks from commit message
         id: inspect_stacks_from_commit_message
         run: |

.github/workflows/pull-request.yml

@@ -28,17 +28,25 @@ jobs:
         run: npm i --location=global @metacraft/cli@latest
 
       - name: Install yarn cli
-        run:  corepack enable && corepack prepare yarn@4.1.1 --activate
+        run: corepack enable && corepack prepare yarn@4.1.1 --activate
 
       - name: Set yarn version
-        run:  yarn set version 4.1.1
+        run: yarn set version 4.1.1
 
       - name: Install dependencies
         run: yarn
 
       - name: Execute eslint
         run: yarn lint
 
+      - name: Execute type check with tsc
+        run: yarn type-check
+
+      - name: Create .env.test file for testing
+        run: |
+          touch .env.test
+          echo "${{ secrets.WALLET_TEST_ENV_FILE }}" >> apps/wallet/.env.test
+
       - name: Run test cases
         run: yarn test
 

.gitignore

@@ -1,4 +1,5 @@
 .idea
+.docker
 
 # automations
 .sst
@@ -52,6 +53,7 @@ yarn-error.log*
 .env
 .env.test
 .env.development
+.env.staging
 .env.production
 
 # configs

apps/landing/components/layouts/Home/Navigation/LauchingOption.tsx

@@ -0,0 +1,86 @@
+import type { FC, ReactNode } from 'react';
+import { useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { Anchor, Text } from '@walless/gui';
+
+interface LauchingOptionProps {
+	icon: ReactNode;
+	title: string;
+	activeIcon: ReactNode;
+	onPress?: () => void;
+	url?: string;
+	isDisabled?: boolean;
+}
+
+const LaunchingOption: FC<LauchingOptionProps> = ({
+	icon,
+	activeIcon,
+	title,
+	onPress,
+	url,
+	isDisabled = false,
+}) => {
+	const [isHovered, setIsHovered] = useState(false);
+
+	const handleHoverIn = () => {
+		setIsHovered(true);
+	};
+
+	const handleHoverOut = () => {
+		setIsHovered(false);
+	};
+
+	return (
+		<Anchor
+			onHoverIn={handleHoverIn}
+			onHoverOut={handleHoverOut}
+			href={url as string}
+			hoverOpacity={1}
+			disabled={isDisabled}
+		>
+			<TouchableOpacity
+				style={[
+					styles.container,
+					isHovered && !isDisabled && styles.hoveredContainerStyle,
+				]}
+				onPress={onPress}
+				disabled={isDisabled}
+			>
+				{isHovered && !isDisabled ? activeIcon : icon}
+				<Text
+					style={[
+						styles.title,
+						isHovered && !isDisabled && styles.hoveredTextStyle,
+					]}
+				>
+					{title}
+				</Text>
+			</TouchableOpacity>
+		</Anchor>
+	);
+};
+
+export default LaunchingOption;
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		padding: 8,
+		borderRadius: 8,
+		gap: 8,
+		width: 186,
+		paddingVertical: 8,
+		paddingHorizontal: 8,
+		borderWidth: 1,
+		borderColor: 'transparent',
+	},
+	title: {
+		color: '#ffffff',
+	},
+	hoveredContainerStyle: {
+		backgroundColor: '#202D38',
+		borderColor: '#000000',
+	},
+	hoveredTextStyle: { fontWeight: '500' },
+});

apps/landing/components/layouts/Home/Navigation/LaunchingModal.tsx

@@ -0,0 +1,56 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Button } from '@walless/gui';
+import { Phone, PlainWalless, Puzzle, Walless } from '@walless/icons';
+
+import LaunchingOption from './LauchingOption';
+
+const LaunchingModal = () => {
+	return (
+		<View>
+			<Button title="Access Walless" style={styles.button} />
+			<View style={styles.container}>
+				<LaunchingOption
+					icon={<PlainWalless color="#A4B3C1" />}
+					title="Launch web app"
+					activeIcon={<Walless />}
+					url="https://app.walless.io/auth/invitation"
+				/>
+				<View style={styles.line} />
+				<LaunchingOption
+					icon={<Puzzle color="#A4B3C1" />}
+					title="Add extension"
+					activeIcon={<Puzzle color="#19A3E1" />}
+					url="https://chromewebstore.google.com/detail/walless/jfmajkmgjpjognffefopllhaijknhnmm"
+				/>
+				<LaunchingOption
+					icon={<Phone color="#A4B3C1" />}
+					title="Mobile (coming soon)"
+					isDisabled={true}
+					activeIcon={<Phone color="#19A3E1" />}
+				/>
+			</View>
+		</View>
+	);
+};
+
+export default LaunchingModal;
+
+const styles = StyleSheet.create({
+	container: {
+		backgroundColor: '#19232C',
+		borderRadius: 16,
+		paddingVertical: 12,
+		paddingHorizontal: 16,
+		gap: 8,
+	},
+	button: {
+		marginHorizontal: 8,
+		alignSelf: 'flex-start',
+	},
+	line: {
+		backgroundColor: '#ffffff',
+		height: 1,
+		opacity: 0.1,
+	},
+});

apps/landing/components/layouts/Home/Navigation/NavigationItem.tsx

@@ -1,4 +1,4 @@
-import { type FC } from 'react';
+import type { FC } from 'react';
 import { StyleSheet } from 'react-native';
 import { Text, View } from '@walless/gui';
 import Link from 'next/link';

apps/landing/components/layouts/Home/Navigation/index.tsx

@@ -1,20 +1,39 @@
 import type { FC } from 'react';
+import { useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { useMedia } from '@tamagui/core';
-import { Anchor, View } from '@walless/gui';
+import {
+	AnimateDirections,
+	BindDirections,
+	modalActions,
+	View,
+} from '@walless/gui';
+import { View } from '@walless/gui';
 import { Button } from '@walless/ui';
 import { ContainerStack } from 'components/styled';
 import { useRouter } from 'next/router';
 
 import HomeButton from './HomeButton';
+import LaunchingModal from './LaunchingModal';
 import { NavigationItem } from './NavigationItem';
 import { navigationHeight, navigationItems } from './shared';
 
 export const HomeNavigation: FC = () => {
 	const router = useRouter();
 	const media = useMedia();
+	const modalRef = useRef(null);
 
 	const temporarilyDisabled = false;
+	const handleShowLaunchingModal = () => {
+		modalActions.show({
+			id: 'launching',
+			fullWidth: false,
+			bindingRef: modalRef,
+			bindingDirection: BindDirections.InnerTopLeft,
+			animateDirection: AnimateDirections.Inner,
+			component: LaunchingModal,
+		});
+	};
 
 	return (
 		<View style={styles.container}>
@@ -34,9 +53,13 @@ export const HomeNavigation: FC = () => {
 						})}
 				</View>
 
-				<Anchor href="https://app.walless.io" target="_blank">
-					<Button title="Launch Walless" marginHorizontal={8} />
-				</Anchor>
+				<View ref={modalRef}>
+					<Button
+						title="Access Walless"
+						marginHorizontal={8}
+						onPress={handleShowLaunchingModal}
+					/>
+				</View>
 			</ContainerStack>
 		</View>
 	);

apps/wallet/babel.config.js

@@ -23,6 +23,7 @@ module.exports = {
 					buffer: '@craftzdog/react-native-buffer',
 					bip39: '@dreson4/react-native-quick-bip39',
 					'pouchdb-collate': '@craftzdog/pouchdb-collate-react-native',
+					'arbundles/web': 'arbundles',
 				},
 			},
 		],

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/jest.config.js

@@ -13,4 +13,5 @@ module.exports = {
 		'@solana/codecs-strings': require.resolve('@solana/codecs-strings'),
 		'@solana/options': require.resolve('@solana/options'),
 	},
+	setupFiles: ['./testSetup.js'],
 };

apps/wallet/metacraft.config.js

@@ -32,6 +32,7 @@ module.exports = {
 			'react-native-webview': 'vendor/web-webview',
 			'react-native-keychain': 'vendor/web-keychain',
 			'react-native-haptic-feedback': 'vendor/web-haptic',
+			'react-native-linear-gradient': 'react-native-web-linear-gradient',
 		},
 	},
 };

apps/wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@walless/wallet",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "dev": "metacraft",
@@ -18,13 +18,15 @@
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit",
     "start": "react-native start",
     "postinstall": "rm -rf node_modules/superstruct",
     "test": "jest --passWithNoTests"
   },
   "dependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@coral-xyz/anchor": "^0.29.0",
+    "@coral-xyz/borsh": "^0.30.0",
     "@craftzdog/pouchdb-collate-react-native": "^7.3.0",
     "@craftzdog/react-native-buffer": "^6.0.5",
     "@dreson4/react-native-quick-bip39": "0.0.5",
@@ -46,7 +48,7 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
     "@solana/spl-token": "0.3.7",
-    "@solana/web3.js": "1.78.4",
+    "@solana/web3.js": "1.92.3",
     "@taquito/signer": "^17.5.2",
     "@taquito/taquito": "^17.5.2",
     "@taquito/tzip12": "^16.2.0",
@@ -104,13 +106,16 @@
     "react-native-svg": "13.10.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-vision-camera": "^3.9.0",
+    "react-native-web-linear-gradient": "^1.1.2",
     "react-native-webview": "13.6.3",
     "use-debounce": "^10.0.0"
   },
   "devDependencies": {
+    "@types/color": "^3.0.6",
     "@types/jest": "^29.2.1",
     "@types/pouchdb-adapter-memory": "^6.1.6",
     "@types/react": "^18.2.25",
+    "@types/react-native-linear-gradient": "^2.4.0",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",

apps/wallet/src/components/CheckedInput.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { InputProps } from '@walless/gui';
+import { Text } from '@walless/gui';
 import { Input } from '@walless/gui';
 
 type Props = {

apps/wallet/src/components/DrawerNavigation/views/DrawerItem.tsx

@@ -1,9 +1,10 @@
 import type { ComponentProps, ReactNode } from 'react';
 import { Fragment } from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { PlatformPressable } from '@react-navigation/elements';
 import { Link, useTheme } from '@react-navigation/native';
+import { Text } from '@walless/gui';
 import Color from 'color';
 
 type Props = {