Improve UX for WalletConnect (#8)

* Wallet Connect modal z-index * Handle wallet connect errors * Specify desired resolution order * Bump CI * Update Dockerfile * Fix additional zIndex issues * Account button wrapping fix
unstoppabledomains · Oct 23, 2023 · 6717fec · 6717fec
1 parent 9d5966a
commit 6717fec
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 16 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -16,6 +16,7 @@ ENV APP_ENV $APP_ENV
 ENV APP_VERSION $APP_VERSION
 ENV CLIENT_URL $CLIENT_URL
 ENV NEXT_TELEMETRY_DISABLED 1
+ENV YARN_IGNORE_NODE 1
 
 # Prepare dependencies
 RUN install_node v16.13.0
@@ -43,6 +44,7 @@ FROM launcher.gcr.io/google/nodejs
 # Runtime environment variables
 ARG service
 ENV NEXT_TELEMETRY_DISABLED 1
+ENV YARN_IGNORE_NODE 1
 
 # Runtime dependencies
 RUN install_node v16.13.0

diff --git a/packages/config/src/env/default.ts b/packages/config/src/env/default.ts
@@ -41,6 +41,8 @@ export default function getDefaultConfig(): Config {
         OPEN_SEA_BASE_URL: 'https://testnets.opensea.io/assets/mumbai/',
       },
     },
+    UD_LOGO_URL:
+      'https://storage.googleapis.com/unstoppable-client-assets/images/favicon/favicon-v3.ico',
     UD_ME_BASE_URL: 'https://ud.me',
     UNSTOPPABLE_WEBSITE_URL: 'https://www.ud-staging.com',
     UNSTOPPABLE_API_URL: 'https://api.ud-staging.com',

diff --git a/packages/config/src/env/types.ts b/packages/config/src/env/types.ts
@@ -44,6 +44,7 @@ export type Config = {
   };
   ASSETS_BUCKET_URL: string;
   UD_ME_BASE_URL: string;
+  UD_LOGO_URL: string;
   UNSTOPPABLE_WEBSITE_URL: string;
   UNSTOPPABLE_API_URL: string;
   UNSTOPPABLE_METADATA_ENDPOINT: string;

