Uiux/quests mobile temp

src-mobile/package.json

@@ -22,8 +22,9 @@
     "react": "^18.2.0",
     "react-awesome-slider": "^4.1.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.5",
+    "react-multi-carousel": "^2.8.5",
     "react-router-dom": "^6.23.0",
+    "react-hook-form": "^7.51.5",
     "react-toastify": "^10.0.5",
     "yup": "^1.4.0"
   },
@@ -40,6 +41,7 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "internal-ip": "^7.0.0",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-plugin-node-polyfills": "^0.22.0"
   }
-}
+}

src-mobile/src/App.tsx

@@ -5,6 +5,7 @@ import {
 } from "react-router-dom";
 
 import * as React from "react";
+import { testCampaign, quests } from "../src/types/quests/quest_types";
 
 // Screens
 import EntryPoint from "./views/Entrypoint";
@@ -21,10 +22,17 @@ import Send from "./views/send/Send";
 import InputRecipient from "./views/send/InputRecipient";
 import QrCode from "./views/QrCode";
 import Settings from "./views/Settings";
+import ChooseMethod from "./views/add-an-existing-account/ChooseMethod";
+import PrivateKeyLogin from "./views/add-an-existing-account/InputPrivateKey";
+import SeedLogin from "./views/add-an-existing-account/InputSeedPhrase";
+import DappsPage from "./views/dapps/Dapps";
+import QuestsCampaign from "./views/quests/QuestsCampaign";
+import QuestsScreen from "./views/quests/QuestsScreen";
 import Username from "./views/create-wallet/Username";
 import Password from "./views/create-wallet/Password";
 
 import Login from "./views/Login";
