100 char width

.prettierrc

@@ -6,5 +6,6 @@
   "jsxSingleQuote": true,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "arrowParens": "always"
-}
+  "arrowParens": "always",
+  "printWidth": 100
+}

cypress/common/index.ts

@@ -23,15 +23,13 @@ export const connectWallet = () => {
         address: ALICE,
         name: 'Alice',
         type: 'sr25519',
-        mnemonic:
-          'bottom drive obey lake curtain smoke basket hold race lonely fit walk',
+        mnemonic: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk',
       },
       {
         address: BOB,
         name: 'Bob',
         type: 'sr25519',
-        mnemonic:
-          'sample split bamboo west visual approve brain fox arch impact relief smile',
+        mnemonic: 'sample split bamboo west visual approve brain fox arch impact relief smile',
       },
     ],
     APP_NAME

cypress/e2e/purchase.cy.ts

@@ -9,16 +9,12 @@ describe('E2E tests for the purchase page', () => {
 
     connectWallet();
     // Wallet connection works:
-    cy.get('[data-cy="connect-wallet"]', { timeout: 5 * 1000 }).should(
-      'not.exist'
-    );
+    cy.get('[data-cy="connect-wallet"]', { timeout: 5 * 1000 }).should('not.exist');
     cy.get('[data-cy="address"]').should('exist');
     cy.get('[data-cy="address"]').should('contain.text', '5DfhGy...1EqRzV');
 
     // Fetching complete
-    cy.get('[data-cy="loading-current-price"]', { timeout: 60 * 1000 }).should(
-      'not.exist'
-    );
+    cy.get('[data-cy="loading-current-price"]', { timeout: 60 * 1000 }).should('not.exist');
   });
 
   it('Successfully loads the purchase page and all UI elements are in place.', () => {

next.config.js

@@ -13,13 +13,11 @@ const nextConfig = {
 
     ROCOCO_CORETIME_INDEXER: process.env.ROCOCO_CORETIME_INDEXER || '',
     KUSAMA_CORETIME_INDEXER: process.env.KUSAMA_CORETIME_INDEXER || '',
-    SUBSCAN_CORETIME_WESTEND_INDEXER:
-      process.env.SUBSCAN_CORETIME_WESTEND_INDEXER || '',
+    SUBSCAN_CORETIME_WESTEND_INDEXER: process.env.SUBSCAN_CORETIME_WESTEND_INDEXER || '',
 
     ROCOCO_CORETIME_DICT: process.env.ROCOCO_CORETIME_DICT || '',
     KUSAMA_CORETIME_DICT: process.env.KUSAMA_CORETIME_DICT || '',
-    SUBSCAN_CORETIME_WESTEND_DICT:
-      process.env.SUBSCAN_CORETIME_WESTEND_DICT || '',
+    SUBSCAN_CORETIME_WESTEND_DICT: process.env.SUBSCAN_CORETIME_WESTEND_DICT || '',
 
     WS_REGIONX_COCOS_CHAIN: process.env.WS_REGIONX_COCOS_CHAIN || '',
 

src/apis/orders.ts

@@ -25,9 +25,7 @@ export const fetchUserContribution = async (
   return fetchGraphql(API_COCOS_INDEXER, query);
 };
 
-export const fetchOrders = async (
-  after: string | null
-): Promise<ApiResponse> => {
+export const fetchOrders = async (after: string | null): Promise<ApiResponse> => {
   const query = `{
     orders(after: ${after}) {
       nodes {

src/apis/sales.ts

@@ -3,9 +3,7 @@ import { fetchGraphql } from '@/utils/fetchGraphql';
 import { API_CORETIME_INDEXER } from '@/consts';
 import { ApiResponse, NetworkType } from '@/models';
 
-export const fetchBurnInfo = async (
-  network: NetworkType
-): Promise<ApiResponse> => {
+export const fetchBurnInfo = async (network: NetworkType): Promise<ApiResponse> => {
   const query = `{
     stats {
       nodes {

src/chaindata/kusama.ts

@@ -368,8 +368,7 @@ const prodParasKusama: ChainDetails[] = [
     },
     text: 'K-Laos',
     ui: {
-      color:
-        'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
+      color: 'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
       logo: chainsLaosPNG,
     },
   },
@@ -922,8 +921,7 @@ const prodParasKusama: ChainDetails[] = [
     info: 'xode',
     paraId: 3344,
     providers: {
-      XodeCommunity:
-        'wss://rpcnodea01.xode.net/n7yoxCmcIrCF6VziCcDmYTwL8R03a/rpc',
+      XodeCommunity: 'wss://rpcnodea01.xode.net/n7yoxCmcIrCF6VziCcDmYTwL8R03a/rpc',
     },
     text: 'Xode',
     ui: {

src/chaindata/rococo.ts

@@ -637,8 +637,7 @@ const testParasRococo: ChainDetails[] = [
     },
     text: 'Stagex',
     ui: {
-      color:
-        'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
+      color: 'linear-gradient(158deg, rgba(226,157,0,1) 0%, rgba(234,55,203,1) 100%)',
       logo: chainsTotemSVG,
     },
   },
@@ -673,8 +672,7 @@ const testParasRococo: ChainDetails[] = [
     },
     text: 'Tinkernet',
     ui: {
-      color:
-        'linear-gradient(90deg, rgba(253,52,166,1) 0%, rgba(22,213,239,1) 100%)',
+      color: 'linear-gradient(90deg, rgba(253,52,166,1) 0%, rgba(22,213,239,1) 100%)',
       logo: chainsTinkerPNG,
     },
   },

src/components/Accounts/TxHistory/index.tsx

@@ -26,11 +26,7 @@ interface TxHistoryModalProps extends DialogProps {
   account: Address;
 }
 
-export const TxHistoryModal = ({
-  open,
-  onClose,
-  account,
-}: TxHistoryModalProps) => {
+export const TxHistoryModal = ({ open, onClose, account }: TxHistoryModalProps) => {
   const theme = useTheme();
 
   const { network } = useNetwork();
@@ -40,10 +36,7 @@ export const TxHistoryModal = ({
     <Dialog open={open} onClose={onClose} maxWidth='md'>
       <DialogContent className={styles.container}>
         <Box>
-          <Typography
-            variant='subtitle1'
-            sx={{ color: theme.palette.common.black }}
-          >
+          <Typography variant='subtitle1' sx={{ color: theme.palette.common.black }}>
             Transaction History
           </Typography>
         </Box>

src/components/Elements/Address/index.tsx

@@ -13,13 +13,7 @@ interface AddressProps {
   center?: boolean;
 }
 
-export const Address = ({
-  value,
-  isShort,
-  isCopy,
-  size = 32,
-  center,
-}: AddressProps) => {
+export const Address = ({ value, isShort, isCopy, size = 32, center }: AddressProps) => {
   const { toastInfo } = useToast();
 
   const onCopy = () => {

src/components/Elements/Balance/index.tsx

@@ -85,9 +85,7 @@ export const Balance = ({
     <Box className={styles.container}>
       {items.map(({ label, value, symbol, decimals }, index) => (
         <Box key={index} className={styles.balanceItem}>
-          <Typography sx={{ color: theme.palette.text.primary }}>
-            {label}
-          </Typography>
+          <Typography sx={{ color: theme.palette.text.primary }}>{label}</Typography>
           <Box
             sx={{
               bgcolor: theme.palette.common.white,

src/components/Elements/Banner/index.tsx

@@ -28,12 +28,7 @@ export const Banner = ({ content, severity, link }: BannerProps) => {
     <Alert
       severity={severity}
       action={
-        <IconButton
-          aria-label='close'
-          color='inherit'
-          size='small'
-          onClick={handleClose}
-        >
+        <IconButton aria-label='close' color='inherit' size='small' onClick={handleClose}>
           <CloseIcon fontSize='inherit' />
         </IconButton>
       }

src/components/Elements/Cards/FeatureCard/index.tsx

@@ -1,11 +1,4 @@
-import {
-  Button,
-  Card,
-  CardActions,
-  CardContent,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import { Button, Card, CardActions, CardContent, Typography, useTheme } from '@mui/material';
 import Image, { StaticImageData } from 'next/image';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -20,13 +13,7 @@ interface FeatureCardProps {
   href: string;
 }
 
-export const FeatureCard = ({
-  title,
-  buttonText,
-  image,
-  enabled,
-  href,
-}: FeatureCardProps) => {
+export const FeatureCard = ({ title, buttonText, image, enabled, href }: FeatureCardProps) => {
   const { push, query } = useRouter();
   const theme = useTheme();
 

src/components/Elements/Cards/SalePhaseCard/index.tsx

@@ -1,10 +1,4 @@
-import {
-  Box,
-  CircularProgress,
-  Tooltip,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import { Box, CircularProgress, Tooltip, Typography, useTheme } from '@mui/material';
 
 import { SalePhase } from '@/models';
 
@@ -14,28 +8,20 @@ interface SalePhaseProps {
   value: SalePhase;
   cyLabel?: string;
 }
-export const SalePhaseCard = ({
-  label,
-  loading,
-  value,
-  cyLabel,
-}: SalePhaseProps) => {
+export const SalePhaseCard = ({ label, loading, value, cyLabel }: SalePhaseProps) => {
   const theme = useTheme();
 
   const tooltip = {
     [SalePhase.Interlude]:
       'During the interlude phase, renewals take place. Regular purchases cannot be made.',
     [SalePhase.Leadin]:
       'During the leadin phase, the price decreases from the start price to the floor price.',
-    [SalePhase.Regular]:
-      'During the fixed price phase, cores are sold for the floor price.',
+    [SalePhase.Regular]: 'During the fixed price phase, cores are sold for the floor price.',
   };
 
   return (
     <Box>
-      <Typography sx={{ color: theme.palette.text.primary }}>
-        {label}
-      </Typography>
+      <Typography sx={{ color: theme.palette.text.primary }}>{label}</Typography>
       <Tooltip title={tooltip[value]} arrow sx={{ fontSize: '1rem' }}>
         {loading ? (
           <CircularProgress size={16} />

src/components/Elements/CountDown/index.tsx

@@ -23,10 +23,8 @@ export const CountDown = ({ remainingTime }: CountDownProps) => {
   const [daysDuration, setDaysDuration] = useState(0);
 
   const getTimeSeconds = (time: number) => (minuteSeconds - time) | 0;
-  const getTimeMinutes = (time: number) =>
-    ((time % hourSeconds) / minuteSeconds) | 0;
-  const getTimeHours = (time: number) =>
-    ((time % daySeconds) / hourSeconds) | 0;
+  const getTimeMinutes = (time: number) => ((time % hourSeconds) / minuteSeconds) | 0;
+  const getTimeHours = (time: number) => ((time % daySeconds) / hourSeconds) | 0;
   const getTimeDays = (time: number) => (time / daySeconds) | 0;
   const renderTime = (dimension: string, time: number) => {
     return (
@@ -119,9 +117,7 @@ export const CountDown = ({ remainingTime }: CountDownProps) => {
         })}
       >
         {({ elapsedTime, color }) => (
-          <span style={{ color }}>
-            {renderTime('seconds', getTimeSeconds(elapsedTime))}
-          </span>
+          <span style={{ color }}>{renderTime('seconds', getTimeSeconds(elapsedTime))}</span>
         )}
       </CountdownCircleTimer>
     </Stack>

src/components/Elements/InfoItem/index.tsx

@@ -8,9 +8,7 @@ export const InfoItem = ({ label, value }: ItemDetail) => {
   const theme = useTheme();
   return (
     <Stack direction='column' gap='0.5rem'>
-      <Typography sx={{ color: theme.palette.text.primary }}>
-        {label}
-      </Typography>
+      <Typography sx={{ color: theme.palette.text.primary }}>{label}</Typography>
       <Typography
         sx={{
           color: theme.palette.common.black,

src/components/Elements/Inputs/AddressInput/index.tsx

@@ -1,11 +1,4 @@
-import {
-  Box,
-  Button,
-  IconButton,
-  Input,
-  InputAdornment,
-  Typography,
-} from '@mui/material';
+import { Box, Button, IconButton, Input, InputAdornment, Typography } from '@mui/material';
 import Identicon from '@polkadot/react-identicon';
 
 import { isValidAddress, writeToClipboard } from '@/utils/functions';
@@ -19,11 +12,7 @@ export interface AddressInputProps {
   label: string;
 }
 
-export const AddressInput = ({
-  onChange,
-  address,
-  label,
-}: AddressInputProps) => {
+export const AddressInput = ({ onChange, address, label }: AddressInputProps) => {
   const {
     state: { activeAccount },
   } = useAccounts();

src/components/Elements/Inputs/AmountInput/index.tsx

@@ -9,12 +9,7 @@ interface AmountInputProps {
 
 // TODO: Fetch dot price and show how much is the currency amount worth.
 
-export const AmountInput = ({
-  currency,
-  title,
-  caption,
-  setAmount,
-}: AmountInputProps) => {
+export const AmountInput = ({ currency, title, caption, setAmount }: AmountInputProps) => {
   return (
     <>
       <Stack alignItems='baseline' direction='row' gap={1} mb='0.5rem'>
@@ -28,9 +23,7 @@ export const AmountInput = ({
       <TextField
         placeholder={`Enter ${currency} amount`}
         InputProps={{
-          endAdornment: (
-            <InputAdornment position='end'>{currency}</InputAdornment>
-          ),
+          endAdornment: <InputAdornment position='end'>{currency}</InputAdornment>,
           style: {
             borderRadius: '1rem',
             textAlign: 'center',

src/components/Elements/Inputs/FileInput/index.tsx

@@ -116,9 +116,7 @@ function InputFile({
             <CloseIcon />
           </IconButton>
           <div className={styles.fileName}>{file.name}</div>
-          <div
-            className={styles.fileSize}
-          >{`(${file.size.toLocaleString()} bytes)`}</div>
+          <div className={styles.fileSize}>{`(${file.size.toLocaleString()} bytes)`}</div>
         </div>
       )}
     </div>

src/components/Elements/Label/index.tsx

@@ -12,10 +12,7 @@ export const Label = ({ text, color, width }: LabelProps) => {
       sx={{
         borderRadius: '5px',
         padding: '0.5rem 1rem',
-        background:
-          color === 'success'
-            ? theme.palette.success.main
-            : theme.palette.primary.main,
+        background: color === 'success' ? theme.palette.success.main : theme.palette.primary.main,
         color: theme.palette.common.white,
         fontWeight: 400,
         width,

src/components/Elements/Selectors/AssetSelector/index.tsx

@@ -11,11 +11,7 @@ interface AssetSelectorProps {
   symbol: string;
 }
 
-export default function AssetSelector({
-  asset,
-  setAsset,
-  symbol,
-}: AssetSelectorProps) {
+export default function AssetSelector({ asset, setAsset, symbol }: AssetSelectorProps) {
   const items = [
     {
       value: AssetType.TOKEN,

src/components/Elements/Selectors/FinalitySelector/index.tsx

@@ -7,10 +7,7 @@ interface FinalitySelectorProps {
   setFinality: (_: FinalityType) => void;
 }
 
-export const FinalitySelector = ({
-  finality,
-  setFinality,
-}: FinalitySelectorProps) => {
+export const FinalitySelector = ({ finality, setFinality }: FinalitySelectorProps) => {
   return (
     <Select
       value={finality}