Merge remote-tracking branch 'refs/remotes/origin/koni/dev/mythical-d…

…ev' into koni/dev/mythical-dev
Koniverse · Oct 25, 2024 · ea554b7 · ea554b7
2 parents 835ee77 + 34ad7cd
commit ea554b7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/MyProfile/LinkAccountArea.tsx b/packages/extension-koni-ui/src/Popup/Home/MyProfile/LinkAccountArea.tsx
@@ -9,9 +9,10 @@ import styled from 'styled-components';
 
 type Props = ThemeProps & {
   isLinked?: boolean;
+  doLinkAccount?: VoidFunction;
 };
 
-const Component = ({ className, isLinked }: Props): React.ReactElement => {
+const Component = ({ className, doLinkAccount, isLinked }: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   return (
@@ -40,7 +41,10 @@ const Component = ({ className, isLinked }: Props): React.ReactElement => {
 
       {
         !isLinked && (
-          <MythButton className={'__linked-account-button __button'}>
+          <MythButton
+            className={'__linked-account-button __button'}
+            onClick={doLinkAccount}
+          >
             {t('Link mythical account')}
           </MythButton>
         )

diff --git a/packages/extension-koni-ui/src/Popup/Home/MyProfile/index.tsx b/packages/extension-koni-ui/src/Popup/Home/MyProfile/index.tsx
@@ -4,7 +4,7 @@
 import { MainScreenHeader } from '@subwallet/extension-koni-ui/components/Mythical';
 import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 import { AccountEditorArea } from './AccountEditorArea';
@@ -17,11 +17,21 @@ type Props = ThemeProps;
 const Component = ({ className }: Props): React.ReactElement => {
   useSetCurrentPage('/home/my-profile');
 
+  const [isAccountLinked, setIsAccountLinked] = useState<boolean>(false);
+
+  const doLinkAccount = useCallback(() => {
+    setIsAccountLinked(true);
+  }, []);
+
   return (
     <div className={className}>
       <MainScreenHeader />
       <AccountEditorArea className={'account-editor-area'} />
-      <LinkAccountArea className={'link-account-area'} />
+      <LinkAccountArea
+        className={'link-account-area'}
+        doLinkAccount={doLinkAccount}
+        isLinked={isAccountLinked}
+      />
       <WalletInfoArea className={'wallet-info-area'} />
       <RewardHistoryArea className={'reward-history-area'} />
     </div>