diff --git a/server/actions/domainActions.ts b/server/actions/domainActions.ts
@@ -54,9 +54,12 @@ export const getEnsDomainStatus = async (
 export const getReverseResolution = async (
   address: string,
 ): Promise<string | undefined> => {
-  const resolutionResponse = await fetchApi(`/resolve/${address}`, {
-    host: config.PROFILE.HOST_URL,
-  });
+  const resolutionResponse = await fetchApi(
+    `/resolve/${address}?resolutionOrder=ud,ens`,
+    {
+      host: config.PROFILE.HOST_URL,
+    },
+  );
   return resolutionResponse?.name;
 };
 

diff --git a/server/components/Chat/UnstoppableMessaging.tsx b/server/components/Chat/UnstoppableMessaging.tsx
@@ -494,6 +494,8 @@ export const UnstoppableMessaging: React.FC<UnstoppableMessagingProps> = ({
       }
     } catch (e) {
       notifyError(e);
+      setConfigState(ConfigurationState.Error);
+      return;
     }
 
     // remove the modal from view
@@ -879,7 +881,9 @@ export const UnstoppableMessaging: React.FC<UnstoppableMessagingProps> = ({
         onClose={() => setWalletModalIsOpen(false)}
       />
       <SetupModal
-        disabled={chatWalletConnected}
+        disabled={
+          chatWalletConnected && configState !== ConfigurationState.Error
+        }
         domain={domain}
         isNewUser={signatureInProgress === MessagingSignatureType.NewUser}
         isNewNotification={

diff --git a/server/components/Chat/modal/ChatModal.tsx b/server/components/Chat/modal/ChatModal.tsx
@@ -65,7 +65,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '450px',
     height: '600px',
     margin: theme.spacing(1),
-    zIndex: 100,
+    zIndex: 200,
     [theme.breakpoints.down('sm')]: {
       width: '100%',
       height: '100%',

diff --git a/server/components/Chat/modal/SetupModal.tsx b/server/components/Chat/modal/SetupModal.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import ForumOutlinedIcon from '@mui/icons-material/ForumOutlined';
 import LocalGasStationIcon from '@mui/icons-material/LocalGasStationOutlined';
 import LockIcon from '@mui/icons-material/LockOutlined';
@@ -101,6 +102,13 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '65px',
     height: '65px',
   },
+  errorIcon: {
+    color: theme.palette.error.main,
+    marginTop: theme.spacing(5),
+    marginBottom: theme.spacing(1),
+    width: '65px',
+    height: '65px',
+  },
   bold: {
     color: theme.palette.neutralShades[600],
     fontWeight: 600,
@@ -232,11 +240,13 @@ export const SetupModal: React.FC<SetupModalProps> = ({
               </Box>
             )
           )}
-          {disabled && configState !== ConfigurationState.Complete && (
-            <Box className={classes.loadingContainer}>
-              <CircularProgress size="50px" />
-            </Box>
-          )}
+          {disabled &&
+            configState !== ConfigurationState.Complete &&
+            configState !== ConfigurationState.Error && (
+              <Box className={classes.loadingContainer}>
+                <CircularProgress size="50px" />
+              </Box>
+            )}
           {configState === ConfigurationState.Complete && (
             <Box className={classes.loadingContainer}>
               <CheckCircleOutlineOutlinedIcon className={classes.successIcon} />
@@ -251,6 +261,20 @@ export const SetupModal: React.FC<SetupModalProps> = ({
               </Typography>
             </Box>
           )}
+          {configState === ConfigurationState.Error && (
+            <Box className={classes.loadingContainer}>
+              <ErrorOutlineIcon className={classes.errorIcon} />
+              <Typography variant="subtitle2" className={classes.infoTitle}>
+                {t('push.setup.error')}
+              </Typography>
+              <Typography
+                variant="body2"
+                className={cx(classes.infoBody, classes.successText)}
+              >
+                {t('push.setup.errorDescription')}
+              </Typography>
+            </Box>
+          )}
         </Box>
         <Box className={classes.buttonContainer}>
           {configState === ConfigurationState.Complete ? (

diff --git a/server/components/Chat/protocol/xmtp.ts b/server/components/Chat/protocol/xmtp.ts
@@ -23,6 +23,7 @@ import {
 import type {Signer} from 'ethers';
 import {sha256} from 'ethers/lib/utils';
 import {filesize} from 'filesize';
+import {notifyError} from 'lib/error';
 import {Web3Storage} from 'web3.storage';
 
 import config from '@unstoppabledomains/config';
@@ -173,7 +174,8 @@ export const initXmtpAccount = async (address: string, signer: Signer) => {
     );
     await conversation.send(`GM from Unstoppable Domains 👋`);
   } catch (e) {
-    console.log('error creating xmtp user', e);
+    notifyError(e);
+    throw e;
   }
 };
 

diff --git a/server/components/Chat/types.ts b/server/components/Chat/types.ts
@@ -13,6 +13,7 @@ export enum ConfigurationState {
   RegisterXmtp = 'xmtp',
   QuerySubscriptions = 'query',
   Complete = 'complete',
+  Error = 'error',
 }
 
 export enum TabType {

diff --git a/server/components/Header/AccountButton.tsx b/server/components/Header/AccountButton.tsx
@@ -61,13 +61,16 @@ const useStyles = makeStyles()((theme: Theme) => ({
   domainName: {
     maxWidth: '300px',
     overflow: 'hidden',
-    wordBreak: 'break-word',
-    [theme.breakpoints.down('sm')]: {
-      maxWidth: '220px',
+    whiteSpace: 'nowrap',
+    [theme.breakpoints.down('md')]: {
+      display: 'none',
     },
   },
   expandMore: {
     marginLeft: '10px',
+    [theme.breakpoints.down('md')]: {
+      marginLeft: 0,
+    },
   },
 }));
 

diff --git a/server/components/Wallet/AccessEthereum.tsx b/server/components/Wallet/AccessEthereum.tsx
@@ -110,7 +110,7 @@ const AccessEthereum: React.FC<AccessEthereumProps> = ({
           {t('auth.moreInfo')}{' '}
           <Link
             external
-            to="https://support.unstoppabledomains.com/support/solutions/articles/48001181696-claim-your-domain"
+            to="https://unstoppabledomains.com/learn/web3-terms-101"
           >
             {t('common.guide')}.
           </Link>

diff --git a/server/components/Wallet/AccessWallet.tsx b/server/components/Wallet/AccessWallet.tsx
@@ -72,6 +72,17 @@ const AccessWallet = (props: Props) => {
         chains,
         options: {
           projectId: config.WALLETCONNECT_PROJECT_ID,
+          qrModalOptions: {
+            themeVariables: {
+              '--wcm-z-index': '100000',
+            },
+          },
+          metadata: {
+            name: t('nftCollection.unstoppableDomains'),
+            description: t('nftCollection.unstoppableDomainsDescription'),
+            url: config.UD_ME_BASE_URL,
+            icons: [config.UD_LOGO_URL],
+          },
         },
       }),
       new CoinbaseWalletConnector({

diff --git a/server/locales/en.json b/server/locales/en.json
@@ -6,7 +6,7 @@
   "auth": {
     "accessWallet": "Access Wallet",
     "accessWalletDescription": "Access your Ethereum browser wallet.",
-    "loginWithUnstoppable": "Login with Unstoppable",
+    "loginWithUnstoppable": "Unstoppable Login",
     "moreInfo": "For more information please see this",
     "walletAddress": "Wallet address",
     "walletAddressIncorrect": "Accessed wallet {{actual}} does not match address {{expected}}"
@@ -283,6 +283,7 @@
     "tokenId": "Token ID",
     "unableToDetectABrowserWallet": "Unable to detect a browser wallet",
     "unstoppableDomains": "Unstoppable Domains",
+    "unstoppableDomainsDescription": "It's your name. Own it.",
     "untilThenYouCanSeeA": "Until then, you can see a",
     "useAnotherDomain": "Use Another Domain",
     "verifyYouOwnThisDomainByAcceptingTheSignature": "Verify you own this domain by accepting the signature request from your browser Wallet",
@@ -467,6 +468,8 @@
       "subscriptionsDescription": "Checking your account to make sure it's ready for the best messaging experience.",
       "success": "Success",
       "successDescription": "Your device is ready for Unstoppable Messaging!",
+      "error": "Setup error",
+      "errorDescription" : "There was a problem setting up Unstoppable Messaging on your device. Make sure to connect your wallet and sign the requested messages.",
       "support": "We'd love to hear from you.",
       "supportDescription": "Send a message to **{{supportHandle}}** for help, feedback or just to say hello.",
       "title": "Unstoppable Messaging"

diff --git a/server/styles/pages/domain.styles.ts b/server/styles/pages/domain.styles.ts
@@ -73,6 +73,9 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     [theme.breakpoints.down('sm')]: {
       left: theme.spacing(2),
     },
+    [theme.breakpoints.down('sm')]: {
+      zIndex: 0,
+    },
   },
   profilePicture: {
     display: 'flex',
@@ -374,14 +377,23 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '& div:nth-of-type(1)': {
       zIndex: 103,
+      [theme.breakpoints.down('sm')]: {
+        zIndex: 0,
+      },
     },
     '& div:nth-of-type(2)': {
       zIndex: 102,
       marginLeft: '20px',
+      [theme.breakpoints.down('sm')]: {
+        zIndex: 0,
+      },
     },
     '& div:nth-of-type(3)': {
       zIndex: 101,
       marginLeft: '40px',
+      [theme.breakpoints.down('sm')]: {
+        zIndex: 0,
+      },
     },
   },
   followersPreviewTyp: {