feat(profile-view): button for buy another odyssey

momentum-xyz · Oct 30, 2023 · c789cd2 · c789cd2
1 parent 8f1a4ea
commit c789cd2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/...s/app/src/scenes/widgets/pages/ProfileWidget/components/ProfileView/ProfileView.styled.ts b/...s/app/src/scenes/widgets/pages/ProfileWidget/components/ProfileView/ProfileView.styled.ts
@@ -33,3 +33,10 @@ export const LinkAccent = styled.a`
 export const Worlds = styled.div`
   padding: 0 10px 10px 10px;
 `;
+
+export const BuyAnotherWorldPanel = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
+`;
diff --git a/packages/app/src/scenes/widgets/pages/ProfileWidget/components/ProfileView/ProfileView.tsx b/packages/app/src/scenes/widgets/pages/ProfileWidget/components/ProfileView/ProfileView.tsx
@@ -1,11 +1,13 @@
 import {FC} from 'react';
+import {useNavigate} from 'react-router-dom';
 import {observer} from 'mobx-react-lite';
-import {Image, Frame, ProfileLine, WalletHash, TextCut} from '@momentum-xyz/ui-kit';
+import {Image, Frame, ProfileLine, WalletHash, TextCut, Button} from '@momentum-xyz/ui-kit';
 import {absoluteLink, withoutProtocol, useI18n, signUpDateString} from '@momentum-xyz/core';
 
 import {WalletInterface} from 'api';
 import {WorldsOwnedList, WorldsStakedList} from 'ui-kit';
 import {UserModelInterface, WorldInfoModelInterface} from 'core/models';
+import {ROUTES} from 'core/constants';
 
 import * as styled from './ProfileView.styled';
 
@@ -27,6 +29,7 @@ const ProfileView: FC<PropsInterface> = ({
   onVisitWorld
 }) => {
   const {t} = useI18n();
+  const navigate = useNavigate();
 
   return (
     <styled.Container>
@@ -62,6 +65,14 @@ const ProfileView: FC<PropsInterface> = ({
           onVisitWorld={onVisitWorld}
         />
 
+        <styled.BuyAnotherWorldPanel>
+          <Button
+            variant="secondary"
+            label="Buy another Odyssey"
+            onClick={() => navigate(ROUTES.buyNft)}
+          />
+        </styled.BuyAnotherWorldPanel>
+
         <WorldsStakedList
           worldsStakedIn={worldsStakedList}
           onSelectWorld={onInfoWorld}