feat: 🎸 Added "completed" status check to the migration page

Not it is possible to get to the "resolver" page from the migration page
for copleted DIDs

src/components/ProfileForm.tsx

@@ -53,7 +53,7 @@ export const buildStringOption = (
       : errors[scope]?.[option.name]?.message
     : errors[option.name]?.message;
   return (
-    <FormControl key={`str${option.name}${keyIndex}`}>
+    <FormControl key={`str${option.name}${keyIndex}`} sx={{ mb: 1 }}>
       <TextField
         {...register(fieldName, option.validation)}
         label={option.label}

src/components/ProfileImage.tsx

@@ -13,7 +13,9 @@ import {
   AspectRatio,
   Button,
   IconButton,
+  FormControl,
   FormLabel,
+  CircularProgress,
 } from '@mui/joy';
 import ImageIcon from '@mui/icons-material/Image';
 import UploadIcon from '@mui/icons-material/Upload';
@@ -41,7 +43,7 @@ export const CustomUploadButton = asUploadButton(
       {...props}
       ref={ref as never}
       startDecorator={<UploadIcon />}
-      loading={loading}
+      endDecorator={loading && <CircularProgress size="sm" />}
       disabled={loading}
     >
       Upload image
@@ -110,11 +112,11 @@ export const ImageCard = ({ onChange }: ImageCardProps) => {
 
 export const ProfileImage = ({ label, required, onChange, sx }: ProfileImageProps) => {
   return (
-    <Box sx={sx}>
+    <FormControl sx={sx}>
       <Uploady method="POST" destination={{ url: `${BE_URI}/api/file` }}>
         <FormLabel required={required}>{label}</FormLabel>
         <ImageCard onChange={onChange} />
       </Uploady>
-    </Box>
+    </FormControl>
   );
 };

src/config.ts

@@ -63,3 +63,5 @@ export const getChain = (chainId: string | number): ChainConfig => {
 };
 
 export const BE_URI = process.env.REACT_APP_BE_URI || '';
+
+export const POLLER_TIMEOUT = 3000;

src/hooks/usePoller.ts

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+
+export type PollerContextFunction = () => void | Promise<void>;
+
+export const usePoller = (
+  fn: PollerContextFunction,
+  enabled = true,
+  interval = 5000,
+  pollerName?: string,
+) => {
+  if (typeof fn !== 'function') {
+    throw new TypeError("Can't poll without a callback function");
+  }
+
+  return useEffect(() => {
+    let disabled = false;
+    let failures = 0;
+
+    const poll = async () => {
+      if (disabled || !enabled) {
+        return;
+      }
+
+      try {
+        await fn();
+      } catch (error) {
+        failures++;
+      }
+
+      if (failures < 100) {
+        setTimeout(poll, interval);
+      }
+    };
+
+    if (enabled) {
+      poll();
+    }
+
+    return () => {
+      disabled = true;
+      failures = 0;
+    };
+  }, [fn, enabled, interval, pollerName]);
+};

src/pages/Migrate.tsx

@@ -1,6 +1,6 @@
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { useAccount } from 'wagmi';
-import { CircularProgress, IconButton, List, Box } from '@mui/joy';
+import { Button, List, ListItemContent, Box } from '@mui/joy';
 import { useNavigate } from 'react-router-dom';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import UpdateIcon from '@mui/icons-material/Update';
@@ -9,18 +9,21 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import { Dids } from '../common/types';
 import { useApi } from '../hooks/useApi';
 import { HttpStatusCode } from '../hooks/useApi';
+import { usePoller } from '../hooks/usePoller';
 import { RequireConnect } from '../components/RequireConnect';
 import { Message } from '../components/Message';
 import { EllipsisListButton } from '../components/EllipsisListButton';
+import { POLLER_TIMEOUT } from '../config';
 
-export const StatusIcons = ({ state }: { state: string }) => {
-  const icons = {
-    ready: null,
-    requested: <UpdateIcon sx={{ ml: 1 }} />,
-    progress: <UpdateIcon sx={{ ml: 1 }} />,
-    failed: <ErrorIcon sx={{ ml: 1 }} />,
-    completed: <CheckCircleOutlineIcon sx={{ ml: 1 }} />,
-  };
+const icons = {
+  ready: null,
+  requested: <UpdateIcon color="info" sx={{ ml: 1 }} />,
+  progress: <UpdateIcon color="action" sx={{ ml: 1 }} />,
+  failed: <ErrorIcon color="error" sx={{ ml: 1 }} />,
+  completed: <CheckCircleOutlineIcon color="success" sx={{ ml: 1 }} />,
+};
+
+export const StatusIcon = ({ state }: { state: string }) => {
   if (!state) {
     return null;
   }
@@ -35,6 +38,7 @@ export const Migrate = () => {
     `api/dids/${address}`,
     address !== undefined,
   );
+  usePoller(reload, address !== undefined, POLLER_TIMEOUT, 'Check DIDs');
 
   if (!address) {
     return <RequireConnect />;
@@ -47,26 +51,39 @@ export const Migrate = () => {
           <ConnectButton />
         </Box>
         <Box>
-          <IconButton onClick={reload} disabled={loading}>
+          <Button variant="soft" onClick={reload} loading={loading} disabled={loading}>
             <RefreshIcon />
-          </IconButton>
+          </Button>
         </Box>
       </Box>
-      {loading && <CircularProgress size="md" />}
       <Message type="warn" show={address !== undefined && loaded && !data}>
         It seems that account {address} does not own any ORGiDs
       </Message>
       {data && (
         <List>
           {data.map((d, index) => (
-            <EllipsisListButton
+            <ListItemContent
               key={index}
-              disabled={d.state !== 'ready'}
-              onClick={() => navigate(`migrate/${d.did}`)}
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 1,
+                alignItems: 'center',
+                maxWidth: 500,
+              }}
             >
-              {d.did}
-              <StatusIcons state={d.state} />
-            </EllipsisListButton>
+              <EllipsisListButton
+                disabled={!['ready', 'completed'].includes(d.state)}
+                onClick={() =>
+                  navigate(
+                    d.state === 'completed' ? `resolve/${d.did}` : `migrate/${d.did}`,
+                  )
+                }
+              >
+                {d.did}
+              </EllipsisListButton>
+              <StatusIcon state={d.state} />
+            </ListItemContent>
           ))}
         </List>
       )}

src/pages/Profile.tsx

@@ -10,6 +10,7 @@ import {
   Typography,
   CircularProgress,
   Box,
+  FormControl,
   FormLabel,
   Select,
   Option,
@@ -155,6 +156,11 @@ export const MigrationConfirmation = ({
           {chainName}
         </Typography>
 
+        <Typography sx={{ mb: 2 }}>
+          Migration process does not require any payments. All expenses will be paid by
+          WindingTree.
+        </Typography>
+
         <Message type="error" show={vcError !== undefined} sx={{ mb: 2 }}>
           {vcError}
         </Message>
@@ -186,8 +192,8 @@ export const MigrationConfirmation = ({
 };
 
 export const Profile = () => {
-  const chainRef = useRef();
-  const logoRef = useRef();
+  const chainRef = useRef(null);
+  const logoRef = useRef(null);
   const ctx = useContext(profileContext);
   const navigate = useNavigate();
   const { address } = useAccount();
@@ -274,7 +280,7 @@ export const Profile = () => {
 
       {loading && <CircularProgress size="md" />}
 
-      <Box sx={{ mb: 2 }} ref={chainRef}>
+      <FormControl sx={{ mb: 1 }} ref={chainRef}>
         <FormLabel required>Target chain</FormLabel>
         <Select
           placeholder="Please choose a target chain Id"
@@ -295,9 +301,9 @@ export const Profile = () => {
             sx={{ mt: 1 }}
           />
         )}
-      </Box>
+      </FormControl>
 
-      <Box ref={logoRef} />
+      <div ref={logoRef} />
       <ProfileImage label="Logotype" required onChange={setLogotype} sx={{ mb: 2 }} />
       {!logotype && (
         <Message