fix animation and connect-wallet page

frontend/src/components/main-container/styles.ts

@@ -6,7 +6,7 @@ interface MainProps {
 
 export const MainWrap = styled.div<MainProps>`
   display: flex;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   flex-direction: column;
   overflow: hidden;

frontend/src/components/notification-detail/styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { CloseIcon, ExclamationIcon, TickIcon } from "../../assets";
-import { color, margins } from "../../design";
+import { breakpoints, color, margins } from "../../design";
 import { HeaderHorizontalDivider, NavigationTitle } from "../atoms";
 
 export const ToastContainer = styled.div`
@@ -18,6 +18,10 @@ export const ToastContainer = styled.div`
   position: absolute;
   left: 40px;
   height: fit-content;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 100vw;
+  }
 `;
 
 export const Tick = styled(TickIcon)`

frontend/src/navigation/routes.tsx

@@ -11,6 +11,7 @@ import { MobileNotAvailable } from "../pages/mobile-not-available";
 import { useIsMobile } from "../hooks";
 import { breakpoints } from "../design";
 import { OnboardingMobile } from "../pages/onboarding-mobile/onboarding-mobile";
+import { ConnectWalletMobile } from "../pages/connect-wallet-mobile/connect-wallet-mobile";
 
 export const InternalAppWrapper = () => {
   return (
@@ -45,7 +46,7 @@ export const InternalAppRoutes: FC = () => {
   </>
   const mobileRoutes = <>
     {Object.values(desktopOnlyPaths).map((path, index) => <Route path={path} element={<MobileNotAvailable />} key={index} />)}
-    <Route path={routes.connectWallet} element={<ConnectWallet />} />
+    <Route path={routes.connectWallet} element={<ConnectWalletMobile />} />
     <Route path={routes.character} element={<LandingMobile />} />
     <Route path={routes.createCharacter} element={<CreateCharacterMobile />} />
     <Route path="*" element={<ErrorView />} />

frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx

@@ -0,0 +1,110 @@
+import React, { FC, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { KeplerIcon, text } from "../../assets";
+import { breakpoints, color } from "../../design";
+import {
+  ButtonText,
+  FadeInOut,
+  Footer,
+  Kado,
+  KeplerIconWrapper,
+  LoadingPage,
+  MenuText,
+  NotificationDetail,
+  OnboardingCharacter,
+  Overlay,
+  PrimaryButton,
+  TitleText,
+} from "../../components";
+import {
+  ArrowUp,
+  ButtonContainer,
+  FooterContainer,
+  InfoText,
+  KreadLogo,
+  LogoContainer,
+  OnboardingContainer,
+  OnboardingWrapper,
+  SectionContainer,
+  TextContainer,
+} from "./styles";
+import { useIsMobile, useOnScreen, useViewport } from "../../hooks";
+import { useAgoricContext } from "../../context/agoric";
+import { routes } from "../../navigation";
+import { ButtonRow } from "../onboarding/styles";
+import { NotificationWrapper } from "../../components/notification-detail/styles";
+
+export const ConnectWalletMobile: FC = () => {
+  const [service, _] = useAgoricContext();
+  const navigate = useNavigate();
+  const { width, height } = useViewport();
+  const [isLoading, setIsLoading] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const isConnectButtonVisible = useOnScreen(ref);
+  const isMobile = useIsMobile(breakpoints.tablet);
+  const [showWidget, setShowWidget] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
+  const toggleWidget = () => {
+    setShowWidget(!showWidget);
+  };
+  const showAnimation = false;
+
+  const provisionWallet = async () => {
+    setIsLoading(true);
+    try {
+      await service.walletConnection.provisionSmartWallet();
+    } catch (e) {
+      setIsLoading(false);
+      setShowToast(true);
+    }
+  };
+
+  if (!service.walletConnection.address) return <LoadingPage spinner={false} />;
+  if (service.status.walletProvisioned) navigate(routes.character);
+
+  return (
+    <OnboardingWrapper>
+      <LogoContainer>
+        <KreadLogo />
+      </LogoContainer>
+      <OnboardingContainer height={height} width={width} showAnimation={showAnimation}>
+        <InfoText height={height}>
+          <SectionContainer>
+            <MenuText>{text.general.activateSmartWallet}</MenuText>
+            <TextContainer customColor={color.darkGrey}>{text.general.activateSmartWalletDescription}</TextContainer>
+          </SectionContainer>
+        </InfoText>
+        <ButtonContainer isVisible={isConnectButtonVisible}>
+          <PrimaryButton onClick={() => provisionWallet()}>
+            <KeplerIconWrapper>
+              <KeplerIcon />
+            </KeplerIconWrapper>
+            <ButtonText customColor={color.white}>{text.general.activateWallet}</ButtonText>
+            {isLoading ? <LoadingPage /> : <ArrowUp />}
+          </PrimaryButton>
+          <PrimaryButton onClick={toggleWidget}>
+            <ButtonText customColor={color.white}>{text.store.buyAssets}</ButtonText>
+            <ArrowUp />
+          </PrimaryButton>
+        </ButtonContainer>
+      </OnboardingContainer>
+      <Footer />
+      <FadeInOut show={showWidget}>
+        <Kado show={showWidget} toggleWidget={toggleWidget} />
+        <Overlay />
+      </FadeInOut>
+      <FadeInOut show={showToast} exiting={!showToast}>
+        {showToast && <Overlay isOnTop={true} />}
+        <NotificationWrapper showNotification={showToast}>
+          <NotificationDetail
+            title={text.error.provisionError}
+            info={text.error.notEnoughBLD}
+            closeToast={() => setShowToast(false)}
+            isError
+          />
+        </NotificationWrapper>
+      </FadeInOut>
+    </OnboardingWrapper>
+  );
+};

frontend/src/pages/connect-wallet-mobile/index.ts

@@ -0,0 +1 @@
+export * from "./connect-wallet";