[Issue-223][Mythical Telegram App] Up ui and handle navigate

Koniverse · Dec 12, 2024 · f35411c · f35411c
1 parent ba6a371
commit f35411c
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 20 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/MissionTemp/MissionSectionListContainer.tsx b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/MissionSectionListContainer.tsx
@@ -113,7 +113,7 @@ const Component = ({ accountInfo,
   const { isLinkedMyth, linkMythAccount, mythicalWallet } = useContext(AuthenticationMythContext);
   const { currentAccount } = useSelector((state: RootState) => state.accountState);
   const doLinkAccount = useCallback(() => {
-    currentAccount?.address && linkMythAccount().catch(console.error);
+    currentAccount?.address && linkMythAccount('/home/mission').catch(console.error);
   }, [currentAccount?.address, linkMythAccount]);
 
   const getTaskStatusText = useCallback((task: Task) => {

diff --git a/packages/extension-koni-ui/src/Popup/Home/MyProfile/index.tsx b/packages/extension-koni-ui/src/Popup/Home/MyProfile/index.tsx
@@ -31,7 +31,7 @@ const Component = ({ className }: Props): React.ReactElement => {
   const [loading, setLoading] = useState(false);
   const [mineAccount, setMineAccount] = useState<BookaAccount | undefined>(apiSDK.account);
   const doLinkAccount = useCallback(() => {
-    currentAccount?.address && linkMythAccount().catch(console.error);
+    currentAccount?.address && linkMythAccount('/home/my-profile').catch(console.error);
   }, [currentAccount?.address, linkMythAccount]);
 
   const openAppStoreLink = useCallback(() => {

diff --git a/packages/extension-koni-ui/src/Popup/Root.tsx b/packages/extension-koni-ui/src/Popup/Root.tsx
@@ -8,7 +8,7 @@ import { Logo2D } from '@subwallet/extension-koni-ui/components/Logo';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { AUTHENTICATE_LOGOUT_REDIRECT, AUTHENTICATE_REDIRECT_URI, AUTHORIZATION_ENDPOINT, CLIENT_ID, LOGOUT_ENDPOINT, TOKEN_ENDPOINT, TRANSACTION_STORAGES } from '@subwallet/extension-koni-ui/constants';
 import { DEFAULT_ROUTER_PATH } from '@subwallet/extension-koni-ui/constants/router';
-import { AuthenticationMythProvider, LOCAL_LOGGED_IN_PROMISE_KEY } from '@subwallet/extension-koni-ui/contexts/AuthenticationMythProvider';
+import { AuthenticationMythProvider, LOCAL_LOGGED_IN_PROMISE_KEY, LOCAL_NAVIGATE_AFTER_LOGIN_KEY } from '@subwallet/extension-koni-ui/contexts/AuthenticationMythProvider';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import { SecurityContextProvider } from '@subwallet/extension-koni-ui/contexts/SecurityContext';
 import { usePredefinedModal, WalletModalContextProvider } from '@subwallet/extension-koni-ui/contexts/WalletModalContextProvider';
@@ -242,13 +242,15 @@ function DefaultRoute ({ children }: { children: React.ReactNode }): React.React
     }
 
     const loginPromise = localStorage.getItem(LOCAL_LOGGED_IN_PROMISE_KEY) || '';
+    const pathAfterLogin = localStorage.getItem(LOCAL_NAVIGATE_AFTER_LOGIN_KEY);
 
     if (loginPromise === 'login') {
-      redirectTarget = myProfileUrl;
+      redirectTarget = pathAfterLogin || myProfileUrl;
       localStorage.setItem(LOCAL_LOGGED_IN_PROMISE_KEY, 'logged');
     } else if (loginPromise === 'logout') {
       localStorage.removeItem(LOCAL_LOGGED_IN_PROMISE_KEY);
-      redirectTarget = myProfileUrl;
+      localStorage.removeItem(LOCAL_NAVIGATE_AFTER_LOGIN_KEY);
+      redirectTarget = pathAfterLogin || myProfileUrl;
     }
 
     // Remove loading on finished first compute

diff --git a/packages/extension-koni-ui/src/components/Modal/Common/AlertModal.tsx b/packages/extension-koni-ui/src/components/Modal/Common/AlertModal.tsx
@@ -144,9 +144,10 @@ const Component: React.FC<Props> = (props: Props) => {
 const AlertModal = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return {
     '.ant-sw-modal-body': {
-      paddingBottom: token.paddingXXS,
-      paddingLeft: token.paddingXS,
-      paddingRight: token.paddingXS
+      margin: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+      paddingBottom: 4
     },
 
     '.ant-sw-modal-footer': {
@@ -156,7 +157,9 @@ const AlertModal = styled(Component)<Props>(({ theme: { extendToken, token } }:
     },
 
     '.ant-sw-header-center-part': {
-      position: 'relative'
+      position: 'relative',
+      marginLeft: 0,
+      marginRight: 0
     },
 
     '.ant-sw-sub-header-title-content.ant-sw-sub-header-title-content.ant-sw-sub-header-title-content': {
@@ -165,13 +168,14 @@ const AlertModal = styled(Component)<Props>(({ theme: { extendToken, token } }:
       fontFamily: extendToken.fontPermanentMarker,
       fontWeight: 400,
       lineHeight: '40px',
+      fontSize: 32,
       textTransform: 'uppercase',
       'white-space': 'normal'
     },
 
     '.ant-sw-modal-content.ant-sw-modal-content': {
       borderRadius: 0,
-      paddingTop: 24,
+      paddingTop: 27,
       backgroundImage: 'url(/images/mythical/alert-modal-bg.png)',
       backgroundSize: '100% 100%',
       backgroundRepeat: 'no-repeat',
@@ -188,10 +192,9 @@ const AlertModal = styled(Component)<Props>(({ theme: { extendToken, token } }:
       lineHeight: '18px',
       textAlign: 'center',
       letterSpacing: 0.32,
-      paddingLeft: 52,
-      paddingRight: 52
-      // paddingBottom: 32,
-      // borderRadius: 24
+      paddingLeft: 22,
+      paddingRight: 22,
+      fontWeight: 400
     },
 
     '.__buttons-container': {
@@ -267,6 +270,10 @@ const AlertModal = styled(Component)<Props>(({ theme: { extendToken, token } }:
       }
     },
 
+    '.anticon': {
+      fontSize: '24px !important'
+    },
+
     '.__alert-icon': {
       display: 'flex',
       justifyContent: 'center',

diff --git a/packages/extension-koni-ui/src/contexts/AuthenticationMythProvider.tsx b/packages/extension-koni-ui/src/contexts/AuthenticationMythProvider.tsx
@@ -20,16 +20,17 @@ export interface AuthenticationMythContextProps {
   account?: AccountPublicInfo;
   isLinkedMyth: boolean;
   mythicalWallet: MythicalWallet;
-  linkMythAccount: () => Promise<void>;
+  linkMythAccount: (path: string) => Promise<void>;
   onLogin: VoidFunction;
   onLogout: () => Promise<void>;
 }
 
 export const LOCAL_LOGGED_IN_PROMISE_KEY = 'mythical_logged_in_promise';
+export const LOCAL_NAVIGATE_AFTER_LOGIN_KEY = 'mythical_navigate_after_login';
 
 export const AuthenticationMythContext = createContext<AuthenticationMythContextProps>({
   isLinkedMyth: false,
-  linkMythAccount: () => Promise.resolve(),
+  linkMythAccount: (path: string) => Promise.resolve(),
   mythicalWallet: { address: '', balanceInMyth: '' } as MythicalWallet,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   onLogin: () => {},
@@ -124,13 +125,17 @@ export const AuthenticationMythProvider = ({ children }: AuthenticationMythProvi
     }
   }, [authContext.token, tokenData?.email]);
 
-  const linkMythAccount = useCallback(async () => {
+  const linkMythAccount = useCallback(async (path: string) => {
     if (!tokenData?.email || !authContext.token) {
+      if (path) {
+        localStorage.setItem(LOCAL_NAVIGATE_AFTER_LOGIN_KEY, path);
+      }
+
       onLoginWithMythAccount();
     }
 
     await onSubmitMythAccount();
-  }, [authContext.token, onLoginWithMythAccount, onSubmitMythAccount, tokenData?.email]);
+  }, [authContext, onLoginWithMythAccount, onSubmitMythAccount, tokenData]);
 
   const onLogin = useCallback(() => {
     onLoginWithMythAccount();

diff --git a/packages/webapp/public/assets/reset.css b/packages/webapp/public/assets/reset.css
@@ -650,8 +650,8 @@ div#popup-container {
 
 .ant-sw-modal .ant-sw-header-container-center .ant-sw-header-center-part {
     width: auto;
-    margin-left: 48px;
-    margin-right: 48px;
+    /*margin-left: 48px;*/
+    /*margin-right: 48px;*/
 }
 
 .ant-sw-sub-header-title-content {