Merge pull request #10 from rarimo/fixes

Fixes

.env.example

@@ -0,0 +1,3 @@
+VITE_APP_NAME='Rarime dashboard'
+VITE_APP_DOMAIN='https://dashboard.rarime.com'
+VITE_DEFAULT_CHAIN='SEPOLIA'

package.json

@@ -31,7 +31,7 @@
   "dependencies": {
     "@distributedlab/tools": "^1.0.0-rc.8",
     "@distributedlab/w3p": "^1.0.0-rc.8",
-    "@rarimo/rarime-connector": "^1.1.0-rc.0",
+    "@rarimo/rarime-connector": "^1.0.2",
     "@walletconnect/modal": "^2.6.2",
     "downshift": "^7.1.2",
     "framer-motion": "^10.12.10",

src/common/AppNavbar/AppNavbar.tsx

@@ -18,7 +18,7 @@ const AppNavbar: FC<HTMLAttributes<HTMLDivElement>> = ({
           scheme='none'
           size='none'
           iconLeft={IconNames.AccountBalanceWallet}
-          routePath={RoutesPaths.App}
+          routePath={RoutesPaths.Profiles}
         />
       </div>
     </div>

src/common/AppNavbar/styles.scss

@@ -6,7 +6,8 @@
   gap: toRem(24);
   padding: toRem(24) var(--app-padding-right) toRem(24) var(--app-padding-left);
   border-bottom: var(--border-primary-main);
-  height: 100vh;
+  min-height: 100vh;
+  height: 100%;
   background: var(--background-secondary-main);
   position: absolute;
   left: 0;

src/enums/routes.enum.ts

@@ -1,4 +1,5 @@
 export enum RoutesPaths {
-  App = '/profiles',
+  App = '/',
+  Profiles = '/profiles',
   SignIn = '/sign-in',
 }

src/localization/resources/en.json

@@ -1,7 +1,7 @@
 {
   "profile-page": {
-    "title" : "Add Credentials",
-    "description": "Explore credentials marketplace with different providers",
+    "title" : "Profiles & Wallets",
+    "description": "Manage your identity credentials and Soulbound Tokens (SBTs) easily from this dashboard",
     "wallet": "Wallet",
     "filter": "Filter",
     "credential": "credential",

src/pages/ProfilePage/ProfilePage.tsx

@@ -14,15 +14,24 @@ import { CredentialsTile, Sidebar } from './components'
 
 const ProfilePage = () => {
   const [credentials, setCredentials] = useState([] as W3CCredential[])
-  const { getCredentials } = useMetamaskZkpSnapContext()
+  const { getCredentials, checkSnapExists, connectOrInstallSnap } =
+    useMetamaskZkpSnapContext()
   const { provider } = useWeb3Context()
   const navigate = useNavigate()
   const { t } = useTranslation()
 
   const getUserCredentials = useCallback(async () => {
+    await checkConnectSnap()
     setCredentials(await getCredentials())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [getCredentials])
 
+  const checkConnectSnap = useCallback(async () => {
+    if (!(await checkSnapExists())) {
+      await connectOrInstallSnap()
+    }
+  }, [checkSnapExists, connectOrInstallSnap])
+
   useEffect(() => {
     if (!provider?.address) {
       navigate(RoutesPaths.SignIn)
@@ -76,10 +85,10 @@ const ProfilePage = () => {
                   name={IconNames.PlusInCircle}
                 />
                 <span className='profile-page__content-empty-title'>
-                  {t('profile-page.title')}
+                  {t('profile-page.empty-title')}
                 </span>
                 <p className='profile-page__content-empty-description'>
-                  {t('profile-page.description')}
+                  {t('profile-page.empty-description')}
                 </p>
                 <AppButton
                   className='profile-page__content-empty-button'

src/pages/ProfilePage/components/CredentialsTile/styles.scss

@@ -42,7 +42,7 @@
   font-size: toRem(16);
   font-weight: 500;
   line-height: toRem(20);
-  padding-bottom: toRem(16);
+  padding: toRem(16) 0;
 }
 
 .credential-tile__content-subtitle {

src/pages/ProfilePage/styles.scss

@@ -1,7 +1,8 @@
 .profile-page {
   background: var(--background-secondary-main);
   padding: var(--app-primary-page-padding) var(--app-primary-page-padding) var(--app-primary-page-padding) var(--sidebar-full-width);
-  height: 100vh;
+  min-height: 100vh;
+  height: 100%;
 }
 
 .profile-page__header {
@@ -12,7 +13,7 @@
 .profile-page__wrapper {
   border-radius: toRem(16);
   background: var(--white);
-  height: 100%;
+  min-height: calc(100vh - (2 * var(--app-primary-page-padding)));
   padding: toRem(32) toRem(28);
   display: flex;
   flex-direction: column;

src/pages/SignInPage/SignInPage.tsx

@@ -13,18 +13,24 @@ const SignInPage = () => {
   const navigate = useNavigate()
   const { t } = useTranslation()
   const { init: initWeb3, provider } = useWeb3Context()
-  const { connectOrInstallSnap } = useMetamaskZkpSnapContext()
+  const { connectOrInstallSnap, checkSnapExists } = useMetamaskZkpSnapContext()
 
   const connectWallet = async () => {
     await initWeb3(PROVIDERS.Metamask)
     await connectOrInstallSnap()
+    navigate(RoutesPaths.Profiles)
   }
 
-  useEffect(() => {
-    if (provider?.isConnected) {
-      navigate(RoutesPaths.App)
+  const redirectToProfiles = async () => {
+    if (provider?.address && (await checkSnapExists())) {
+      navigate(RoutesPaths.Profiles)
     }
-  }, [navigate, provider?.isConnected])
+  }
+
+  useEffect(() => {
+    redirectToProfiles()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigate])
 
   return (
     <div className='sign-in-page'>

src/pages/SignInPage/styles.scss

@@ -4,16 +4,12 @@
   justify-content: center;
   height: 100vh;
   width: 100%;
-  background-image: url("/imgs/app-background.webp");
+  background-image: url("/imgs/app-bg.png");
   background-repeat: no-repeat;
   background-position: right;
   background-size: 50% / cover;
   backdrop-filter: opacity(0.1);
 
-  &.no-webp {
-    background-image: url("/imgs/app-bg.png");
-  }
-
   &:before {
     content: "";
     pointer-events: none;

src/routes.tsx

@@ -35,7 +35,7 @@ export const AppRoutes = () => {
       children: [
         {
           index: true,
-          path: RoutesPaths.App,
+          path: RoutesPaths.Profiles,
           element: <ProfilePage />,
         },
         {

yarn.lock

@@ -1085,10 +1085,10 @@
     picocolors "^1.0.0"
     tslib "^2.5.0"
 
-"@rarimo/rarime-connector@^1.1.0-rc.0":
-  version "1.1.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@rarimo/rarime-connector/-/rarime-connector-1.1.0-rc.0.tgz#e7374eccc811a68b862a5dc833ab64b45535ef9b"
-  integrity sha512-d5CHbWtpkOOH5MhsJY+qzmtVkTeetc5dhVUPaRT7WKYbmFvcRf2WG/h1DOlRPzQ7UHSdbx7UQCOcLmTw2B+PGw==
+"@rarimo/rarime-connector@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@rarimo/rarime-connector/-/rarime-connector-1.0.2.tgz#966f260e9ccfde53c99900273d6c0421198ea1a8"
+  integrity sha512-783NYW34bYIl7/5k8ggA53ZEo4yUBNhEGU51MAvjRnqiCn6W6x4LUGbZyu14jn3/D47DkOYI3pnOWsZpeFHfGw==
   dependencies:
     "@ethersproject/providers" "5.7.2"
     ethers "5.7.2"