accounts context (#83)

* accounts context * fixes
RegionX-Labs · Apr 24, 2024 · d2468fa · d2468fa
1 parent 71d8b6d
commit d2468fa
Show file tree

Hide file tree

Showing 19 changed files with 220 additions and 158 deletions.
diff --git a/package.json b/package.json
@@ -19,12 +19,13 @@
     "@mui/lab": "5.0.0-alpha.134",
     "@mui/material": "^5.15.14",
     "@mui/x-date-pickers": "^6.19.5",
-    "@polkadot/api": "^10.12.6",
-    "@polkadot/api-contract": "^10.13.1",
-    "@polkadot/extension-inject": "^0.46.4",
-    "@polkadot/types": "^10.12.6",
-    "@polkadot/util": "^12.3.1",
-    "@scio-labs/use-inkathon": "^0.0.1-alpha.44",
+    "@polkadot/api": "latest",
+    "@polkadot/api-contract": "latest",
+    "@polkadot/extension-dapp": "latest",
+    "@polkadot/extension-inject": "latest",
+    "@polkadot/types": "latest",
+    "@polkadot/ui-keyring": "latest",
+    "@polkadot/util": "latest",
     "@types/humanize-duration": "^3.27.3",
     "clsx": "^1.1.1",
     "coretime-utils": "^0.2.8",

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -7,24 +7,27 @@ import {
   ListItemButton,
   useTheme,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import React, { useState } from 'react';
 
+import { KeyringState, useAccounts } from '@/contexts/account';
+
 import styles from './index.module.scss';
-import { ActionButton } from '../Elements';
-import { WalletModal } from '../Modals/WalletConnect';
+import { ProgressButton } from '../Elements';
 
 export const Header = () => {
   const theme = useTheme();
+  const {
+    state: { accounts, activeAccount, status },
+    setActiveAccount,
+    disconnectWallet,
+    connectWallet,
+  } = useAccounts();
 
-  const { activeAccount, disconnect, accounts, setActiveAccount } =
-    useInkathon();
   const [accountsOpen, openAccounts] = useState(false);
-  const [walletModalOpen, openWalletModal] = useState(false);
 
   const onDisconnect = () => {
     openAccounts(false);
-    disconnect && disconnect();
+    disconnectWallet();
   };
 
   return (
@@ -49,7 +52,7 @@ export const Header = () => {
                     borderRadius: 4,
                   }}
                 >
-                  {activeAccount.name}
+                  {`${activeAccount.meta.name}(${activeAccount.meta.source})`}
                   <ExpandMore />
                 </ListItemButton>
               )}
@@ -70,15 +73,15 @@ export const Header = () => {
                         <ListItemButton
                           key={index}
                           onClick={() => {
-                            setActiveAccount && setActiveAccount(account);
+                            setActiveAccount(account);
                             openAccounts(false);
                           }}
                           sx={{
                             borderRadius: '0.5rem',
                             background: theme.palette.grey['100'],
                           }}
                         >
-                          {account.name}
+                          {`${account.meta.name}(${account.meta.source})`}
                         </ListItemButton>
                       )
                   )}
@@ -96,17 +99,14 @@ export const Header = () => {
               </Collapse>
             </List>
           ) : (
-            <ActionButton
-              onClick={() => openWalletModal(true)}
+            <ProgressButton
+              onClick={() => connectWallet()}
               label='Connect Wallet'
+              loading={status === KeyringState.LOADING}
             />
           )}
         </Box>
       </Box>
-      <WalletModal
-        open={walletModalOpen}
-        onClose={() => openWalletModal(false)}
-      />
     </>
   );
 };
diff --git a/src/components/Modals/Interlace/index.tsx b/src/components/Modals/Interlace/index.tsx
@@ -11,12 +11,12 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { CoreMask } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
 import { RegionCard } from '@/components/Elements';
 
