feat: add new version check

build/webpack.common.config.js

@@ -23,6 +23,7 @@ const config = (env) => {
   const version = env.version;
   const paths = getBrowserPaths(env.browser);
   const manifest = env.manifest;
+  const channel = env.channel;
   // Check if Tailwind config exists
   const useTailwind = fs.existsSync(path.join(paths.appPath, 'tailwind.config.js'));
 
@@ -489,7 +490,8 @@ const config = (env) => {
       new webpack.DefinePlugin({
         'process.env.version': JSON.stringify(`Version: ${version}`),
         'process.env.release': JSON.stringify(version),
-        'process.env.manifest': JSON.stringify(manifest)
+        'process.env.manifest': JSON.stringify(manifest),
+        'process.env.channel': JSON.stringify(channel)
       }),
       new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output

gulpfile.js

@@ -11,11 +11,12 @@ const uglify = require('gulp-uglify');
 
 //parse arguments
 var knownOptions = {
-  string: ['env', 'browser', 'manifest'],
+  string: ['env', 'browser', 'manifest', 'channel'],
   default: {
     env: 'dev',
     browser: 'chrome',
-    manifest: 'mv3'
+    manifest: 'mv3',
+    channel: 'chrome'
   }
 };
 
@@ -83,7 +84,8 @@ function task_webpack(cb) {
       version: validVersion,
       config: options.env,
       browser: options.browser,
-      manifest: options.manifest
+      manifest: options.manifest,
+      channel: options.channel
     }),
     cb
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unisat-extension",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "private": true,
   "homepage": "https://github.com/unisat-wallet/extension#readme",
   "bugs": {
@@ -12,12 +12,12 @@
   },
   "scripts": {
     "clean": "mkdir -p dist && rm -rf dist/* && cp -r build/_raw/* dist",
-    "build:chrome:dev": "webpack --progress --env browser=chrome config=dev version=1",
-    "build:chrome": "gulp build --env=pro --browser=chrome --manifest=mv3",
-    "build:chrome:mv2": "gulp build --env=pro --browser=chrome --manifest=mv2",
-    "build:firefox:mv2": "gulp build --env=pro --browser=firefox --manifest=mv2",
-    "build:brave:mv2": "gulp build --env=pro --browser=brave --manifest=mv2",
-    "build:edge:mv2": "gulp build --env=pro --browser=edge --manifest=mv2",
+    "build:chrome:dev": "webpack --progress --env browser=chrome manifest=mv2 config=dev channel=github version=0.0.0",
+    "build:chrome": "gulp build --env=pro --browser=chrome --manifest=mv2 --channel=github",
+    "build:firefox": "gulp build --env=pro --browser=firefox --manifest=mv2 --channel=github",
+    "build:brave": "gulp build --env=pro --browser=brave --manifest=mv2 --channel=github",
+    "build:edge": "gulp build --env=pro --browser=edge --manifest=mv2 --channel=github",
+    "build:chrome:mv3": "gulp build --env=pro --browser=chrome --manifest=mv3 --channel=chrome",
     "translate": "node build/pull_translation",
     "lint": "eslint src --fix --ext .js,.ts,.tsx,.json  && npm run format",
     "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx,json}",
@@ -102,6 +102,7 @@
     "process": "0.11.10",
     "prompts": "^2.4.2",
     "qrcode.react": "^3.0.2",
+    "randomstring": "^1.2.3",
     "rc-virtual-list": "^3.4.8",
     "react": "^18.1.0",
     "react-activation": "^0.10.2",
@@ -121,7 +122,7 @@
     "reflect-metadata": "^0.1.13",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",
-    "semver": "^7.3.5",
+    "semver": "^7.5.1",
     "source-map-loader": "^3.0.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",

src/background/controller/wallet.ts

@@ -1081,6 +1081,14 @@ export class WalletController extends BaseController {
   getWalletConfig = () => {
     return openapiService.store.config;
   };
+
+  getSkippedVersion = () => {
+    return preferenceService.getSkippedVersion();
+  };
+
+  setSkippedVersion = (version: string) => {
+    return preferenceService.setSkippedVersion(version);
+  };
 }
 
 export default new WalletController();

src/background/index.ts

@@ -25,6 +25,7 @@ async function restoreAppState() {
 
   await preferenceService.init();
 
+  openapiService.setDeviceId(preferenceService.getDeviceId());
   await openapiService.init();
 
   await permissionService.init();

src/background/service/openapi.ts

@@ -1,5 +1,5 @@
 import { createPersistStore } from '@/background/utils';
-import { OPENAPI_URL_MAINNET, OPENAPI_URL_TESTNET } from '@/shared/constant';
+import { CHANNEL, OPENAPI_URL_MAINNET, OPENAPI_URL_TESTNET, VERSION } from '@/shared/constant';
 import {
   AddressAssets,
   AppSummary,
@@ -32,6 +32,7 @@ enum API_STATUS {
 export class OpenApiService {
   store!: OpenApiStore;
   clientAddress = '';
+  deviceId = '';
   setHost = async (host: string) => {
     this.store.host = host;
     await this.init();
@@ -41,6 +42,10 @@ export class OpenApiService {
     return this.store.host;
   };
 
+  setDeviceId = async (deviceId: string) => {
+    this.deviceId = deviceId;
+  };
+
   init = async () => {
     this.store = await createPersistStore({
       name: 'openapi',
@@ -83,8 +88,10 @@ export class OpenApiService {
     }
     const headers = new Headers();
     headers.append('X-Client', 'UniSat Wallet');
-    headers.append('X-Version', process.env.release!);
+    headers.append('X-Version', VERSION);
     headers.append('x-address', this.clientAddress);
+    headers.append('x-channel', CHANNEL);
+    headers.append('x-udid', this.deviceId);
     const res = await fetch(new Request(url), { method: 'GET', headers, mode: 'cors', cache: 'default' });
     const data = await res.json();
     return data;
@@ -94,8 +101,10 @@ export class OpenApiService {
     const url = this.getHost() + route;
     const headers = new Headers();
     headers.append('X-Client', 'UniSat Wallet');
-    headers.append('X-Version', process.env.release!);
+    headers.append('X-Version', VERSION);
     headers.append('x-address', this.clientAddress);
+    headers.append('x-channel', CHANNEL);
+    headers.append('x-udid', this.deviceId);
     headers.append('Content-Type', 'application/json;charset=utf-8');
     const res = await fetch(new Request(url), {
       method: 'POST',

src/background/service/preference.ts

@@ -1,5 +1,6 @@
 import compareVersions from 'compare-versions';
 import cloneDeep from 'lodash/cloneDeep';
+import randomstring from 'randomstring';
 
 import { createPersistStore } from '@/background/utils';
 import { EVENTS } from '@/shared/constant';
@@ -76,6 +77,8 @@ export interface PreferenceStore {
       };
     };
   };
+  skippedVersion: string;
+  deviceId: string;
 }
 
 const SUPPORT_LOCALES = ['en'];
@@ -109,7 +112,9 @@ class PreferenceService {
         networkType: NetworkType.MAINNET,
         keyringAlianNames: {},
         accountAlianNames: {},
-        uiCachedData: {}
+        uiCachedData: {},
+        skippedVersion: '',
+        deviceId: randomstring.randomstring.generate(10)
       }
     });
     if (!this.store.locale || this.store.locale !== defaultLang) {
@@ -166,6 +171,14 @@ class PreferenceService {
     if (!this.store.uiCachedData) {
       this.store.uiCachedData = {};
     }
+
+    if (!this.store.skippedVersion) {
+      this.store.skippedVersion = '';
+    }
+
+    if (!this.store.deviceId) {
+      this.store.deviceId = randomstring.randomstring.generate(10);
+    }
   };
 
   getAcceptLanguages = async () => {
@@ -397,6 +410,18 @@ class PreferenceService {
       brc20TransferableList: {}
     };
   };
+
+  getSkippedVersion = () => {
+    return this.store.skippedVersion;
+  };
+
+  setSkippedVersion = (version: string) => {
+    this.store.skippedVersion = version;
+  };
+
+  getDeviceId = () => {
+    return this.store.deviceId;
+  };
 }
 
 export default new PreferenceService();

src/background/webapi/browser.ts

@@ -1,3 +1,5 @@
+import { MANIFEST_VERSION } from '@/shared/constant';
+
 function getBrowser() {
   if (typeof globalThis.browser === 'undefined') {
     return chrome;
@@ -9,7 +11,7 @@ function getBrowser() {
 const browser = getBrowser();
 
 export async function browserWindowsGetCurrent(params?: any) {
-  if (process.env.manifest === 'mv2') {
+  if (MANIFEST_VERSION === 'mv2') {
     return new Promise((resolve, reject) => {
       browser.windows.getCurrent(params, (val) => {
         resolve(val);
@@ -21,7 +23,7 @@ export async function browserWindowsGetCurrent(params?: any) {
 }
 
 export async function browserWindowsCreate(params?: any) {
-  if (process.env.manifest === 'mv2') {
+  if (MANIFEST_VERSION === 'mv2') {
     return new Promise((resolve, reject) => {
       browser.windows.create(params, (val) => {
         resolve(val);
@@ -33,7 +35,7 @@ export async function browserWindowsCreate(params?: any) {
 }
 
 export async function browserWindowsUpdate(windowId: number, updateInfo: any) {
-  if (process.env.manifest == 'mv2') {
+  if (MANIFEST_VERSION == 'mv2') {
     return new Promise((resolve, reject) => {
       browser.windows.update(windowId, updateInfo, (val) => {
         resolve(val);
@@ -45,7 +47,7 @@ export async function browserWindowsUpdate(windowId: number, updateInfo: any) {
 }
 
 export async function browserWindowsRemove(windowId: number) {
-  if (process.env.manifest == 'mv2') {
+  if (MANIFEST_VERSION == 'mv2') {
     return new Promise((resolve, reject) => {
       browser.windows.remove(windowId, (val) => {
         resolve(val);
@@ -57,7 +59,7 @@ export async function browserWindowsRemove(windowId: number) {
 }
 
 export async function browserStorageLocalGet(val: any) {
-  if (process.env.manifest === 'mv2') {
+  if (MANIFEST_VERSION === 'mv2') {
     return new Promise((resolve, reject) => {
       browser.storage.local.get(val, (res) => {
         resolve(res);
@@ -69,7 +71,7 @@ export async function browserStorageLocalGet(val: any) {
 }
 
 export async function browserStorageLocalSet(val: any) {
-  if (process.env.manifest === 'mv2') {
+  if (MANIFEST_VERSION === 'mv2') {
     return new Promise((resolve, reject) => {
       browser.storage.local.set(val, (res) => {
         resolve(res);
@@ -81,7 +83,7 @@ export async function browserStorageLocalSet(val: any) {
 }
 
 export async function browserTabsGetCurrent() {
-  if (process.env.manifest == 'mv2') {
+  if (MANIFEST_VERSION === 'mv2') {
     return new Promise((resolve, reject) => {
       browser.tabs.getCurrent((val) => {
         resolve(val);
@@ -93,7 +95,7 @@ export async function browserTabsGetCurrent() {
 }
 
 export async function browserTabsQuery(params: any) {
-  if (process.env.manifest == 'mv2') {
+  if (MANIFEST_VERSION === 'mv2') {
     return new Promise((resolve, reject) => {
       browser.tabs.query(params, (val) => {
         resolve(val);
@@ -105,7 +107,7 @@ export async function browserTabsQuery(params: any) {
 }
 
 export async function browserTabsCreate(params: any) {
-  if (process.env.manifest == 'mv2') {
+  if (MANIFEST_VERSION === 'mv2') {
     return new Promise((resolve, reject) => {
       browser.tabs.create(params, (val) => {
         resolve(val);
@@ -117,7 +119,7 @@ export async function browserTabsCreate(params: any) {
 }
 
 export async function browserTabsUpdate(tabId: number, params: any) {
-  if (process.env.manifest == 'mv2') {
+  if (MANIFEST_VERSION === 'mv2') {
     return new Promise((resolve, reject) => {
       browser.tabs.update(tabId, params, (val) => {
         resolve(val);

src/shared/constant/index.ts

@@ -267,3 +267,7 @@ export const UNISAT_DOMAIN = '.unisat';
 export const GITHUB_URL = 'https://github.com/unisat-wallet/extension';
 export const DISCORD_URL = 'https://discord.com/invite/EMskB2sMz8';
 export const TWITTER_URL = 'https://twitter.com/unisat_wallet';
+
+export const CHANNEL = process.env.channel!;
+export const VERSION = process.env.release!;
+export const MANIFEST_VERSION = process.env.manifest!;

src/shared/types.ts

@@ -226,6 +226,7 @@ export interface RawTxInfo {
 }
 
 export interface WalletConfig {
+  version: string;
   moonPayEnabled: boolean;
   statusMessage: string;
 }

src/ui/components/UpgradePopver/index.tsx

@@ -0,0 +1,41 @@
+import { useVersionInfo } from '@/ui/state/settings/hooks';
+
+import { Button } from '../Button';
+import { Column } from '../Column';
+import { Popover } from '../Popover';
+import { Row } from '../Row';
+import { Text } from '../Text';
+
+export const UpgradePopver = ({ onClose }: { onClose: () => void }) => {
+  const versionInfo = useVersionInfo();
+  return (
+    <Popover onClose={onClose}>
+      <Column justifyCenter itemsCenter>
+        <Column mt="lg">
+          <Text text={`A new version (v${versionInfo.newVersion}) is available`} textCenter />
+        </Column>
+
+        <Row full mt="lg">
+          <Button
+            text="Skip"
+            full
+            onClick={(e) => {
+              if (onClose) {
+                onClose();
+              }
+            }}
+          />
+
+          <Button
+            text="Go to download"
+            full
+            preset="primary"
+            onClick={(e) => {
+              window.open(versionInfo.downloadUrl);
+            }}
+          />
+        </Row>
+      </Column>
+    </Popover>
+  );
+};