+import QuestsDetails from "components/quests/QuestsComponents/QuestsDetails";
 
 const App: React.FC = () => {
   const router: RouterProviderProps["router"] = createBrowserRouter([
@@ -52,8 +60,15 @@ const App: React.FC = () => {
     { path: "/qr-code", element: <QrCode /> },
     { path: "/settings", element: <Settings /> },
     /* --Existing Wallet Flow-- */
+    { path: "/add-wallet", element: <ChooseMethod /> },
+    { path: "/seed-phrase", element: <SeedLogin /> },
+    { path: "/private-key", element: <PrivateKeyLogin /> },
     /* --Dapp Flow-- */
+    { path: "/dapps", element: <DappsPage /> },
     /* --Quest Flow-- */
+    { path: "/quests", element: <QuestsScreen /> },
+    { path: "/campaign", element: <QuestsCampaign /> },
+    { path: "/quests-details", element: <QuestsDetails /> },
   ]);
 
   return <RouterProvider router={router} />;

src-mobile/src/assets/dapps/dapps.ts

@@ -0,0 +1,144 @@
+import dalphaswap from './dapp-home/alphaswap.svg';
+import darcane from './dapp-home/arcane.svg';
+import dans from './dapp-home/ans.svg';
+import obscura from './dapp-home/obscura.svg';
+import dshadowfi from './dapp-home/shadow.svg';
+import dstaking from './dapp-home/staking.svg';
+import dpayper from './dapp-home/payper.svg';
+
+import beta_staking from './beta-staking.jpg';
+
+export type Dapp = {
+	name: string;
+	description: string;
+	url: string;
+	img: string;
+	tags: string[];
+	style?: React.CSSProperties;
+	color?: string;
+};
+
+export const dapps: Dapp[] = [
+	{
+		name: 'Arcane Finance',
+		description: 'Arcane Finance is a fully private non-custodial decentralized exchange enabling fully confidential DeFi on Aleo.',
+		url: 'https://app.arcane.finance',
+		img: darcane,
+		tags: ['defi'],
+		style: {marginTop: '23%'},
+		color: '#0C6CFE',
+	},
+	{
+		name: 'Staking.xyz',
+		description: 'Making staking easy for everyone, starting with Aleo.',
+		url: 'https://www.staking.xyz',
+		img: dstaking,
+		tags: ['staking'],
+		style: {marginTop: '27%'},
+		color: '#FFF',
+	},
+	{
+		name: 'ANS',
+		description: 'An Aleo domain for your account - ANS is where domain naming meets privacy.',
+		url: 'https://testnet3.aleonames.id/account',
+		img: dans,
+		tags: ['domains'],
+		style: {marginTop: '14%'},
+		color: '#FFF',
+	},
+	{
+		name: 'ShadowFi',
+		description: 'Shadow Finance is a Decentralized and Private Liquidity Marketplace',
+		url: 'https://app.shadowfi.xyz/',
+		img: dshadowfi,
+		tags: ['defi'],
+		style: {marginTop: '10%'},
+		color: '#F17604',
+	},
+	{
+		name: 'AlphaSwap',
+		description: 'AlphaSwap (previously AleoSwap) offers private, secure, and smooth trading experience on the Aleo blockchain.',
+		url: 'https://app.alphaswap.pro/assets/tokens',
+		img: dalphaswap,
+		tags: ['defi'],
+		style: {marginTop: '5%'},
+		color: '#04F158',
+	},
+	{
+		name: 'Payper',
+		description: 'PayPer is a digital currency based on zero knowledge proofs, allowing infinite scalability and full privacy.',
+		url: 'https://app.payper.fi/',
+		img: dpayper,
+		tags: ['stablecoin'],
+		style: {marginTop: '20%'},
+		color: '#6C7690',
+	},
+	{
+		name: 'Beta Staking',
+		description: 'A decentralized protocol that enables users to stake Aleo Credits on the Aleo blockchain network and earn Beta rewards.',
+		url: 'https://www.betastaking.com',
+		img: beta_staking,
+		tags: ['liquid-staking'],
+		style: {marginTop: '20%'},
+		color: '#1DB954',
+	},
+];
+
+export const displayDapps: Dapp[] = [
+	{
+		name: 'Obscura',
+		description: 'Complete our Quests every week to earn a Disruptor whitelist spot.',
+		url: 'https://obscura.build',
+		img: obscura,
+		tags: ['earn', 'rewards'],
+		style: {marginTop: '15%', width: '70px', height: '70px'},
+	},
+	{
+		name: 'Arcane Finance',
+		description: 'Arcane Finance is a fully private non-custodial decentralized exchange enabling fully confidential DeFi on Aleo.',
+		url: 'https://app.arcane.finance',
+		img: darcane,
+		tags: ['finance', 'swap'],
+		style: {marginTop: '33%', width: '120px', height: '120px'},
+	},
+	{
+		name: 'Staking.xyz',
+		description: 'Making staking easy for everyone, starting with Aleo.',
+		url: 'https://www.staking.xyz',
+		img: dstaking,
+		tags: ['staking'],
+		style: {marginTop: '3%', width: '120px', height: '120px'},
+	},
+	{
+		name: 'ANS',
+		description: 'An Aleo domain for your account - ANS is where domain naming meets privacy.',
+		url: 'https://testnet3.aleonames.id/account',
+		img: dans,
+		tags: ['domains'],
+		style: {marginTop: '14%', width: '80px', height: '80px'},
+	},
+	{
+		name: 'ShadowFi',
+		description: 'Shadow Finance is a Decentralized and Private Liquidity Marketplace',
+		url: 'https://app.shadowfi.xyz/',
+		img: dshadowfi,
+		tags: ['finance'],
+		style: {marginTop: '10%', width: '100px', height: '100px'},
+	},
+	{
+		name: 'AlphaSwap',
+		description: 'AlphaSwap (previously AleoSwap) offers private, secure, and smooth trading experience on the Aleo blockchain.',
+		url: 'https://app.alphaswap.pro/assets/tokens',
+		img: dalphaswap,
+		tags: ['finance', 'swap'],
+		style: {marginTop: '5%', width: '140px', height: '140px'},
+	},
+	{
+		name: 'Payper',
+		description: 'PayPer is a digital currency based on zero knowledge proofs, allowing infinite scalability and full privacy.',
+		url: 'https://app.payper.fi/',
+		img: dpayper,
+		tags: ['finance', 'swap'],
+		style: {marginTop: '20%', width: '100px', height: '100px'},
+	},
+];

src-mobile/src/components/dapps/ConnectedDappsGrid.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
-import { Dapp } from "../../types/dapps/types";
+// import { Dapp } from "../../types/dapps/types";
+import { Dapp } from "src/assets/dapps/dapps";
 
 import { useNavigate } from "react-router-dom";
 
@@ -51,7 +52,7 @@ const ConnectedDappsGrid: React.FC<DappsGridView> = ({ dapps, activeTab }) => {
               }}
             >
               <img
-                src={dapp.main_img}
+                src={dapp.img}
                 alt="Connected Dapp"
                 style={{ width: "100%", height: "auto" }} // Ensure image fits inside box
               />

src-mobile/src/components/dapps/DappsSection.tsx

@@ -1,34 +1,30 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
 import NavigateNextOutlinedIcon from "@mui/icons-material/NavigateNextOutlined";
-
-interface Dapp {
-  name: string;
-  description: string;
-  main_img: string;
-}
+import { Dapp } from "src/assets/dapps/dapps";
 
 interface DappsSectionProps {
   title: string;
-  dapps: Dapp[];
+  dapp: Dapp;
 }
 
-const DappsSection: React.FC<DappsSectionProps> = ({ title, dapps }) => {
+const DappsSection: React.FC<DappsSectionProps> = ({ title, dapp }) => {
   return (
     <Box
       sx={{
-        height: "40px",
+        height: "52px",
         display: "flex",
-        justifyContent: "space-between", // Align items with space between
-        mt: "10px", // Add margin top
+        justifyContent: "space-between",
+        mt: "10px",
         mb: "10px",
       }}
     >
       <Box
         sx={{
           display: "flex",
           alignItems: "center",
-          mr: "7px", // Add margin right
+          mr: "7px",
+          flex: 15,
         }}
       >
         {/*Image */}
@@ -37,17 +33,26 @@ const DappsSection: React.FC<DappsSectionProps> = ({ title, dapps }) => {
             justifyContent: "center",
             alignItems: "center",
             width: "33px",
+            minWidth: "33px",
+            maxWidth: "33px",
             height: "33px",
-            borderRadius: "10px",
+            maxHeight: "33px",
+            minHeight: "33px",
+            borderRadius: "5px",
             overflow: "hidden",
             backgroundColor: "#000000",
             marginRight: "7px",
           }}
         >
           <img
-            src={dapps[0].main_img}
+            src={dapp.img}
             alt="Connected Dapp"
-            style={{ width: "100%", height: "auto" }}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              objectPosition: "center"
+            }}
           />
         </Box>
         {/* Text */}
@@ -56,25 +61,50 @@ const DappsSection: React.FC<DappsSectionProps> = ({ title, dapps }) => {
             display: "flex",
             flexDirection: "column",
             alignItems: "flex-start",
+            right: "unset",
           }}
         >