+import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
@@ -36,7 +36,9 @@ export const InterlaceModal = ({
   regionMetadata,
 }: InterlaceModalProps) => {
   const theme = useTheme();
-  const { activeAccount, activeSigner } = useInkathon();
+  const {
+    state: { activeAccount, activeSigner },
+  } = useAccounts();
 
   const {
     state: { api },
@@ -94,7 +96,7 @@ export const InterlaceModal = ({
   };
 
   useEffect(() => {
-    setPosition(oneStart);
+    open && setPosition(oneStart);
   }, [open, oneStart]);
 
   return (

diff --git a/src/components/Modals/Partition/index.tsx b/src/components/Modals/Partition/index.tsx
@@ -11,11 +11,11 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { useEffect, useState } from 'react';
 
 import { RegionCard } from '@/components/Elements';
 
+import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useCommon } from '@/contexts/common';
 import { useRegions } from '@/contexts/regions';
@@ -59,7 +59,9 @@ export const PartitionModal = ({
     },
   ];
 
-  const { activeSigner, activeAccount } = useInkathon();
+  const {
+    state: { activeSigner, activeAccount },
+  } = useAccounts();
 
   const theme = useTheme();
   const {

diff --git a/src/components/Modals/Purchase/index.tsx b/src/components/Modals/Purchase/index.tsx
@@ -6,11 +6,11 @@ import {
   DialogContent,
   Stack,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { useState } from 'react';
 
 import { ListingCard } from '@/components/Elements/ListingCard';
 
+import { useAccounts } from '@/contexts/account';
 import { useToast } from '@/contexts/toast';
 import { Listing } from '@/models';
 
@@ -25,22 +25,23 @@ export const PurchaseModal = ({
   onClose,
   listing,
 }: PurchaseModalProps) => {
-  const { activeAccount, api } = useInkathon();
+  const {
+    state: { activeAccount },
+  } = useAccounts();
 
   const { toastError, toastSuccess } = useToast();
 
   const [working, setWorking] = useState(false);
 
   const purchaseRegion = async () => {
-    if (!api || !activeAccount) {
+    if (!activeAccount) {
       return;
     }
 
     try {
       setWorking(true);
 
-      // TODO
-
+      // TODO:
       toastSuccess(`Successfully purchased region from sale.`);
       onClose();
       setWorking(false);

diff --git a/src/components/Modals/Sell/index.tsx b/src/components/Modals/Sell/index.tsx
@@ -8,13 +8,13 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
 import { AmountInput, RegionCard } from '@/components/Elements';
 import { RecipientSelector } from '@/components/Elements/Selectors/RecipientSelector';
 
+import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
@@ -31,7 +31,9 @@ export const SellModal = ({
   onClose,
   regionMetadata,
 }: SellModalProps) => {
-  const { activeAccount, api } = useInkathon();
+  const {
+    state: { activeAccount },
+  } = useAccounts();
   const {
     state: { symbol },
   } = useCoretimeApi();
@@ -55,14 +57,14 @@ export const SellModal = ({
   };
 
   const approveXcRegion = async (_region: Region) => {
-    if (!api || !activeAccount) {
+    if (!activeAccount) {
       return;
     }
 
     try {
       setWorking(true);
 
-      // TODO
+      // TODO:
 
       toastSuccess(`Successfully approved region to the market.`);
       setWorking(false);
@@ -77,7 +79,7 @@ export const SellModal = ({
   };
 
   const listRegion = async (_region: Region) => {
-    if (!api || !activeAccount) {
+    if (!activeAccount) {
       return;
     }
 

diff --git a/src/components/Modals/TaskAssign/index.tsx b/src/components/Modals/TaskAssign/index.tsx
@@ -12,11 +12,11 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { useEffect, useState } from 'react';
 
 import { RegionCard } from '@/components/Elements';
 
+import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useTasks } from '@/contexts/tasks';
@@ -34,7 +34,9 @@ export const TaskAssignModal = ({
   onClose,
   regionMetadata,
 }: TaskAssignModalProps) => {
-  const { activeAccount, activeSigner } = useInkathon();
+  const {
+    state: { activeAccount, activeSigner },
+  } = useAccounts();
 
   const { paraIds } = useRelayApi();
   const {

diff --git a/src/components/Modals/Transfer/index.tsx b/src/components/Modals/Transfer/index.tsx
@@ -9,14 +9,14 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
 import { transferRegionOnCoretimeChain } from '@/utils/native/transfer';
 
 import { RegionCard } from '@/components/Elements';
 
+import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
@@ -33,7 +33,9 @@ export const TransferModal = ({
   onClose,
   regionMetadata,
 }: TransferModalProps) => {
-  const { activeAccount, activeSigner } = useInkathon();
+  const {
+    state: { activeAccount, activeSigner },
+  } = useAccounts();
 
   const { fetchRegions } = useRegions();
   const { toastError, toastInfo, toastSuccess } = useToast();

diff --git a/src/components/Modals/Unlist/index.tsx b/src/components/Modals/Unlist/index.tsx
@@ -6,12 +6,12 @@ import {
   DialogContent,
   Stack,
 } from '@mui/material';
-import { useInkathon } from '@scio-labs/use-inkathon';
 import { Region } from 'coretime-utils';
 import { useState } from 'react';
 
 import { RegionCard } from '@/components/Elements';
 
+import { useAccounts } from '@/contexts/account';
 import { useMarket } from '@/contexts/market';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
@@ -28,7 +28,9 @@ export const UnlistModal = ({
   onClose,
   regionMetadata,
 }: UnlistModalProps) => {
-  const { activeAccount, api } = useInkathon();
+  const {
+    state: { activeAccount },
+  } = useAccounts();
 
   const { fetchRegions } = useRegions();
   const { fetchMarket } = useMarket();
@@ -37,7 +39,7 @@ export const UnlistModal = ({
   const [working, setWorking] = useState(false);
 
   const unlistRegion = async (_region: Region) => {
-    if (!api || !activeAccount) {
+    if (!activeAccount) {
       return;
     }
 

diff --git a/src/components/Modals/WalletConnect/index.module.scss b/src/components/Modals/WalletConnect/index.module.scss