@rango-dev/widget-embedded 0.24.2-next.1 → 0.24.2-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.24.2-next.1",
+  "version": "0.24.2-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react';
 
 import { useManager } from '@rango-dev/queue-manager-react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
 import { useIframe } from '../../hooks/useIframe';
@@ -20,6 +20,7 @@ import { isFeatureHidden } from '../../utils/settings';
 import { ActivateTabAlert } from '../common/ActivateTabAlert';
 import { ActivateTabModal } from '../common/ActivateTabModal';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
+import { RefreshModal } from '../RefreshModal';
 
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import { Container, Content, Footer, LayoutContainer } from './Layout.styles';
@@ -27,6 +28,8 @@ import { Container, Content, Footer, LayoutContainer } from './Layout.styles';
 function Layout(props: PropsWithChildren<PropTypes>) {
   const { connectHeightObserver, disconnectHeightObserver } = useIframe();
   const { children, header, footer, height = 'fixed' } = props;
+  const { fetchStatus } = useAppStore();
+  const [openRefreshModal, setOpenRefreshModal] = useState(false);
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
@@ -94,6 +97,10 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     };
   }, []);
 
+  useEffect(() => {
+    setOpenRefreshModal(fetchStatus === 'failed');
+  }, [fetchStatus]);
+
   return (
     <Container
       height={height}
@@ -156,6 +163,10 @@ function Layout(props: PropsWithChildren<PropTypes>) {
           <BottomLogo />
         </div>
       </Footer>
+      <RefreshModal
+        open={openRefreshModal}
+        onClose={() => setOpenRefreshModal(false)}
+      />
     </Container>
   );
 }

package/src/components/RefreshModal/RefreshModal.styles.ts

@@ -0,0 +1,9 @@
+import { Button, styled } from '@rango-dev/ui';
+
+export const RefreshButton = styled(Button, {
+  '& span': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/RefreshModal/RefreshModal.tsx

@@ -0,0 +1,39 @@
+import type { PropTypes } from './RefreshModal.types';
+
+import { i18n } from '@lingui/core';
+import { Divider, MessageBox, RefreshIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { RefreshButton } from './RefreshModal.styles';
+
+export function RefreshModal(props: PropTypes) {
+  const { open, onClose } = props;
+
+  return (
+    <WatermarkedModal
+      open={open}
+      dismissible
+      onClose={onClose}
+      container={getContainer()}>
+      <MessageBox
+        title={i18n.t('Something wrong')}
+        type="error"
+        description={i18n.t('Something Wrong. Please refresh the app')}>
+        <Divider size={30} />
+        <RefreshButton
+          variant="outlined"
+          size="large"
+          type="primary"
+          fullWidth
+          onClick={() => location.reload()}>
+          <RefreshIcon size={20} color="primary" />
+          <Divider size={4} direction="horizontal" />
+          {i18n.t('Refresh')}
+        </RefreshButton>
+      </MessageBox>
+    </WatermarkedModal>
+  );
+}

package/src/components/RefreshModal/RefreshModal.types.ts

@@ -0,0 +1,4 @@
+export type PropTypes = {
+  open: boolean;
+  onClose: () => void;
+};

package/src/components/RefreshModal/index.ts

@@ -0,0 +1 @@
+export { RefreshModal } from './RefreshModal';