-          <Typography
-            variant="body1"
-            sx={{ fontSize: "17px", fontWeight: "normal" }}
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "flex-end",
+            }}
           >
-            Arcane Finance {/* Use the 'name' property of the 'dapp' prop */}
-          </Typography>
+            <Typography
+              variant="body1"
+              sx={{ fontSize: "15px", fontWeight: "normal" }}
+            >
+              {dapp.name}
+            </Typography>
+            <Typography
+              variant="body1"
+              sx={{ fontSize: "11px", ml: "8px", color: "lightgray" }}
+            >
+              {`[${dapp.tags}]`}
+            </Typography>
+          </Box>
           <Typography
             variant="body1"
-            sx={{ fontSize: "10px", fontWeight: "normal" }}
+            sx={{
+              fontSize: "10px",
+              textAlign: "left",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              maxWidth: "100%",
+            }}
           >
-            Decentralized Exchange on Aleo
+            {dapp.description}
           </Typography>
         </Box>
       </Box>
       <Box
         sx={{
           marginRight: "19px",
+          flex: 1,
         }}
       >
         <NavigateNextOutlinedIcon></NavigateNextOutlinedIcon>
@@ -83,4 +113,4 @@ const DappsSection: React.FC<DappsSectionProps> = ({ title, dapps }) => {
   );
 };
 
-export default DappsSection;
+export default DappsSection;