Merge branch 'main' into chore/wallet-kit

apps/enterprise/package.json

@@ -37,6 +37,7 @@
     "@terra-money/log-finder-ruleset": "^3.0.2",
     "@terra-money/wallet-kit": "1.0.4",
     "@terra.kitchen/utils": "^1.0.7",
+    "ace-builds": "^1.23.4",
     "big.js": "^6.2.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.3",

apps/enterprise/src/App.tsx

@@ -2,21 +2,20 @@ import { NetworkGuard } from 'components/network-guard';
 import { SnackbarContainer } from 'components/snackbar';
 import { SnackbarProvider } from 'notistack';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import styles from './App.module.sass';
-import { darkTheme } from 'lib/ui/theme/darkTheme';
-import { ThemeProvider } from 'styled-components';
 import { GlobalStyle } from 'lib/ui/GlobalStyle';
 import { TransactionErrorProvider } from 'chain/components/TransactionErrorProvider';
 import { PersonalizationProvider } from 'libs/personalization/PersonalizationProvider';
 import { setupErrorMonitoring } from 'errors/errorMonitoring';
 import { AppRoutes } from 'navigation/AppRoutes';
 import { GlobalErrorBoundary } from 'errors/components/GlobalErrorBoundary';
 import { TransactionsProvider } from 'chain/transactions';
+import { ThemeProvider } from 'lib/ui/theme/ThemeProvider';
 
 const queryClient = new QueryClient();
 
 const AppProviders = () => {
   return (
+
     <ThemeProvider theme={darkTheme}>
       <GlobalStyle />
       <GlobalErrorBoundary>

apps/enterprise/src/chain/components/WalletButton/index.tsx

@@ -1,3 +1,4 @@
+
 // TODO: migrate from sass to styled-components
 import { useWallet, WalletStatus } from '@terra-money/wallet-kit';
 import { ReactComponent as WalletIcon } from 'components/assets/Wallet.svg';

apps/enterprise/src/chain/utils/toChainAmount.ts

@@ -1,5 +1,7 @@
 import { Big } from 'big.js';
 
 export const toChainAmount = (amount: number, decimals: number) => {
+  Big.PE = 100
+  Big.NE = -100
   return Big(amount).mul(Math.pow(10, decimals)).toString();
 };

apps/enterprise/src/components/Navigation/SideNavigation.tsx

@@ -12,6 +12,7 @@ import { ManageDaosButton } from 'dao/components/ManageDaosButton';
 import { Tooltip } from 'lib/ui/Tooltip';
 import { IconButton } from 'lib/ui/buttons/IconButton';
 import { useConnectedWallet } from '@terra-money/wallet-kit';
+import { ThemeToggleButton } from 'lib/ui/theme/ThemeToggleButton';
 
 const Container = styled(VStack)`
   padding: 32px;
@@ -52,6 +53,7 @@ export const SideNavigation = () => {
         </VStack>
       </VStack>
       <VStack gap={24} alignItems="center">
+        <ThemeToggleButton />
         <Tooltip
           content="Got feedback?"
           placement="right"

apps/enterprise/src/components/form-footer/FormFooter.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import styles from './FormFooter.module.sass';
-import { HStack } from 'lib/ui/Stack';
+import { SameWidthChildrenRow } from 'lib/ui/Layout/SameWidthChildrenRow';
 
 interface FormFooterProps {
   primary: ReactNode;
@@ -9,9 +8,9 @@ interface FormFooterProps {
 
 export const FormFooter = ({ primary, secondary }: FormFooterProps) => {
   return (
-    <HStack className={styles.root} gap={16} alignItems="center">
+    <SameWidthChildrenRow  gap={16} childrenWidth={140}>
       {secondary}
       {primary}
-    </HStack>
+    </SameWidthChildrenRow>
   );
 };

apps/enterprise/src/components/form-section/FormSection.tsx

@@ -1,4 +1,4 @@
-import { Text } from 'components/primitives';
+import { Text } from 'lib/ui/Text';
 import { ReactNode } from 'react';
 import styles from './FormSection.module.sass';
 import { ComponentWithChildrenProps } from 'lib/shared/props';
@@ -10,7 +10,7 @@ interface FormSectionProps extends ComponentWithChildrenProps {
 export const FormSection = ({ name, children }: FormSectionProps) => {
   return (
     <div className={styles.root}>
-      <Text variant="heading4">{name}</Text>
+      <Text weight="semibold">{name}</Text>
       {children}
     </div>
   );

apps/enterprise/src/components/layout/Logo.tsx

@@ -1,31 +1,38 @@
-import classNames from 'classnames';
-import { Text } from 'components/primitives';
+import { Text } from 'lib/ui/Text';
 import { ReactComponent as LogoIcon } from 'components/assets/LogoSmall.svg';
-import styles from './Logo.module.sass';
 import { Stack } from 'lib/ui/Stack';
+import styled from 'styled-components';
+import { getSameDimensionsCSS } from 'lib/ui/utils/getSameDimensionsCSS';
+import { roundedCSS } from 'lib/ui/utils/roundedCSS';
+import { centerContentCSS } from 'lib/ui/utils/centerContentCSS';
+import { getColor } from 'lib/ui/theme/getters';
 
 interface LogoProps {
   className?: string;
   compact?: boolean;
   onClick?: () => void;
 }
 
+const Container = styled.div`
+  ${getSameDimensionsCSS(48)};
+  ${roundedCSS};
+  ${centerContentCSS};
+  font-size: 24px;
+  color: ${getColor('background')};
+  background: ${getColor('contrast')};
+`;
+
 export const Logo = (props: LogoProps) => {
-  const { className, compact = false, onClick } = props;
+  const { compact = false, onClick } = props;
 
   return (
-    <Stack direction="row" className={classNames(className, styles.root)}>
-      <div
-        className={classNames(styles.icon, {
-          [styles.clickable]: onClick,
-        })}
-        onClick={() => onClick && onClick()}
-      >
+    <Stack alignItems="center" direction="row" gap={24}>
+      <Container onClick={() => onClick && onClick()}>
         <LogoIcon />
-      </div>
+      </Container>
 
       {compact === false && (
-        <Text className={styles.text} variant="heading3" weight="bold">
+        <Text size={24} weight="bold">
           Enterprise
         </Text>
       )}