Fix/example1 (#556)

* feat: support blur resource (#550)

* fix: example

* feat: add btc params

* chore: update blur screent example

* chore: fix lint

* chore: release 1.1.11-alpha.2

Author: ByteZhang1024

packages/connect-examples/electron-example/package.json

@@ -2,7 +2,7 @@
   "name": "hardware-example",
   "productName": "HardwareExample",
   "executableName": "onekey-hardware-example",
-  "version": "1.1.11",
+  "version": "1.1.12-alpha.0",
   "author": "OneKey",
   "description": "End-to-end encrypted workspaces for teams",
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
     "ts:check": "yarn tsc --noEmit"
   },
   "dependencies": {
-    "@onekeyfe/hd-transport-electron": "1.1.11",
+    "@onekeyfe/hd-transport-electron": "1.1.12-alpha.0",
     "@stoprocent/noble": "2.3.4",
     "debug": "4.3.4",
     "electron-is-dev": "^3.0.1",

packages/connect-examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "1.1.11",
+  "version": "1.1.12-alpha.0",
   "scripts": {
     "start": "cross-env CONNECT_SRC=https://localhost:8087/ yarn expo start --dev-client",
     "android": "yarn expo run:android",
@@ -19,10 +19,10 @@
     "@noble/ed25519": "^2.1.0",
     "@noble/hashes": "^1.3.3",
     "@noble/secp256k1": "^1.7.1",
-    "@onekeyfe/hd-ble-sdk": "1.1.11",
-    "@onekeyfe/hd-common-connect-sdk": "1.1.11",
-    "@onekeyfe/hd-core": "1.1.11",
-    "@onekeyfe/hd-web-sdk": "1.1.11",
+    "@onekeyfe/hd-ble-sdk": "1.1.12-alpha.0",
+    "@onekeyfe/hd-common-connect-sdk": "1.1.12-alpha.0",
+    "@onekeyfe/hd-core": "1.1.12-alpha.0",
+    "@onekeyfe/hd-web-sdk": "1.1.12-alpha.0",
     "@onekeyfe/react-native-ble-utils": "^0.1.3",
     "@polkadot/util-crypto": "13.1.1",
     "@react-native-async-storage/async-storage": "1.21.0",
@@ -77,6 +77,7 @@
     "react-native-web": "~0.19.10",
     "ripple-keypairs": "^1.1.4",
     "rlp": "^3.0.0",
+    "stackblur-canvas": "^2.7.0",
     "stream-browserify": "^3.0.0",
     "tamagui": "^1.90.2",
     "text-encoding": "^0.7.0",

packages/connect-examples/expo-example/src/components/UploadScreen/index.tsx

@@ -2,16 +2,21 @@ import { Buffer } from 'buffer';
 import React, { useState, useEffect, useContext } from 'react';
 
 import { bytesToHex } from '@noble/hashes/utils';
-import { Picker } from '@react-native-picker/picker';
 import * as ImagePicker from 'expo-image-picker';
 import { Action, manipulateAsync, SaveFormat } from 'expo-image-manipulator';
 
 import { DeviceUploadResourceParams, getHomeScreenSize, getDeviceType } from '@onekeyfe/hd-core';
 import { ResourceType } from '@onekeyfe/hd-transport';
-import { Image, Label, Stack, View, XStack } from 'tamagui';
+import { Image as ImageView, Label, Stack, View, XStack } from 'tamagui';
 import { Platform } from 'react-native';
 import { useIntl } from 'react-intl';
-import { getImageSize, imageToBase64, formatBytes, generateUploadNFTParams } from './nftUtils';
+import {
+  getImageSize,
+  imageToBase64,
+  formatBytes,
+  generateUploadNFTParams,
+  processImageBlur,
+} from './nftUtils';
 import HardwareSDKContext from '../../provider/HardwareSDKContext';
 import { useCommonParams } from '../../provider/CommonParamsProvider';
 import { useDevice } from '../../provider/DeviceProvider';
@@ -24,6 +29,8 @@ interface UploadResourceParams {
   resType?: number;
   nftMetaData?: string;
   fileNameNoExt?: string;
+  blurRadius?: number;
+  blurOverlayOpacity?: number;
 }
 
 function getUrlExtension(url: string) {
@@ -39,6 +46,8 @@ export const generateUploadResParams = async ({
   height,
   homeScreenSize,
   homeScreenThumbnailSize,
+  blurRadius,
+  blurOverlayOpacity,
   cb,
 }: {
   uri: string;
@@ -52,6 +61,8 @@ export const generateUploadResParams = async ({
     width: number;
     height: number;
   };
+  blurRadius?: number;
+  blurOverlayOpacity?: number;
   cb?: (data: { base64?: string }) => void;
 }) => {
   const data = await compressHomescreen(
@@ -69,6 +80,12 @@ export const generateUploadResParams = async ({
     height
   );
 
+  const blurData = await processImageBlur({
+    base64Data: data?.base64 ?? '',
+    blurRadius: blurRadius ?? 100,
+    overlayOpacity: blurOverlayOpacity ?? 0.2,
+  });
+
   cb?.(data as any);
 
   if (!data?.arrayBuffer && !zoomData?.arrayBuffer) return;
@@ -84,6 +101,7 @@ export const generateUploadResParams = async ({
     suffix: 'jpeg',
     dataHex: bytesToHex(data?.arrayBuffer as Uint8Array),
     thumbnailDataHex: bytesToHex(zoomData?.arrayBuffer as Uint8Array),
+    blurDataHex: blurData.hex,
     nftMetaData: '',
     fileNameNoExt: undefined,
   };
@@ -214,6 +232,8 @@ function UploadScreenComponent() {
           height,
           homeScreenSize: HomeScreenSize,
           homeScreenThumbnailSize: HomeScreenThumbnailSize,
+          blurRadius: uploadScreenParams?.blurRadius ?? 100,
+          blurOverlayOpacity: uploadScreenParams?.blurOverlayOpacity ?? 0.2,
           cb: data => {
             setImage({ uri: base64 } as any);
             setPreviewData(data?.base64 ? `data:image/png;base64,${data.base64}` : null);
@@ -275,6 +295,8 @@ function UploadScreenComponent() {
             height: image.height ?? 0,
             homeScreenSize: HomeScreenSize,
             homeScreenThumbnailSize: HomeScreenThumbnailSize,
+            blurRadius: uploadScreenParams?.blurRadius ?? 100,
+            blurOverlayOpacity: uploadScreenParams?.blurOverlayOpacity ?? 0.2,
             cb: data => {
               setPreviewData(data?.base64 ? `data:image/png;base64,${data.base64}` : null);
             },
@@ -386,6 +408,40 @@ function UploadScreenComponent() {
             }
           }}
         />
+        <CommonInput
+          type="number"
+          label="Blur Radius"
+          value={uploadScreenParams?.blurRadius?.toString() ?? '100'}
+          placeholder="100"
+          onChange={v => {
+            if (!isInputDisabled) {
+              try {
+                parseInt(v);
+              } catch (e) {
+                alert('Blur Radius must be a number');
+                return;
+              }
+              setUploadScreenParams({ ...uploadScreenParams, blurRadius: parseInt(v) });
+            }
+          }}
+        />
+        <CommonInput
+          type="number"
+          label="Blur Overlay Opacity"
+          value={uploadScreenParams?.blurOverlayOpacity?.toString() ?? '0.2'}
+          placeholder="100"
+          onChange={v => {
+            if (!isInputDisabled) {
+              try {
+                parseInt(v);
+              } catch (e) {
+                alert('Blur Overlay Opacity must be a number');
+                return;
+              }
+              setUploadScreenParams({ ...uploadScreenParams, blurOverlayOpacity: parseInt(v) });
+            }
+          }}
+        />
         <Button onPress={() => handleScreenUpdate('WallPaper')} disabled={isLoading || !image}>
           {isLoading ? 'Uploading...' : intl.formatMessage({ id: 'action__upload' })}
         </Button>
@@ -421,6 +477,40 @@ function UploadScreenComponent() {
             }
           }}
         />
+        <CommonInput
+          type="number"
+          label="Blur Radius"
+          value={uploadScreenParams?.blurRadius?.toString() ?? '100'}
+          placeholder="100"
+          onChange={v => {
+            if (!isInputDisabled) {
+              try {
+                parseInt(v);
+              } catch (e) {
+                alert('Blur Radius must be a number');
+                return;
+              }
+              setUploadScreenParams({ ...uploadScreenParams, blurRadius: parseInt(v) });
+            }
+          }}
+        />
+        <CommonInput
+          type="number"
+          label="Blur Overlay Opacity"
+          value={uploadScreenParams?.blurOverlayOpacity?.toString() ?? '0.2'}
+          placeholder="100"
+          onChange={v => {
+            if (!isInputDisabled) {
+              try {
+                parseInt(v);
+              } catch (e) {
+                alert('Blur Overlay Opacity must be a number');
+                return;
+              }
+              setUploadScreenParams({ ...uploadScreenParams, blurOverlayOpacity: parseInt(v) });
+            }
+          }}
+        />
         <Button onPress={loadNftData} disabled={isLoading || !nftUrl} marginRight="$2">
           {isLoading ? 'Loading...' : 'Load NFT Data'}
         </Button>
@@ -434,7 +524,7 @@ function UploadScreenComponent() {
             预览
           </Label>
           {image && (
-            <Image
+            <ImageView
               height={800}
               width={480}
               source={{ uri: image.uri }}
@@ -444,7 +534,7 @@ function UploadScreenComponent() {
           )}
           {previewData && (
             // NFT
-            <Image height={238} width={238} source={{ uri: previewData }} />
+            <ImageView height={238} width={238} source={{ uri: previewData }} />
             // HOME SCREEN
             // <Image style={{ height: 800, width: 480 }} source={{ uri: previewData }} />
           )}