Skip to content

Commit

Permalink
[Issue-1878] Update notification and support bridge
Browse files Browse the repository at this point in the history
  • Loading branch information
Quangdm-cdm committed Jan 23, 2025
1 parent 85dae43 commit 808fe51
Show file tree
Hide file tree
Showing 57 changed files with 2,123 additions and 214 deletions.
2 changes: 1 addition & 1 deletion html/DevModeWeb.bundle/site/index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SubWallet</title><script inline inline-asset="fallback.js$" inline-asset-delete></script><script inline inline-asset="web-runner.js$" inline-asset-delete></script><script defer="defer" src="fallback-5289e749417ace6ef22c.js"></script><script defer="defer" src="web-runner-a6e9da182ada0eb34f67.js"></script></head><body><div id="root">SubWallet</div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SubWallet</title><script inline inline-asset="fallback.js$" inline-asset-delete></script><script inline inline-asset="web-runner.js$" inline-asset-delete></script><script defer="defer" src="fallback-5289e749417ace6ef22c.js"></script><script defer="defer" src="web-runner-9e0c7c91b52ca9723f7d.js"></script></head><body><div id="root">SubWallet</div></body></html>

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html/Web.bundle/site/148-7f5921bbb143e67196fa.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html/Web.bundle/site/151-fded5ea5ed54d09c09c2.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html/Web.bundle/site/337-df8cac36926617abdb2d.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html/Web.bundle/site/437-affdeea88ede6d02b087.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html/Web.bundle/site/454-0a47d5b78f98d1b967b9.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html/Web.bundle/site/767-a256d106dcaa188339ec.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html/Web.bundle/site/fallback-5289e749417ace6ef22c.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion html/Web.bundle/site/index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SubWallet</title><script inline inline-asset="fallback.js$" inline-asset-delete></script><script inline inline-asset="web-runner.js$" inline-asset-delete></script><script defer="defer" src="fallback-5289e749417ace6ef22c.js"></script><script defer="defer" src="web-runner-0a4c965906546f113b6c.js"></script></head><body><div id="root">SubWallet</div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>SubWallet</title><script inline inline-asset="fallback.js$" inline-asset-delete></script><script inline inline-asset="web-runner.js$" inline-asset-delete></script><script defer="defer" src="fallback-5289e749417ace6ef22c.js"></script><script defer="defer" src="web-runner-413e5d44858704394d45.js"></script></head><body><div id="root">SubWallet</div></body></html>

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -543,6 +543,11 @@ PODS:
- React-Core
- RNLocalize (3.2.1):
- React-Core
- RNNotifee (9.1.8):
- React-Core
- RNNotifee/NotifeeCore (= 9.1.8)
- RNNotifee/NotifeeCore (9.1.8):
- React-Core
- RNPermissions (3.10.1):
- React-Core
- RNQrGenerator (1.4.0):
Expand Down Expand Up @@ -651,6 +656,7 @@ DEPENDENCIES:
- RNInAppBrowser (from `../node_modules/react-native-inappbrowser-reborn`)
- RNKeychain (from `../node_modules/react-native-keychain`)
- RNLocalize (from `../node_modules/react-native-localize`)
- "RNNotifee (from `../node_modules/@notifee/react-native`)"
- RNPermissions (from `../node_modules/react-native-permissions`)
- RNQrGenerator (from `../node_modules/rn-qr-generator`)
- RNReanimated (from `../node_modules/react-native-reanimated`)
Expand Down Expand Up @@ -826,6 +832,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native-keychain"
RNLocalize:
:path: "../node_modules/react-native-localize"
RNNotifee:
:path: "../node_modules/@notifee/react-native"
RNPermissions:
:path: "../node_modules/react-native-permissions"
RNQrGenerator:
Expand Down Expand Up @@ -925,6 +933,7 @@ SPEC CHECKSUMS:
RNInAppBrowser: e36d6935517101ccba0e875bac8ad7b0cb655364
RNKeychain: a65256b6ca6ba6976132cc4124b238a5b13b3d9c
RNLocalize: 4f22418187ecd5ca693231093ff1d912d1b3c9bc
RNNotifee: 4a6ee5c7deaf00e005050052d73ee6315dff7ec9
RNPermissions: 565ddbb2b37e62f0e35376d1d7c455789ca5b0f8
RNQrGenerator: 1676221c08bfabec978242989c733810dad20959
RNReanimated: ce6bef77caeee09d7f022532cee0c8d9bad09c9a
Expand Down
2 changes: 2 additions & 0 deletions ios/SubWalletMobile/SubWalletMobile.entitlements
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>aps-environment</key>
<string>development</string>
<key>com.apple.developer.associated-domains</key>
<array>
<string>applinks:mobile.subwallet.app</string>
Expand Down
13 changes: 7 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"@fortawesome/react-native-fontawesome": "^0.3.0",
"@gear-js/api": "^0.37.2",
"@gorhom/portal": "^1.0.14",
"@notifee/react-native": "^9.1.8",
"@polkadot/api": "^12.0.2",
"@polkadot/react-qr": "^3.5.1",
"@polkadot/reactnative-identicon": "^3.5.1",
Expand All @@ -62,9 +63,9 @@
"@react-navigation/native-stack": "^6.9.8",
"@reduxjs/toolkit": "^1.9.2",
"@shopify/flash-list": "^1.7.1",
"@subwallet/extension-chains": "1.3.2-0",
"@subwallet/extension-dapp": "1.3.2-0",
"@subwallet/extension-inject": "1.3.2-0",
"@subwallet/extension-chains": "1.3.12-1",
"@subwallet/extension-dapp": "1.3.12-1",
"@subwallet/extension-inject": "1.3.12-1",
"@subwallet/keyring": "^0.1.8-beta.0",
"@subwallet/react-ui": "^5.1.2-b79",
"@subwallet/ui-keyring": "^0.1.8-beta.0",
Expand Down Expand Up @@ -164,8 +165,8 @@
"@polkadot/types": "^12.0.2",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.11",
"@subwallet/chain-list": "0.2.88-beta.6",
"@subwallet/extension-base": "1.3.2-0",
"@subwallet/chain-list": "0.2.97",
"@subwallet/extension-base": "1.3.12-1",
"@tsconfig/react-native": "^3.0.0",
"@types/humanize-duration": "^3.27.3",
"@types/jest": "^29.2.3",
Expand Down Expand Up @@ -219,7 +220,7 @@
"@polkadot/util-crypto": "^12.6.2",
"@polkadot/types": "^12.0.2",
"@subwallet/chain-list": "0.2.97",
"@subwallet/extension-base": "1.3.2-0",
"@subwallet/extension-base": "1.3.12-1",
"react-native-svg": "^13.6.0",
"sails-js": "0.1.6",
"@chainflip/sdk": "^1.3.0"
Expand Down
4 changes: 4 additions & 0 deletions src/AppNavigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,8 @@ import { ExportAllAccount } from 'screens/Account/ExportAllAccount';
import { CrowdloansScreen } from 'screens/Home/Crowdloans';
import { AccountJson } from '@subwallet/extension-base/types';
import { CurrentAccountInfo } from '@subwallet/extension-base/background/types';
import { Notification } from 'screens/Settings/Notifications/Notification';
import { NotificationSetting } from 'screens/Settings/Notifications/NotificationSetting';

