LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: [console-lite] - trade screen - bunch of animations (#706)

Browse Source 
* feat: [console-lite] - trade screen - bunch of animations

* feat: [console-lite] - trade screen - bunch of animations

Co-authored-by: maciek <maciek@vegaprotocol.io>
This commit is contained in:
macqbat 2022-07-04 16:24:26 +02:00 committed by GitHub
parent 68105c05ca
commit 2fbecc461b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 107 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/simple-trading-app/src/app/components/deal-ticket/baubles-decor.tsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import Video from '../header/video';
import Comet from '../header/comet';
import Star from '../icons/star';
const Baubles = () => {
return (
<div className="relative right-0 top-0 h-[700px] hidden md:block md:w-1/2 overflow-hidden">
<div className="absolute top-[100px] w-[393px] left-[19%] h-[517px]">
<div className="absolute top-[82px] right-[34px] w-[100px] h-[100px] clip-path-rounded">
<Video />
</div>
<div className="absolute bottom-[100px] left-[59px] w-[200px] h-[200px] clip-path-rounded">
<Video />
</div>
<div className="absolute w-[118px] h-[85px] right-0 bottom-[178px]">
<Comet />
</div>
<div className="absolute w-[118px] h-[82px] left-0 bottom-[120px]">
<Comet />
</div>
<div className="absolute w-[20px] h-[20px] top-0 left-[49px]">
<Star />
</div>
<div className="absolute w-[20px] h-[20px] top-[89px] left-[184px]">
<Star />
</div>
<div className="absolute w-[10px] h-[10px] bottom-0 right-[137px]">
<Star />
</div>
</div>
</div>
);
};
export default Baubles;

53
apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx
View File

@ -1,3 +1,4 @@
import * as React from 'react';
import { useParams } from 'react-router-dom';
import {
DealTicketManager,
@ -8,6 +9,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
import { gql, useQuery } from '@apollo/client';
import { DealTicketBalance } from './deal-ticket-balance';
import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
import Baubles from './baubles-decor';
const tempEmptyText = <p>Please select a market from the markets page</p>;
@ -39,27 +41,34 @@ export const DealTicketContainer = () => {
}
);
return marketId ? (
<Container marketId={marketId}>
{(data) => (
<DealTicketManager market={data.market}>
{loading ? (
'Loading...'
) : (
<DealTicketBalance
settlementAsset={
data.market.tradableInstrument.instrument.product
?.settlementAsset
}
accounts={partyData?.party?.accounts || []}
isWalletConnected={!!keypair?.pub}
/>
)}
<DealTicketSteps market={data.market} />
</DealTicketManager>
)}
</Container>
) : (
tempEmptyText
return (
<div className="flex">
<div className="md:w-1/2 md:min-w-[500px]">
{marketId ? (
<Container marketId={marketId}>
{(data) => (
<DealTicketManager market={data.market}>
{loading ? (
'Loading...'
) : (
<DealTicketBalance
settlementAsset={
data.market.tradableInstrument.instrument.product
?.settlementAsset
}
accounts={partyData?.party?.accounts || []}
isWalletConnected={!!keypair?.pub}
/>
)}
<DealTicketSteps market={data.market} />
</DealTicketManager>
)}
</Container>
) : (
tempEmptyText
)}
</div>
<Baubles />
</div>
);
};

4
apps/simple-trading-app/src/app/components/header/comet.tsx
View File

@ -5,9 +5,9 @@ const Comet = () => {
<svg
viewBox="0 0 118 82"
fill="currentColor"
className="max-w-[7.5rem] mx-auto hidden md:block absolute right-[365px] rotate-180"
className="max-w-[7.5rem] mx-auto"
>
<g className="fill-white">
<g className="fill-black dark:fill-white">
<path d="M44.3791 67.5864H41.5859V70.3796H44.3791V67.5864Z"></path>
<path d="M47.173 64.7932V62H44.3799V64.7932V67.5863H47.173V64.7932Z"></path>
<path d="M41.5863 70.3794H36V73.1726H41.5863V70.3794Z"></path>

19
apps/simple-trading-app/src/app/components/header/video.tsx
View File

@ -1,15 +1,26 @@
import React from 'react';
import classNames from 'classnames';
const Video = () => {
interface Props {
width: number;
height: number;
className: string;
}
const Video = ({ width = 60, height = 60, className = '' }: Partial<Props>) => {
return (
<video
width={500}
height={100}
width={width}
height={height}
autoPlay
muted
loop
playsInline
className="absolute left-0 top-0 w-full h-full object-cover"
className={classNames(
'absolute left-0 top-0 w-full h-full object-cover',
className
)}
poster="https://vega.xyz/static/poster-image.jpg"
>
<source
src="https://d33wubrfki0l68.cloudfront.net/2500bc5ef1b96927e0220eeb2bef0b22b87bcda1/3e0d3/static/moshed-aa65f0933af9abe9afb5e5663c9b3f68.mp4"

20
apps/simple-trading-app/src/app/components/icons/star.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
const Star = () => {
return (
<svg width="100%" height="100%" viewBox="0 0 21 21" fill="currentColor">
<g className="fill-black dark:fill-white">
<path d="M8.99996 5.99976H6V8.99972H8.99996V5.99976Z" />
<path d="M12.0009 2.99996V0H9.00098V2.99996V5.99993H12.0009V2.99996Z" />
<path d="M5.99993 9H0V12H5.99993V9Z" />
<path d="M8.99996 11.9998H6V14.9997H8.99996V11.9998Z" />
<path d="M12.0009 15H9.00098V20.9999H12.0009V15Z" />
<path d="M15 11.9998H12V14.9997H15V11.9998Z" />
<path d="M20.9999 9H15V12H20.9999V9Z" />
<path d="M15 5.99976H12V8.99972H15V5.99976Z" />
</g>
</svg>
);
};
export default Star;

3
libs/tailwindcss-config/src/vega-custom-classes.js
View File

@ -48,6 +48,9 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
'.color-scheme-dark': {
colorScheme: 'dark',
},
'.clip-path-rounded': {
clipPath: 'circle(50%)',
},
});
});