({ list: [], map: {} });
12 |
13 | export const useNotification = (id: ThreadMessage['id']) => {
14 | const items = useContext(NotificationsItemsContext);
15 |
16 | return items.map[id];
17 | };
18 |
--------------------------------------------------------------------------------
/packages/react-ui/src/ui/notifications/NotificationsFeed/index.ts:
--------------------------------------------------------------------------------
1 | export * from './NotificationsFeedScreen';
2 |
--------------------------------------------------------------------------------
/packages/react-ui/src/ui/notifications/Settings/AppInfo.tsx:
--------------------------------------------------------------------------------
1 | import { REACT_SDK_VERSION } from '@dialectlabs/react-sdk';
2 | import clsx from 'clsx';
3 | import { version as REACT_UI_VERSION } from '../../../../package.json';
4 | import { DialectLogo } from '../../core/icons';
5 | import { ClassTokens } from '../../theme';
6 | export const AppInfo = () => {
7 | return (
8 |
9 |
27 |
28 |
29 |
30 | {REACT_UI_VERSION} / {REACT_SDK_VERSION}
31 |
32 |
33 |
{`Notifications ${enabled ? 'On' : 'Off'}`}
12 | );
13 |
--------------------------------------------------------------------------------
/packages/react-ui/src/ui/notifications/Settings/Channels/EmailChannel/EmailVerificationCodeInput.tsx:
--------------------------------------------------------------------------------
1 | import { AddressType } from '@dialectlabs/react-sdk';
2 | import clsx from 'clsx';
3 | import { useMemo } from 'react';
4 | import { Button, Input, TextButton } from '../../../../core';
5 | import { ClassTokens, Icons } from '../../../../theme';
6 | import { useVerificationCode } from '../model/useVerificationCode';
7 |
8 | const VERIFICATION_CODE_REGEX = new RegExp('^[0-9]{6}$');
9 | export const EmailVerificationCodeInput = ({ email }: { email: string }) => {
10 | const {
11 | verificationCode,
12 | setVerificationCode,
13 | sendCode,
14 | resendCode,
15 | isSendingCode,
16 | isResendingCode,
17 | deleteAddress,
18 | currentError,
19 | } = useVerificationCode(AddressType.Email);
20 |
21 | const isCodeValid = useMemo(
22 | () => VERIFICATION_CODE_REGEX.test(verificationCode),
23 | [verificationCode],
24 | );
25 | const isLoading = isSendingCode || isResendingCode;
26 |
27 | return (
28 |
29 |
setVerificationCode(e.target.value)}
36 | rightAdornment={
37 | isLoading ? (
38 |
39 |
41 | ) : (
42 |
46 | Submit
47 |
48 | )
49 | }
50 | />
51 |
52 | {currentError && (
53 |
54 | {currentError.message}
55 |
56 | )}
57 |
58 |
59 |
60 | Check your {email}
61 | inbox for a verification code.
62 |
63 |
64 |
65 |
68 |
69 |
72 |
73 |
74 |
21 | {verificationNeeded ? (
22 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/packages/react-ui/src/ui/notifications/Settings/Channels/TelegramChannel/TelegramVerificationCodeInput.tsx:
--------------------------------------------------------------------------------
1 | import { AddressType, useDialectSdk } from '@dialectlabs/react-sdk';
2 | import clsx from 'clsx';
3 | import { useMemo } from 'react';
4 | import { Button, Input, TextButton } from '../../../../core';
5 | import { ClassTokens, Icons } from '../../../../theme';
6 | import { useVerificationCode } from '../model/useVerificationCode';
7 |
8 | const VERIFICATION_CODE_REGEX = new RegExp('^[0-9]{6}$');
9 | export const TelegramVerificationCodeInput = ({
10 | dappTelegramName,
11 | }: {
12 | dappTelegramName: string;
13 | }) => {
14 | const {
15 | config: { environment },
16 | } = useDialectSdk();
17 |
18 | const {
19 | verificationCode,
20 | setVerificationCode,
21 | sendCode,
22 | isSendingCode,
23 | deleteAddress,
24 | currentError,
25 | } = useVerificationCode(AddressType.Telegram);
26 |
27 | const buildBotUrl = (botUsername: string) =>
28 | `https://t.me/${botUsername}?start=${botUsername}`;
29 |
30 | const defaultBotUrl =
31 | environment === 'production'
32 | ? buildBotUrl('DialectLabsBot')
33 | : buildBotUrl('DialectLabsDevBot');
34 |
35 | const botURL = useMemo(() => {
36 | if (!dappTelegramName) {
37 | return defaultBotUrl;
38 | }
39 | return buildBotUrl(dappTelegramName);
40 | }, [dappTelegramName, defaultBotUrl]);
41 |
42 | const isCodeValid = useMemo(
43 | () => VERIFICATION_CODE_REGEX.test(verificationCode),
44 | [verificationCode],
45 | );
46 |
47 | return (
48 |
49 |
setVerificationCode(e.target.value)}
56 | rightAdornment={
57 | isSendingCode ? (
58 |
59 |
61 | ) : (
62 |
66 | Submit
67 |
68 | )
69 | }
70 | />
71 | {currentError && (
72 |
73 | {currentError.message}
74 |
75 | )}
76 |
91 |
24 | {verificationNeeded ? (
25 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/packages/react-ui/src/ui/notifications/Settings/Channels/WalletChannel.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AddressType,
3 | ThreadMemberScope,
4 | useDialectContext,
5 | useDialectSdk,
6 | useNotificationChannel,
7 | useNotificationChannelDappSubscription,
8 | useNotificationThread,
9 | useUnreadNotifications,
10 | } from '@dialectlabs/react-sdk';
11 | import clsx from 'clsx';
12 | import { useCallback } from 'react';
13 | import { displayAddress } from '../../../../utils/displayAddress';
14 | import { Button, IconButton, Input } from '../../../core';
15 | import { ClassTokens, Icons } from '../../../theme';
16 | import { ChannelNotificationsToggle } from './ChannelNotificationsToggle';
17 |
18 | const ADDRESS_TYPE = AddressType.Wallet;
19 |
20 | export const WalletChannel = () => {
21 | const { dappAddress } = useDialectContext();
22 | const {
23 | wallet: { address: walletAddress },
24 | } = useDialectSdk();
25 |
26 | const {
27 | thread,
28 | create: createThread,
29 | isCreatingThread,
30 | delete: deleteThread,
31 | isDeletingThread,
32 | } = useNotificationThread();
33 |
34 | const { refresh: refreshUnreadNotifications } = useUnreadNotifications({
35 | revalidateOnMount: false,
36 | });
37 |
38 | const {
39 | globalAddress: walletSubscriptionAddress,
40 | create: createAddress,
41 | delete: deleteAddress,
42 | isCreatingAddress,
43 | isDeletingAddress,
44 | } = useNotificationChannel({ addressType: ADDRESS_TYPE });
45 |
46 | const {
47 | enabled: subscriptionEnabled,
48 | toggleSubscription,
49 | isToggling,
50 | } = useNotificationChannelDappSubscription({
51 | addressType: ADDRESS_TYPE,
52 | dappAddress,
53 | });
54 |
55 | const deleteWalletThread = useCallback(async () => {
56 | await deleteThread();
57 | await deleteAddress();
58 | }, [deleteAddress, deleteThread]);
59 |
60 | const createWalletThread = useCallback(async () => {
61 | if (!dappAddress) return;
62 | return createThread({
63 | me: { scopes: [ThreadMemberScope.ADMIN] },
64 | otherMembers: [
65 | { address: dappAddress, scopes: [ThreadMemberScope.WRITE] },
66 | ],
67 | encrypted: false,
68 | });
69 | }, [createThread, dappAddress]);
70 |
71 | const createWalletAddress = useCallback(
72 | () => createAddress({ value: walletAddress }),
73 | [createAddress, walletAddress],
74 | );
75 |
76 | const isLoading =
77 | isDeletingThread ||
78 | isCreatingThread ||
79 | isDeletingAddress ||
80 | isCreatingAddress ||
81 | isToggling;
82 |
83 | const setUpWallet = useCallback(async () => {
84 | if (isLoading) return;
85 | const noSubscription = !walletSubscriptionAddress && !thread;
86 | let notificationsThread;
87 | if (!thread) {
88 | notificationsThread = await createWalletThread();
89 | refreshUnreadNotifications();
90 | }
91 | let walletAddress;
92 | if (!walletSubscriptionAddress) {
93 | walletAddress = await createWalletAddress();
94 | }
95 | if (noSubscription && notificationsThread) {
96 | await toggleSubscription({ enabled: true, address: walletAddress });
97 | }
98 | }, [
99 | createWalletAddress,
100 | createWalletThread,
101 | isLoading,
102 | refreshUnreadNotifications,
103 | thread,
104 | toggleSubscription,
105 | walletSubscriptionAddress,
106 | ]);
107 |
108 | const isWalletSetUp = thread && walletSubscriptionAddress;
109 | const RightAdornment = useCallback(() => {
110 | if (isLoading)
111 | return (
112 |
113 |
115 | );
116 | if (isWalletSetUp)
117 | return (
118 | Enable ;
125 | }, [deleteWalletThread, isLoading, isWalletSetUp, setUpWallet]);
126 |
127 | // console.log(isWalletSetUp);
128 |
129 | return (
130 |
131 | {
141 | if (isToggling) return;
142 | return toggleSubscription({ enabled: newValue });
143 | }}
144 | />
145 | )}
146 |
147 | );
148 | };
149 |
--------------------------------------------------------------------------------
/packages/react-ui/src/ui/notifications/Settings/Channels/index.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { ChannelType } from '../../../../types';
3 | import { EmailChannel } from './EmailChannel';
4 | import { TelegramChannel } from './TelegramChannel';
5 | import { WalletChannel } from './WalletChannel';
6 |
7 | interface Props {
8 | channels: ChannelType[];
9 | }
10 |
11 | const Channel = ({ type }: { type: ChannelType }) => {
12 | const ChannelRow = () => {
13 | if (type === 'email') return
19 |
21 | );
22 | };
23 |
24 | export const Channels = memo(function Channels({ channels }: Props) {
25 | return (
26 |
27 | {channels.map((it) => (
28 |
31 | );
32 | });
33 |
--------------------------------------------------------------------------------
/packages/react-ui/src/ui/notifications/Settings/Channels/model/useVerificationCode.ts:
--------------------------------------------------------------------------------
1 | import { AddressType, useNotificationChannel } from '@dialectlabs/react-sdk';
2 | import { useState } from 'react';
3 | export const useVerificationCode = (addressType: AddressType) => {
4 | const [verificationCode, setVerificationCode] = useState('');
5 | const [currentError, setCurrentError] = useState(null);
6 | const {
7 | verify,
8 | resend,
9 | isSendingCode,
10 | isVerifyingCode,
11 | delete: deleteAddr,
12 | } = useNotificationChannel({
13 | addressType,
14 | });
15 |
16 | const sendCode = async () => {
17 | try {
18 | await verify({ code: verificationCode });
19 | setCurrentError(null);
20 | } catch (e) {
21 | setCurrentError(e as Error);
22 | } finally {
23 | setVerificationCode('');
24 | }
25 | };
26 |
27 | const resendCode = async () => {
28 | try {
29 | await resend();
30 | setCurrentError(null);
31 | } catch (e) {
32 | setCurrentError(e as Error);
33 | }
34 | };
35 |
36 | const deleteAddress = async () => {
37 | try {
38 | await deleteAddr();
39 | setCurrentError(null);
40 | } catch (e) {
41 | setCurrentError(e as Error);
42 | }
43 | };
44 |
45 | return {
46 | verificationCode,
47 | setVerificationCode,
48 | sendCode,
49 | isSendingCode: isVerifyingCode,
50 | resendCode,
51 | isResendingCode: isSendingCode,
52 | deleteAddress,
53 | currentError,
54 | };
55 | };
56 |
--------------------------------------------------------------------------------
/packages/react-ui/src/ui/notifications/Settings/NotificationTypes.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useDialectContext,
3 | useNotificationSubscriptions,
4 | } from '@dialectlabs/react-sdk';
5 | import clsx from 'clsx';
6 | import { memo } from 'react';
7 | import { Checkbox } from '../../core';
8 | import { ClassTokens } from '../../theme';
9 |
10 | interface Props {
11 | title: string;
12 | description?: string;
13 | enabled: boolean;
14 | onChange: (newValue: boolean) => void;
15 | }
16 |
17 | const NotificationType = ({ title, description, enabled, onChange }: Props) => {
18 | return (
19 |
26 |
27 |
33 | {title}
34 |
35 | {description && (
36 |
42 | {description}
43 |
44 | )}
45 |
46 |
47 |
66 | {error &&
{error.message}
}
67 | {Boolean(notificationSubscriptions.length) && (
68 | <>
69 |
75 | Notification Type
76 |
77 | {notificationSubscriptions.map(
78 | ({ notificationType, subscription }) => (
79 |
{
85 | if (isUpdating) return;
86 | updateNotificationSubscription({
87 | notificationTypeId: notificationType.id,
88 | config: {
89 | ...subscription.config,
90 | enabled: value,
91 | },
92 | });
93 | }}
94 | />
95 | ),
96 | )}
97 |
98 | )}
99 | ) => ReactNode;
21 | }) => {
22 | const { dappAddress } = useDialectContext();
23 |
24 | const subscription = useNotificationChannelDappSubscription({
25 | addressType: AddressType.Wallet,
26 | dappAddress,
27 | });
28 |
29 | const { isFetching: isFetchingNotificationsSubscriptions } =
30 | useNotificationSubscriptions({ dappAddress });
31 |
32 | const isLoading =
33 | subscription.isFetchingSubscriptions ||
34 | isFetchingNotificationsSubscriptions;
35 |
36 | const { channels } = useExternalProps();
37 |
38 | return isLoading ? (
39 |
42 |
43 |
45 |
46 |
48 | {renderAdditionalSettingsUi?.({})}
49 |
50 |
59 |