interface Props {
isAppReady: boolean;
Expand Down Expand Up @@ -642,6 +644,7 @@ const AppNavigator = ({ isAppReady }: Props) => {
<Stack.Screen name="BrowserTabsManager" component={BrowserTabsManager} />
<Stack.Screen name="BrowserListByTabview" component={BrowserListByTabview} />
<Stack.Screen name="AccountsScreen" component={AccountsScreen} />
<Stack.Screen name="Notification" component={Notification} />
<Stack.Screen name="Drawer" component={DrawerScreen} options={{ gestureEnabled: false }} />
<Stack.Screen name="EarningPreview" component={EarningPreview} options={{ gestureEnabled: false }} />
<Stack.Screen
Expand All @@ -652,6 +655,7 @@ const AppNavigator = ({ isAppReady }: Props) => {
</Stack.Group>
<Stack.Group screenOptions={{ headerShown: false, animation: 'slide_from_right' }}>
<Stack.Screen name="GeneralSettings" component={GeneralSettings} />
<Stack.Screen name="NotificationSetting" component={NotificationSetting} />
<Stack.Screen name="History" component={HistoryScreen} />
<Stack.Screen name="NetworksSetting" component={NetworksSetting} />
<Stack.Screen name="ConnectList" component={ConnectionListScreen} />
Expand Down
3 changes: 3 additions & 0 deletions src/components/EmptyList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface Props {
title: string;
message?: string;
isRefresh?: boolean;
addBtnLoading?: boolean;
onPressReload?: () => void;
addBtnLabel?: string;
onPressAddBtn?: () => void;
Expand All @@ -24,6 +25,7 @@ export const EmptyList = ({
message,
onPressReload,
isRefresh,
addBtnLoading,
addBtnLabel,
onPressAddBtn,
iconButton = PlusCircle,
Expand Down Expand Up @@ -74,6 +76,7 @@ export const EmptyList = ({
<Button
style={{ marginTop: theme.margin }}
shape={'round'}
loading={addBtnLoading}
icon={<Icon phosphorIcon={iconButton} weight={'fill'} size={'sm'} />}
size={'xs'}
onPress={onPressAddBtn}>
Expand Down
6 changes: 5 additions & 1 deletion src/components/FlatListScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ interface Props<T> {
extraData?: any;
keyExtractor?: (item: T, index: number) => string;
removeClippedSubviews?: boolean;
isShowCustomContent?: boolean;
renderCustomContent?: () => JSX.Element | JSX.Element[];
}

export function FlatListScreen<T>({
Expand Down Expand Up @@ -107,6 +109,8 @@ export function FlatListScreen<T>({
extraData,
keyExtractor,
removeClippedSubviews,
isShowCustomContent,
renderCustomContent,
}: Props<T>) {
const [searchString, setSearchString] = useState<string>(defaultSearchString || '');
const searchRef = useRef<TextInput>(null);
Expand Down Expand Up @@ -227,7 +231,7 @@ export function FlatListScreen<T>({
rightIconColor={rightIconOption?.color}
isShowMainHeader={isShowMainHeader}
androidKeyboardVerticalOffset={androidKeyboardVerticalOffset}>
{renderContent()}
{!isShowCustomContent ? renderContent() : renderCustomContent ? renderCustomContent() : <></>}
</ContainerWithSubHeader>
);
}
63 changes: 52 additions & 11 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { QrCode } from 'phosphor-react-native';
import React, { useCallback, useState } from 'react';
import { BellRinging, QrCode } from 'phosphor-react-native';
import React, { useCallback, useMemo, useState } from 'react';
import { Keyboard, StyleProp, View } from 'react-native';
import { SpaceStyle } from 'styles/space';
import { Button, Icon } from 'components/design-system-ui';
import { Badge, Button, Icon } from 'components/design-system-ui';
import AccountSelectField from 'components/common/Account/AccountSelectField';
import { useNavigation } from '@react-navigation/native';
import { RootStackParamList } from 'routes/index';
Expand All @@ -16,6 +16,8 @@ import { validWalletConnectUri } from 'utils/scanner/walletConnect';
import { addConnection } from 'messaging/index';
import useCheckCamera from 'hooks/common/useCheckCamera';
import { isAddress } from '@subwallet/keyring';
import { RootState } from 'stores/index';
import { useSelector } from 'react-redux';

export interface HeaderProps {
rightComponent?: JSX.Element;
Expand All @@ -33,6 +35,11 @@ const headerWrapper: StyleProp<any> = {

export const Header = ({ rightComponent, disabled }: HeaderProps) => {
const [isScanning, setIsScanning] = useState<boolean>(false);
const { currentAccountProxy, isAllAccount } = useSelector((state: RootState) => state.accountState);
const {
notificationSetup: { isEnabled: notiEnable },
} = useSelector((state: RootState) => state.settings);
const { unreadNotificationCountMap } = useSelector((state: RootState) => state.notification);
const [error, setError] = useState<string | undefined>(undefined);
const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const drawerNavigation = useNavigation<DrawerNavigationProp<RootStackParamList>>();
Expand All @@ -47,6 +54,20 @@ export const Header = ({ rightComponent, disabled }: HeaderProps) => {
checkCamera(undefined, openScannerScreen)();
}, [checkCamera]);

const onPressNotificationBtn = useCallback(() => {
navigation.navigate('Notification');
}, [navigation]);

const unreadNotificationCount = useMemo(() => {
if (!currentAccountProxy || !unreadNotificationCountMap) {
return 0;
}

return isAllAccount
? Object.values(unreadNotificationCountMap).reduce((acc, val) => acc + val, 0)
: unreadNotificationCountMap[currentAccountProxy.id] || 0;
}, [currentAccountProxy, isAllAccount, unreadNotificationCountMap]);

const onScanAddress = useCallback(
(data: string) => {
if (isAddress(data)) {
Expand Down Expand Up @@ -99,14 +120,34 @@ export const Header = ({ rightComponent, disabled }: HeaderProps) => {

<View style={{ flexDirection: 'row', position: 'absolute', right: 16 }}>
{rightComponent || (
<Button
disabled={disabled}
style={[{ marginRight: -8 }, disabled && DisabledStyle]}
size={'xs'}
type={'ghost'}
icon={<Icon phosphorIcon={QrCode} weight={'bold'} />}
onPress={onPressQrButton}
/>
<View style={{ flexDirection: 'row' }}>
<View>
<Button
disabled={disabled}
style={[disabled && DisabledStyle]}
size={'xs'}
type={'ghost'}
icon={<Icon phosphorIcon={BellRinging} weight={'bold'} size={'md'} />}
onPress={onPressNotificationBtn}
/>
{notiEnable && !!unreadNotificationCount && (
<Badge
value={unreadNotificationCount}
containerStyle={{ height: 12, paddingHorizontal: 2, position: 'absolute', bottom: 8, right: 8 }}
textStyle={{ fontSize: 7, lineHeight: 12, fontWeight: '600' }}
/>
)}
</View>

<Button
disabled={disabled}
style={[{ marginRight: -8 }, disabled && DisabledStyle]}
size={'xs'}
type={'ghost'}
icon={<Icon phosphorIcon={QrCode} weight={'bold'} size={'md'} />}
onPress={onPressQrButton}
/>
</View>
)}
</View>

Expand Down
82 changes: 82 additions & 0 deletions src/components/Item/Notification/NotificationItem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React, { useMemo } from 'react';
import Web3Block from '../../design-system-ui/web3-block/Web3Block';
import { BackgroundIcon, Button, Icon, Typography } from 'components/design-system-ui';
import { DotsThree } from 'phosphor-react-native';
import { View } from 'react-native';
import { convertHexColorToRGBA, formatConditionalDuration } from 'utils/color';
import { NotificationInfoItem } from 'screens/Settings/Notifications/Notification';
import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
import { FontSemiBold } from 'styles/sharedStyles';

interface Props extends NotificationInfoItem {
onPress?: () => void;
onPressMoreBtn: () => void;
disabled?: boolean;
}

export const NotificationItem = ({
backgroundColor,
description,
leftIcon,
disabled,
onPress,
onPressMoreBtn,
time,
title,
isRead,
}: Props) => {
const theme = useSubWalletTheme().swThemes;
const leftItem = useMemo(() => {
return (
<View style={{ justifyContent: 'center', alignItems: 'center', gap: theme.sizeXXS }}>
<BackgroundIcon
backgroundColor={convertHexColorToRGBA(backgroundColor, 0.1)}
iconColor={backgroundColor}
phosphorIcon={leftIcon}
size={'lg'}
shape={'circle'}
weight={'fill'}
/>
<Typography.Text size={'xs'} style={{ color: theme.colorTextTertiary, ...FontSemiBold }}>
{formatConditionalDuration(time)}
</Typography.Text>
</View>
);
}, [backgroundColor, leftIcon, theme.colorTextTertiary, theme.sizeXXS, time]);

const middleItem = useMemo(() => {
return (
<View style={{ gap: theme.sizeXXS }}>
<Typography.Text size={'sm'} style={{ color: theme.colorWhite, ...FontSemiBold }}>
{title}
</Typography.Text>
<Typography.Text size={'sm'} style={{ color: theme.colorTextTertiary }}>
{description}
</Typography.Text>
</View>
);
}, [description, theme.colorTextTertiary, theme.colorWhite, theme.sizeXXS, title]);

const rightItem = useMemo(() => {
return <Button icon={<Icon phosphorIcon={DotsThree} />} size={'xs'} type={'ghost'} onPress={onPressMoreBtn} />;
}, [onPressMoreBtn]);

return (
<Web3Block
onPress={onPress}
disabled={disabled}
customStyle={{
container: {
backgroundColor: theme.colorBgSecondary,
borderRadius: theme.borderRadiusLG,
paddingVertical: theme.sizeSM,
marginBottom: theme.marginXS,
opacity: isRead ? 0.4 : 1,
},
}}
leftItem={leftItem}
middleItem={middleItem}
rightItem={rightItem}
/>
);
};
1 change: 1 addition & 0 deletions src/components/Modal/AccountActionSelectModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export type ActionItemType = {
icon: React.ElementType<IconProps>;
label: string;
disabled?: boolean;
onPress?: () => void;
};

export interface AccountActionSelectModalProps {
Expand Down
Loading

0 comments on commit 808fe51

Please sign in to comment.