brahma-test-widget
Version:
A React component for trade automation within the Brahma ecosystem.
1,539 lines (1,441 loc) • 90.7 kB
JavaScript
import require$$0, { useState, useCallback, useEffect } from 'react';
import styled, { css } from 'styled-components';
import { parseEther } from 'ethers';
var jsxRuntime = {exports: {}};
var reactJsxRuntime_production = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReactJsxRuntime_production;
function requireReactJsxRuntime_production () {
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
hasRequiredReactJsxRuntime_production = 1;
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
function jsxProd(type, config, maybeKey) {
var key = null;
void 0 !== maybeKey && (key = "" + maybeKey);
void 0 !== config.key && (key = "" + config.key);
if ("key" in config) {
maybeKey = {};
for (var propName in config)
"key" !== propName && (maybeKey[propName] = config[propName]);
} else maybeKey = config;
config = maybeKey.ref;
return {
$$typeof: REACT_ELEMENT_TYPE,
type: type,
key: key,
ref: void 0 !== config ? config : null,
props: maybeKey
};
}
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
reactJsxRuntime_production.jsx = jsxProd;
reactJsxRuntime_production.jsxs = jsxProd;
return reactJsxRuntime_production;
}
var reactJsxRuntime_development = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReactJsxRuntime_development;
function requireReactJsxRuntime_development () {
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
hasRequiredReactJsxRuntime_development = 1;
"production" !== process.env.NODE_ENV &&
(function () {
function getComponentNameFromType(type) {
if (null == type) return null;
if ("function" === typeof type)
return type.$$typeof === REACT_CLIENT_REFERENCE$2
? null
: type.displayName || type.name || null;
if ("string" === typeof type) return type;
switch (type) {
case REACT_FRAGMENT_TYPE:
return "Fragment";
case REACT_PORTAL_TYPE:
return "Portal";
case REACT_PROFILER_TYPE:
return "Profiler";
case REACT_STRICT_MODE_TYPE:
return "StrictMode";
case REACT_SUSPENSE_TYPE:
return "Suspense";
case REACT_SUSPENSE_LIST_TYPE:
return "SuspenseList";
}
if ("object" === typeof type)
switch (
("number" === typeof type.tag &&
console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
),
type.$$typeof)
) {
case REACT_CONTEXT_TYPE:
return (type.displayName || "Context") + ".Provider";
case REACT_CONSUMER_TYPE:
return (type._context.displayName || "Context") + ".Consumer";
case REACT_FORWARD_REF_TYPE:
var innerType = type.render;
type = type.displayName;
type ||
((type = innerType.displayName || innerType.name || ""),
(type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
return type;
case REACT_MEMO_TYPE:
return (
(innerType = type.displayName || null),
null !== innerType
? innerType
: getComponentNameFromType(type.type) || "Memo"
);
case REACT_LAZY_TYPE:
innerType = type._payload;
type = type._init;
try {
return getComponentNameFromType(type(innerType));
} catch (x) {}
}
return null;
}
function testStringCoercion(value) {
return "" + value;
}
function checkKeyStringCoercion(value) {
try {
testStringCoercion(value);
var JSCompiler_inline_result = !1;
} catch (e) {
JSCompiler_inline_result = true;
}
if (JSCompiler_inline_result) {
JSCompiler_inline_result = console;
var JSCompiler_temp_const = JSCompiler_inline_result.error;
var JSCompiler_inline_result$jscomp$0 =
("function" === typeof Symbol &&
Symbol.toStringTag &&
value[Symbol.toStringTag]) ||
value.constructor.name ||
"Object";
JSCompiler_temp_const.call(
JSCompiler_inline_result,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
JSCompiler_inline_result$jscomp$0
);
return testStringCoercion(value);
}
}
function disabledLog() {}
function disableLogs() {
if (0 === disabledDepth) {
prevLog = console.log;
prevInfo = console.info;
prevWarn = console.warn;
prevError = console.error;
prevGroup = console.group;
prevGroupCollapsed = console.groupCollapsed;
prevGroupEnd = console.groupEnd;
var props = {
configurable: true,
enumerable: true,
value: disabledLog,
writable: true
};
Object.defineProperties(console, {
info: props,
log: props,
warn: props,
error: props,
group: props,
groupCollapsed: props,
groupEnd: props
});
}
disabledDepth++;
}
function reenableLogs() {
disabledDepth--;
if (0 === disabledDepth) {
var props = { configurable: true, enumerable: true, writable: true };
Object.defineProperties(console, {
log: assign({}, props, { value: prevLog }),
info: assign({}, props, { value: prevInfo }),
warn: assign({}, props, { value: prevWarn }),
error: assign({}, props, { value: prevError }),
group: assign({}, props, { value: prevGroup }),
groupCollapsed: assign({}, props, { value: prevGroupCollapsed }),
groupEnd: assign({}, props, { value: prevGroupEnd })
});
}
0 > disabledDepth &&
console.error(
"disabledDepth fell below zero. This is a bug in React. Please file an issue."
);
}
function describeBuiltInComponentFrame(name) {
if (void 0 === prefix)
try {
throw Error();
} catch (x) {
var match = x.stack.trim().match(/\n( *(at )?)/);
prefix = (match && match[1]) || "";
suffix =
-1 < x.stack.indexOf("\n at")
? " (<anonymous>)"
: -1 < x.stack.indexOf("@")
? "@unknown:0:0"
: "";
}
return "\n" + prefix + name + suffix;
}
function describeNativeComponentFrame(fn, construct) {
if (!fn || reentry) return "";
var frame = componentFrameCache.get(fn);
if (void 0 !== frame) return frame;
reentry = true;
frame = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var previousDispatcher = null;
previousDispatcher = ReactSharedInternals.H;
ReactSharedInternals.H = null;
disableLogs();
try {
var RunInRootFrame = {
DetermineComponentFrameRoot: function () {
try {
if (construct) {
var Fake = function () {
throw Error();
};
Object.defineProperty(Fake.prototype, "props", {
set: function () {
throw Error();
}
});
if ("object" === typeof Reflect && Reflect.construct) {
try {
Reflect.construct(Fake, []);
} catch (x) {
var control = x;
}
Reflect.construct(fn, [], Fake);
} else {
try {
Fake.call();
} catch (x$0) {
control = x$0;
}
fn.call(Fake.prototype);
}
} else {
try {
throw Error();
} catch (x$1) {
control = x$1;
}
(Fake = fn()) &&
"function" === typeof Fake.catch &&
Fake.catch(function () {});
}
} catch (sample) {
if (sample && control && "string" === typeof sample.stack)
return [sample.stack, control.stack];
}
return [null, null];
}
};
RunInRootFrame.DetermineComponentFrameRoot.displayName =
"DetermineComponentFrameRoot";
var namePropDescriptor = Object.getOwnPropertyDescriptor(
RunInRootFrame.DetermineComponentFrameRoot,
"name"
);
namePropDescriptor &&
namePropDescriptor.configurable &&
Object.defineProperty(
RunInRootFrame.DetermineComponentFrameRoot,
"name",
{ value: "DetermineComponentFrameRoot" }
);
var _RunInRootFrame$Deter =
RunInRootFrame.DetermineComponentFrameRoot(),
sampleStack = _RunInRootFrame$Deter[0],
controlStack = _RunInRootFrame$Deter[1];
if (sampleStack && controlStack) {
var sampleLines = sampleStack.split("\n"),
controlLines = controlStack.split("\n");
for (
_RunInRootFrame$Deter = namePropDescriptor = 0;
namePropDescriptor < sampleLines.length &&
!sampleLines[namePropDescriptor].includes(
"DetermineComponentFrameRoot"
);
)
namePropDescriptor++;
for (
;
_RunInRootFrame$Deter < controlLines.length &&
!controlLines[_RunInRootFrame$Deter].includes(
"DetermineComponentFrameRoot"
);
)
_RunInRootFrame$Deter++;
if (
namePropDescriptor === sampleLines.length ||
_RunInRootFrame$Deter === controlLines.length
)
for (
namePropDescriptor = sampleLines.length - 1,
_RunInRootFrame$Deter = controlLines.length - 1;
1 <= namePropDescriptor &&
0 <= _RunInRootFrame$Deter &&
sampleLines[namePropDescriptor] !==
controlLines[_RunInRootFrame$Deter];
)
_RunInRootFrame$Deter--;
for (
;
1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter;
namePropDescriptor--, _RunInRootFrame$Deter--
)
if (
sampleLines[namePropDescriptor] !==
controlLines[_RunInRootFrame$Deter]
) {
if (1 !== namePropDescriptor || 1 !== _RunInRootFrame$Deter) {
do
if (
(namePropDescriptor--,
_RunInRootFrame$Deter--,
0 > _RunInRootFrame$Deter ||
sampleLines[namePropDescriptor] !==
controlLines[_RunInRootFrame$Deter])
) {
var _frame =
"\n" +
sampleLines[namePropDescriptor].replace(
" at new ",
" at "
);
fn.displayName &&
_frame.includes("<anonymous>") &&
(_frame = _frame.replace("<anonymous>", fn.displayName));
"function" === typeof fn &&
componentFrameCache.set(fn, _frame);
return _frame;
}
while (1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter);
}
break;
}
}
} finally {
(reentry = false),
(ReactSharedInternals.H = previousDispatcher),
reenableLogs(),
(Error.prepareStackTrace = frame);
}
sampleLines = (sampleLines = fn ? fn.displayName || fn.name : "")
? describeBuiltInComponentFrame(sampleLines)
: "";
"function" === typeof fn && componentFrameCache.set(fn, sampleLines);
return sampleLines;
}
function describeUnknownElementTypeFrameInDEV(type) {
if (null == type) return "";
if ("function" === typeof type) {
var prototype = type.prototype;
return describeNativeComponentFrame(
type,
!(!prototype || !prototype.isReactComponent)
);
}
if ("string" === typeof type) return describeBuiltInComponentFrame(type);
switch (type) {
case REACT_SUSPENSE_TYPE:
return describeBuiltInComponentFrame("Suspense");
case REACT_SUSPENSE_LIST_TYPE:
return describeBuiltInComponentFrame("SuspenseList");
}
if ("object" === typeof type)
switch (type.$$typeof) {
case REACT_FORWARD_REF_TYPE:
return (type = describeNativeComponentFrame(type.render, false)), type;
case REACT_MEMO_TYPE:
return describeUnknownElementTypeFrameInDEV(type.type);
case REACT_LAZY_TYPE:
prototype = type._payload;
type = type._init;
try {
return describeUnknownElementTypeFrameInDEV(type(prototype));
} catch (x) {}
}
return "";
}
function getOwner() {
var dispatcher = ReactSharedInternals.A;
return null === dispatcher ? null : dispatcher.getOwner();
}
function hasValidKey(config) {
if (hasOwnProperty.call(config, "key")) {
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
if (getter && getter.isReactWarning) return false;
}
return void 0 !== config.key;
}
function defineKeyPropWarningGetter(props, displayName) {
function warnAboutAccessingKey() {
specialPropKeyWarningShown ||
((specialPropKeyWarningShown = true),
console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
displayName
));
}
warnAboutAccessingKey.isReactWarning = true;
Object.defineProperty(props, "key", {
get: warnAboutAccessingKey,
configurable: true
});
}
function elementRefGetterWithDeprecationWarning() {
var componentName = getComponentNameFromType(this.type);
didWarnAboutElementRef[componentName] ||
((didWarnAboutElementRef[componentName] = true),
console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
));
componentName = this.props.ref;
return void 0 !== componentName ? componentName : null;
}
function ReactElement(type, key, self, source, owner, props) {
self = props.ref;
type = {
$$typeof: REACT_ELEMENT_TYPE,
type: type,
key: key,
props: props,
_owner: owner
};
null !== (void 0 !== self ? self : null)
? Object.defineProperty(type, "ref", {
enumerable: false,
get: elementRefGetterWithDeprecationWarning
})
: Object.defineProperty(type, "ref", { enumerable: false, value: null });
type._store = {};
Object.defineProperty(type._store, "validated", {
configurable: false,
enumerable: false,
writable: true,
value: 0
});
Object.defineProperty(type, "_debugInfo", {
configurable: false,
enumerable: false,
writable: true,
value: null
});
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
return type;
}
function jsxDEVImpl(
type,
config,
maybeKey,
isStaticChildren,
source,
self
) {
if (
"string" === typeof type ||
"function" === typeof type ||
type === REACT_FRAGMENT_TYPE ||
type === REACT_PROFILER_TYPE ||
type === REACT_STRICT_MODE_TYPE ||
type === REACT_SUSPENSE_TYPE ||
type === REACT_SUSPENSE_LIST_TYPE ||
type === REACT_OFFSCREEN_TYPE ||
("object" === typeof type &&
null !== type &&
(type.$$typeof === REACT_LAZY_TYPE ||
type.$$typeof === REACT_MEMO_TYPE ||
type.$$typeof === REACT_CONTEXT_TYPE ||
type.$$typeof === REACT_CONSUMER_TYPE ||
type.$$typeof === REACT_FORWARD_REF_TYPE ||
type.$$typeof === REACT_CLIENT_REFERENCE$1 ||
void 0 !== type.getModuleId))
) {
var children = config.children;
if (void 0 !== children)
if (isStaticChildren)
if (isArrayImpl(children)) {
for (
isStaticChildren = 0;
isStaticChildren < children.length;
isStaticChildren++
)
validateChildKeys(children[isStaticChildren], type);
Object.freeze && Object.freeze(children);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else validateChildKeys(children, type);
} else {
children = "";
if (
void 0 === type ||
("object" === typeof type &&
null !== type &&
0 === Object.keys(type).length)
)
children +=
" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.";
null === type
? (isStaticChildren = "null")
: isArrayImpl(type)
? (isStaticChildren = "array")
: void 0 !== type && type.$$typeof === REACT_ELEMENT_TYPE
? ((isStaticChildren =
"<" +
(getComponentNameFromType(type.type) || "Unknown") +
" />"),
(children =
" Did you accidentally export a JSX literal instead of a component?"))
: (isStaticChildren = typeof type);
console.error(
"React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
isStaticChildren,
children
);
}
if (hasOwnProperty.call(config, "key")) {
children = getComponentNameFromType(type);
var keys = Object.keys(config).filter(function (k) {
return "key" !== k;
});
isStaticChildren =
0 < keys.length
? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
: "{key: someKey}";
didWarnAboutKeySpread[children + isStaticChildren] ||
((keys =
0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
console.error(
'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
isStaticChildren,
children,
keys,
children
),
(didWarnAboutKeySpread[children + isStaticChildren] = true));
}
children = null;
void 0 !== maybeKey &&
(checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
hasValidKey(config) &&
(checkKeyStringCoercion(config.key), (children = "" + config.key));
if ("key" in config) {
maybeKey = {};
for (var propName in config)
"key" !== propName && (maybeKey[propName] = config[propName]);
} else maybeKey = config;
children &&
defineKeyPropWarningGetter(
maybeKey,
"function" === typeof type
? type.displayName || type.name || "Unknown"
: type
);
return ReactElement(type, children, self, source, getOwner(), maybeKey);
}
function validateChildKeys(node, parentType) {
if (
"object" === typeof node &&
node &&
node.$$typeof !== REACT_CLIENT_REFERENCE
)
if (isArrayImpl(node))
for (var i = 0; i < node.length; i++) {
var child = node[i];
isValidElement(child) && validateExplicitKey(child, parentType);
}
else if (isValidElement(node))
node._store && (node._store.validated = 1);
else if (
(null === node || "object" !== typeof node
? (i = null)
: ((i =
(MAYBE_ITERATOR_SYMBOL && node[MAYBE_ITERATOR_SYMBOL]) ||
node["@@iterator"]),
(i = "function" === typeof i ? i : null)),
"function" === typeof i &&
i !== node.entries &&
((i = i.call(node)), i !== node))
)
for (; !(node = i.next()).done; )
isValidElement(node.value) &&
validateExplicitKey(node.value, parentType);
}
function isValidElement(object) {
return (
"object" === typeof object &&
null !== object &&
object.$$typeof === REACT_ELEMENT_TYPE
);
}
function validateExplicitKey(element, parentType) {
if (
element._store &&
!element._store.validated &&
null == element.key &&
((element._store.validated = 1),
(parentType = getCurrentComponentErrorInfo(parentType)),
!ownerHasKeyUseWarning[parentType])
) {
ownerHasKeyUseWarning[parentType] = true;
var childOwner = "";
element &&
null != element._owner &&
element._owner !== getOwner() &&
((childOwner = null),
"number" === typeof element._owner.tag
? (childOwner = getComponentNameFromType(element._owner.type))
: "string" === typeof element._owner.name &&
(childOwner = element._owner.name),
(childOwner = " It was passed a child from " + childOwner + "."));
var prevGetCurrentStack = ReactSharedInternals.getCurrentStack;
ReactSharedInternals.getCurrentStack = function () {
var stack = describeUnknownElementTypeFrameInDEV(element.type);
prevGetCurrentStack && (stack += prevGetCurrentStack() || "");
return stack;
};
console.error(
'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
parentType,
childOwner
);
ReactSharedInternals.getCurrentStack = prevGetCurrentStack;
}
}
function getCurrentComponentErrorInfo(parentType) {
var info = "",
owner = getOwner();
owner &&
(owner = getComponentNameFromType(owner.type)) &&
(info = "\n\nCheck the render method of `" + owner + "`.");
info ||
((parentType = getComponentNameFromType(parentType)) &&
(info =
"\n\nCheck the top-level render call using <" + parentType + ">."));
return info;
}
var React = require$$0,
REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
REACT_PORTAL_TYPE = Symbol.for("react.portal"),
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
REACT_PROFILER_TYPE = Symbol.for("react.profiler");
var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
REACT_CONTEXT_TYPE = Symbol.for("react.context"),
REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
REACT_MEMO_TYPE = Symbol.for("react.memo"),
REACT_LAZY_TYPE = Symbol.for("react.lazy"),
REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
MAYBE_ITERATOR_SYMBOL = Symbol.iterator,
REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"),
ReactSharedInternals =
React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
hasOwnProperty = Object.prototype.hasOwnProperty,
assign = Object.assign,
REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"),
isArrayImpl = Array.isArray,
disabledDepth = 0,
prevLog,
prevInfo,
prevWarn,
prevError,
prevGroup,
prevGroupCollapsed,
prevGroupEnd;
disabledLog.__reactDisabledLog = true;
var prefix,
suffix,
reentry = false;
var componentFrameCache = new (
"function" === typeof WeakMap ? WeakMap : Map
)();
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
specialPropKeyWarningShown;
var didWarnAboutElementRef = {};
var didWarnAboutKeySpread = {},
ownerHasKeyUseWarning = {};
reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
reactJsxRuntime_development.jsx = function (type, config, maybeKey, source, self) {
return jsxDEVImpl(type, config, maybeKey, false, source, self);
};
reactJsxRuntime_development.jsxs = function (type, config, maybeKey, source, self) {
return jsxDEVImpl(type, config, maybeKey, true, source, self);
};
})();
return reactJsxRuntime_development;
}
var hasRequiredJsxRuntime;
function requireJsxRuntime () {
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
hasRequiredJsxRuntime = 1;
if (process.env.NODE_ENV === 'production') {
jsxRuntime.exports = requireReactJsxRuntime_production();
} else {
jsxRuntime.exports = requireReactJsxRuntime_development();
}
return jsxRuntime.exports;
}
var jsxRuntimeExports = requireJsxRuntime();
const opacityIn = (timeInSeconds) => css `
@keyframes opacityInFrames {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
animation: opacityInFrames ease-in-out ${timeInSeconds}s;
`;
const styleScrollbar = (theme) => css `
::-webkit-scrollbar {
width: 0.5rem;
}
/* Track */
::-webkit-scrollbar-track {
background: ${theme.colors.gray800};
}
/* Handle */
::-webkit-scrollbar-thumb {
background: ${theme.colors.gray600};
border-radius: 1rem;
height: 5rem;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
`;
function _taggedTemplateLiteral(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
function _templateObject5() {
var data = _taggedTemplateLiteral(["\n @media (min-width: ", ") {\n ", "\n }\n "]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n @media (max-width: ", ") {\n ", "\n }\n "]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n @media (min-width: ", ") and\n (max-width: ", ") {\n ", "\n }\n "]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n @media (min-width: ", ") {\n ", "\n }\n "]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n @media (max-width: ", ") {\n ", "\n }\n "]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
/**
* Default media breakpoints
* @type {Object}
*/
var defaultBreakpoints = {
huge: '1440px',
large: '1170px',
medium: '768px',
small: '450px'
};
function getSizeFromBreakpoint(breakpointValue) {
var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (breakpoints[breakpointValue]) {
return breakpoints[breakpointValue];
} else if (parseInt(breakpointValue)) {
return breakpointValue;
} else {
console.error('styled-media-query: No valid breakpoint or size specified for media.');
return '0';
}
}
/**
* Media query generator
* @param {Object} breakpoints - Map labels to breakpoint sizes
* @return {Object} - Media generators for each breakpoint
*/
function generateMedia() {
var breakpoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultBreakpoints;
var lessThan = function lessThan(breakpoint) {
return function () {
return css(_templateObject(), getSizeFromBreakpoint(breakpoint, breakpoints), css.apply(void 0, arguments));
};
};
var greaterThan = function greaterThan(breakpoint) {
return function () {
return css(_templateObject2(), getSizeFromBreakpoint(breakpoint, breakpoints), css.apply(void 0, arguments));
};
};
var between = function between(firstBreakpoint, secondBreakpoint) {
return function () {
return css(_templateObject3(), getSizeFromBreakpoint(firstBreakpoint, breakpoints), getSizeFromBreakpoint(secondBreakpoint, breakpoints), css.apply(void 0, arguments));
};
};
var oldStyle = Object.keys(breakpoints).reduce(function (acc, label) {
var size = breakpoints[label];
acc.to[label] = function () {
console.warn("styled-media-query: Use media.lessThan('".concat(label, "') instead of old media.to.").concat(label, " (Probably we'll deprecate it)"));
return css(_templateObject4(), size, css.apply(void 0, arguments));
};
acc.from[label] = function () {
console.warn("styled-media-query: Use media.greaterThan('".concat(label, "') instead of old media.from.").concat(label, " (Probably we'll deprecate it)"));
return css(_templateObject5(), size, css.apply(void 0, arguments));
};
return acc;
}, {
to: {},
from: {}
});
return Object.assign({
lessThan: lessThan,
greaterThan: greaterThan,
between: between
}, oldStyle);
}
/**
* Media object with default breakpoints
* @return {object} - Media generators for each size
*/
var index = generateMedia();
function getTheme(darkMode = true) {
return {
grid: {
container: '130rem',
gutter: '3.2rem'
},
border: {
radius: '0.2rem',
color: darkMode ? '#292930' : '#E8E8E8'
},
font: {
family: {
neue: "Neue Montreal, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
coanda: "'Coanda', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
},
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
sizes: {
xxsmall: '1.4rem',
xsmall: '1.8rem',
small: '2rem',
medium: '3rem',
large: '7rem',
xlarge: '12rem',
xxlarge: '20rem',
huge: '23rem',
mobile: {
xsmall: '1.6rem',
small: '2rem',
medium: '3.6rem',
large: '5rem',
xlarge: '8rem'
}
}
},
colors: {
primary: '#93A7E3',
console: '#5AEDFC',
console2: '#B2F8FF',
consolePro: '#CA89F9',
aaveGho: '#D4CDEA',
topgear: '#FF86D1',
bgGradient: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #0D0E11;',
success: '#66DB94',
error: '#F45562',
warning: '#FFAD0D',
white: '#FFFFFF',
black: '#000000',
gray100: '#E6E8ED',
gray200: '#DEE0E3',
gray300: '#CBCED1',
gray400: '#A8ADB5',
gray500: '#6D7178',
gray600: '#494C56',
gray700: '#292930',
gray800: '#18181C',
gray900: '#0D0D10',
light500: '#A3A3A3',
mainBg: '#0D0E11',
kernel: '#D9A4FF',
blast: '#F8FC53',
arbitrum: '#35434f',
automation: '#E4CAFF',
template: '#FDFFB1',
berabaddies: '#F478C4'
},
spacings: {
xxsmall: '0.8rem',
xsmall: '1.6rem',
small: '2.4rem',
medium: '3.2rem',
large: '4.0rem',
xlarge: '4.8rem',
xxlarge: '5.6rem'
},
layers: {
base: 10,
menu: 20,
overlay: 30,
modal: 40,
alwaysOnTop: 50
},
transition: {
default: '0.3s ease-in-out',
fast: '0.1s ease-in-out',
long: '0.7s ease-in-out'
}
};
}
const theme = getTheme(true);
const customMediaBreakpoints = {
huge: 1600,
xLarge: 1400,
large: 1250,
medium: 950,
small: 700
};
generateMedia({
huge: `${customMediaBreakpoints.huge}px`,
xLarge: `${customMediaBreakpoints.xLarge}px`,
large: `${customMediaBreakpoints.large}px`,
medium: `${customMediaBreakpoints.medium}px`,
small: `${customMediaBreakpoints.small}px`
});
const hexTransparencies = {
70: 'B3',
16: '29',
12: '1F',
8: '14'};
const ModalWrapper = styled.div `
${({ isOpen, zIndex, overlay, bgOpacity }) => css `
${opacityIn(0.25)};
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background: ${overlay ? `rgba(0, 0, 0, ${bgOpacity})` : 'transparent'};
z-index: ${zIndex || theme.layers.modal};
visibility: ${isOpen ? 'visible' : 'hidden'};
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
overflow: hidden;
`}
`;
const ModalContent = styled.div `
${({ top, isCenterAligned, marginBottom }) => css `
${styleScrollbar(theme)}
display: flex;
justify-content: center;
overflow-y: auto;
height: 100%;
width: 100%;
overscroll-behavior: contain;
${marginBottom && `margin-bottom: ${marginBottom}`};
${isCenterAligned
? css `
align-items: center;
`
: css `
padding-top: ${top}rem;
`}
`}
`;
const BackgroundWrapper = styled.div `
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
`;
function Modal({ children, isOpen, onClickOutside, top = 20, zIndex, overlay = true, isCenterAligned = true, marginBottom, bgOpacity = 0.8, bgComponent, style }) {
return (jsxRuntimeExports.jsxs(ModalWrapper, { bgOpacity: bgOpacity, isOpen: isOpen, zIndex: zIndex, overlay: overlay, style: style, children: [bgComponent && (jsxRuntimeExports.jsx(BackgroundWrapper, { bgOpacity: bgOpacity, children: bgComponent })), jsxRuntimeExports.jsx(ModalContent, { top: top, isCenterAligned: isCenterAligned, marginBottom: marginBottom, onClick: () => {
onClickOutside && onClickOutside();
}, children: jsxRuntimeExports.jsx("div", { onClick: (e) => {
e.stopPropagation();
}, children: children }) })] }));
}
const wrapperModifiers = {
TITLE_XXL: css `
font-family: ${theme.font.family.neue};
font-size: 2.8rem;
font-weight: ${theme.font.medium};
line-height: 4rem;
`,
TITLE_XL: css `
font-family: ${theme.font.family.neue};
font-size: 2.4rem;
font-weight: ${theme.font.medium};
line-height: 3.6rem;
`,
TITLE_L: css `
font-size: 2rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
line-height: 2.8rem;
`,
TITLE_M: css `
font-size: 1.8rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
line-height: 2.8rem;
`,
TITLE_S: css `
font-size: 1.6rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
line-height: 2.4rem;
`,
TITLE_XS: css `
font-size: 1.4rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
line-height: 2rem;
`,
BODY_L: css `
font-size: 1.8em;
line-height: 2.8rem;
font-weight: ${theme.font.regular};
font-family: ${theme.font.family.neue};
`,
BODY_M: css `
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: ${theme.font.regular};
font-family: ${theme.font.family.neue};
`,
BODY_S: css `
font-size: 1.4rem;
line-height: 2rem;
font-weight: ${theme.font.regular};
font-family: ${theme.font.family.neue};
`,
BODY_XS: css `
font-size: 1.2rem;
line-height: 1.6rem;
font-weight: ${theme.font.regular};
font-family: ${theme.font.family.neue};
`,
BODY_XXS: css `
font-size: 1rem;
line-height: 1.6rem;
font-weight: ${theme.font.regular};
font-family: ${theme.font.family.neue};
`,
BODY_MEDIUM_L: css `
font-size: 1.8rem;
line-height: 2.8rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
`,
BODY_MEDIUM_M: css `
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
`,
BODY_MEDIUM_S: css `
font-size: 1.4rem;
line-height: 2rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
`,
BODY_MEDIUM_XS: css `
font-size: 1.2rem;
line-height: 1.6rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
`,
TAG: css `
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
text-transform: uppercase;
`,
BUTTON: css `
font-family: ${theme.font.family.neue};
font-weight: ${theme.font.bold};
font-size: ${theme.font.sizes.small};
line-height: 28px;
`,
LINK: css `
font-size: 1.4rem;
line-height: 2.4rem;
font-weight: ${theme.font.medium};
font-family: ${theme.font.family.neue};
text-decoration: underline;
`,
TITLE_COANDA: css `
font-family: 'Coanda';
font-size: 6.4rem;
font-weight: 400;
line-height: 8rem;
`
};
const Wrapper = styled.p `
${({ type, color, shouldInheritColor, textAlign, hoverColor }) => css `
color: ${color ? color : theme.colors.gray200};
text-align: ${textAlign ? textAlign : 'center'};
${!!type && wrapperModifiers[type]}
${shouldInheritColor && 'color: inherit'};
transition: color ${theme.transition.default};
${hoverColor &&
css `
&:hover {
color: ${hoverColor};
}
`}
&::selection {
background-color: ${theme.colors.console2};
color: ${theme.colors.black};
}
&::-moz-selection {
background-color: ${theme.colors.console2};
color: ${theme.colors.black};
}
`}
`;
function Typography({ type = 'TITLE_S', children, color, hoverColor, textAlign = 'left', shouldInheritColor = false, style, ...props }) {
return (jsxRuntimeExports.jsx(Wrapper, { type: type, color: color, shouldInheritColor: shouldInheritColor, style: style, textAlign: textAlign, hoverColor: hoverColor, ...props, children: children }));
}
const selectStyle$1 = {
primary: () => css `
background: ${theme.colors.console2}14;
border: 1px solid ${theme.colors.console2};
color: ${theme.colors.console2};
&:hover {
background: ${theme.colors.console2}2B;
border: 1px solid ${theme.colors.console2};
}
`,
secondary: () => css `
color: ${theme.colors.gray400};
background-color: transparent;
border: 1px solid ${theme.colors.gray700};
&:hover {
background: ${theme.colors.gray700};
border: 1px solid ${theme.colors.gray600};
color: ${theme.colors.gray300};
}
`,
black: () => css `
border: 1px solid ${theme.colors.black};
color: ${theme.colors.console2};
background-color: ${theme.colors.black};
&:hover {
background: transparent;
border: 1px solid ${theme.colors.black};
color: ${theme.colors.black};
}
`,
warning: () => css `
background: ${theme.colors.warning}10;
border: 1px solid ${theme.colors.warning};
color: ${theme.colors.warning};
&:hover {
background: ${theme.colors.warning}30;
}
`,
warningSecondary: () => css `
background: transparent;
border: 1px solid ${theme.colors.warning};
color: ${theme.colors.warning};
&:hover {
background: ${theme.colors.warning}30;
}
`,
danger: () => css `
background: ${theme.colors.error}10;
border: 1px solid ${theme.colors.error};
color: ${theme.colors.error};
&:hover {
background: ${theme.colors.error}30;
}
`,
kernel: () => css `
background: ${theme.colors.kernel}10;
border: 1px solid ${theme.colors.kernel};
color: ${theme.colors.kernel};
&:hover {
background: ${theme.colors.kernel}30;
}
`,
blast: () => css `
background: ${theme.colors.blast}10;
border: 1px solid ${theme.colors.blast};
color: ${theme.colors.blast};
backdrop-filter: blur(6px);
&:hover {
background: ${theme.colors.blast}30;
}
`,
custom: (color) => css `
background: ${color}10;
border: 1px solid ${color};
color: ${color};
&:hover {
background: ${color}30;
border: 1px solid ${color};
}
`,
white: () => css `
background: ${theme.colors.white};
color: ${theme.colors.black};
border: none;
&:hover {
background: ${theme.colors.gray200};
}
`,
berabaddies: () => css `
background: ${theme.colors.berabaddies};
border: none;
color: ${theme.colors.black};
backdrop-filter: blur(6px);
&:hover {
background: ${theme.colors.berabaddies}${hexTransparencies['70']};
}
`,
M: () => css `
font-size: 1.4rem;
padding: 0.4rem 4rem;
height: 4.4rem;
width: max-content;
`,
S: () => css `
font-size: 1.4rem;
padding: 0.8rem;
width: max-content;
border-radius: 0.4rem;
font-weight: 500;
`,
L: () => css `
font-size: 1.4rem;
padding: 0.4rem 4rem;
height: 4.4rem;
width: 100%;
`
};
const StyledButton = styled.button `
${({ color, buttonType, buttonSize = 'M', removePadding = false }) => css `
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
line-height: 2rem;
cursor: pointer;
transition: border 0.1s linear, background 0.1s linear;
border-radius: 0.8rem;
font-weight: ${theme.font.medium};
${buttonSize && selectStyle$1[buttonSize](color)};
${buttonType && selectStyle$1[buttonType](color)};
${!!removePadding && 'padding: 0'};
&:disabled {
background: ${theme.colors.gray600};
color: ${theme.colors.gray400};
cursor: not-allowed;
border: none;
}
`}
`;
function Button({ buttonType = 'primary', buttonSize = 'M', removePadding = false, children, ...props }) {
return (jsxRuntimeExports.jsx(StyledButton, { ...props, buttonSize: buttonSize, buttonType: buttonType, removePadding: removePadding, children: typeof children === 'string' ? (jsxRuntimeExports.jsx(Typography, { type: "TITLE_XS", style: { color: 'inherit' }, children: children })) : (children) }));
}
const FlexContainer = styled.div `
${({ flexDirection = 'row', justifyContent = 'flex-start', alignItems = 'flex-start', flex = true, gap, mobileGap, width, height, padding, style, opacityInEffect = false, bgColor, borderRadius, hoverBgColor, borderColor, hoverBorderColor, cursor }) => css `
display: flex;
flex-direction: ${flexDirection};
justify-content: ${justifyContent};
align-items: ${alignItems};
transition: background-color ${theme.transition.default},
border ${theme.transition.default};
${flex && 'flex: 1'};
${!!gap && `gap: ${gap}rem`};
${!!width && `width: ${width}%`};
${!!height && `height: ${height}%`};
${!!padding && `padding: ${padding}`};
${!!bgColor && `background-color:${bgColor}`};
${!!borderColor && `border: 1px solid ${borderColor}`};
${!!borderRadius && `border-radius: ${borderRadius}rem`};
${!!cursor && `cursor: ${cursor}`};
${!!opacityInEffect && opacityIn(0.5)};
${!!style && style};
&:hover {
${!!hoverBgColor && `background-color:${hoverBgColor}`};
${!!hoverBorderColor && `border: 1px solid ${hoverBorderColor}`};
}
${index.lessThan('medium') `
${!!mobileGap && `gap: ${mobileGap}rem`};
`}
`}
`;
const selectStyle = {
primary: css `
background-color: ${theme.colors.gray700};
color: ${theme.colors.gray400};
border: 1px solid ${theme.colors.gray600};
&:hover {
border: 1px solid ${theme.colors.gray500};
}
&:disabled {
cursor: not-allowed;
background-color: ${({ theme }) => theme.colors.gray600};
color: ${({ theme }) => theme.colors.gray400};
svg,
path {
fill: ${({ theme }) => theme.colors.gray400};
}
}
`,
blast: css `
background-color: ${theme.colors.blast + hexTransparencies['8']};
color: ${theme.colors.blast};
border: 1px solid ${theme.colors.gray700};
&:hover {
background-color: ${theme.colors.blast + hexTransparencies['16']};
}
&:disabled {
cursor: not-allowed;
background-color: ${({ theme }) => theme.colors.gray600};
color: ${({ theme }) => theme.colors.gray400};
svg,
path {
fill: ${({ theme }) => theme.colors.gray400};
}
}
`,
console: css `
background-color: ${theme.colors.console2 + hexTransparencies['8']};
color: ${theme.colors.console2};
border: 1px solid ${theme.colors.console2 + hexTransparencies['12']};
&:hover {
background-color: ${theme.colors.console2 + hexTransparencies['16']};
}
&:disabled {
cursor: not-allowed;
background-color: ${({ theme }) => theme.colors.gray600};
color: ${({ theme }) => theme.colors.gray400};
svg,
path {
fill: ${({ theme }) => theme.colors.gray400};
}
}
`,
warning: css `
background-color: ${theme.colors.blast + hexTransparencies['8']};
color: ${theme.colors.blast};
border: 1px solid ${theme.colors.gray700};
&:hover {
background: ${theme.colors.blast + hexTransparencies['16']};
}
&:disabled {
cursor: not-allowed;
background-color: ${({ theme }) => theme.colors.gray600};
color: ${({ theme }) => theme.colors.gray400};
svg,
path {
fill: ${({ theme }) => theme.colors.gray400};
}
}
`
};
styled.button `
${({ buttonType }) => css `
display: flex;
justify-content: center;
gap: 0.6rem;
align-items: center;
width: fit-content;
cursor: pointer;
border-radius: 0.4rem;
transition: background-color ${theme.transition.default},
border-color ${theme.transition.default};
svg {
fill: ${theme.colors.console2};
}
${selectStyle[buttonType]}
`}
`;
const StyledGrayBoundaryBlackWrapper = styled(FlexContainer) `
${({ flexDirection }) => css `
& > :first-child {
border-radius: ${flexDirection === 'row'
? '0.4rem 0 0 0.4rem'
: '0.4rem 0.4rem 0 0'} !important;
}
& > :last-child {
border-radius: ${flexDirection === 'row'
? '0 0.4rem 0.4rem 0'
: '0 0 0.4rem 0.4rem'} !important;
}
& > :only-child {
border-radius: 0.4rem !important;
}
`}
`;
function GrayBoundaryBlackWrapper({ flexDirection = 'column', padding = '0.2rem', children, style, onClick }) {
return (jsxRuntimeExports.jsx(StyledGrayBoundaryBlackWrapper, { onClick: onClick && onClick, padding: padding, borderColor: theme.colors.gray700, bgColor: theme.colors.black, borderRadius: 0.8, flexDirection: flexD