Initial commit: Crypto trader application

This commit is contained in:
2025-12-25 20:20:40 -05:00
commit 07a04c1bb8
47895 changed files with 2042266 additions and 0 deletions

View File

@@ -0,0 +1,74 @@
/**
* A universal utility to style components with multiple color modes. Always use it from the theme object.
* It works with:
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
* - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
*
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* @example
* 1. using with `styled`:
* ```jsx
* const Component = styled('div')(({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]);
* ```
*
* @example
* 2. using with `sx` prop:
* ```jsx
* <Box sx={theme => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]}
* />
* ```
*
* @example
* 3. theming a component:
* ```jsx
* extendTheme({
* components: {
* MuiButton: {
* styleOverrides: {
* root: ({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ],
* },
* }
* }
* })
*```
*/
export default function applyStyles(key, styles) {
// @ts-expect-error this is 'any' type
const theme = this;
if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
// If CssVarsProvider is used as a provider,
// returns '* :where([data-mui-color-scheme="light|dark"]) &'
const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
return {
[selector]: styles
};
}
if (theme.palette.mode === key) {
return styles;
}
return {};
}

View File

@@ -0,0 +1,82 @@
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["values", "unit", "step"];
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
const sortBreakpointsValues = values => {
const breakpointsAsArray = Object.keys(values).map(key => ({
key,
val: values[key]
})) || [];
// Sort in ascending order
breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
return breakpointsAsArray.reduce((acc, obj) => {
return _extends({}, acc, {
[obj.key]: obj.val
});
}, {});
};
// Keep in mind that @media is inclusive by the CSS specification.
export default function createBreakpoints(breakpoints) {
const {
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm).
values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
},
unit = 'px',
step = 5
} = breakpoints,
other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
const sortedValues = sortBreakpointsValues(values);
const keys = Object.keys(sortedValues);
function up(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (min-width:${value}${unit})`;
}
function down(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (max-width:${value - step / 100}${unit})`;
}
function between(start, end) {
const endIndex = keys.indexOf(end);
return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
}
function only(key) {
if (keys.indexOf(key) + 1 < keys.length) {
return between(key, keys[keys.indexOf(key) + 1]);
}
return up(key);
}
function not(key) {
// handle first and last key separately, for better readability
const keyIndex = keys.indexOf(key);
if (keyIndex === 0) {
return up(keys[1]);
}
if (keyIndex === keys.length - 1) {
return down(keys[keyIndex]);
}
return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
}
return _extends({
keys,
values: sortedValues,
up,
down,
between,
only,
not,
unit
}, other);
}

View File

@@ -0,0 +1,32 @@
import { createUnarySpacing } from '../spacing';
// The different signatures imply different meaning for their arguments that can't be expressed structurally.
// We express the difference with variable names.
export default function createSpacing(spacingInput = 8) {
// Already transformed.
if (spacingInput.mui) {
return spacingInput;
}
// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
// Smaller components, such as icons, can align to a 4dp grid.
// https://m2.material.io/design/layout/understanding-layout.html
const transform = createUnarySpacing({
spacing: spacingInput
});
const spacing = (...argsInput) => {
if (process.env.NODE_ENV !== 'production') {
if (!(argsInput.length <= 4)) {
console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
}
}
const args = argsInput.length === 0 ? [1] : argsInput;
return args.map(argument => {
const output = transform(argument);
return typeof output === 'number' ? `${output}px` : output;
}).join(' ');
};
spacing.mui = true;
return spacing;
}

View File

@@ -0,0 +1,43 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["breakpoints", "palette", "spacing", "shape"];
import deepmerge from '@mui/utils/deepmerge';
import createBreakpoints from './createBreakpoints';
import shape from './shape';
import createSpacing from './createSpacing';
import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
import applyStyles from './applyStyles';
function createTheme(options = {}, ...args) {
const {
breakpoints: breakpointsInput = {},
palette: paletteInput = {},
spacing: spacingInput,
shape: shapeInput = {}
} = options,
other = _objectWithoutPropertiesLoose(options, _excluded);
const breakpoints = createBreakpoints(breakpointsInput);
const spacing = createSpacing(spacingInput);
let muiTheme = deepmerge({
breakpoints,
direction: 'ltr',
components: {},
// Inject component definitions.
palette: _extends({
mode: 'light'
}, paletteInput),
spacing,
shape: _extends({}, shape, shapeInput)
}, other);
muiTheme.applyStyles = applyStyles;
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
muiTheme.unstable_sx = function sx(props) {
return styleFunctionSx({
sx: props,
theme: this
});
};
return muiTheme;
}
export default createTheme;

View File

@@ -0,0 +1,3 @@
export { default } from './createTheme';
export { default as private_createBreakpoints } from './createBreakpoints';
export { default as unstable_applyStyles } from './applyStyles';

View File

@@ -0,0 +1,4 @@
const shape = {
borderRadius: 4
};
export default shape;