Minor css fix.

Remove reductant comment.
Merge branch 'main' into feat/flags-ui
2022-11-01 11:20:09 +05:30 · 2022-10-28 14:58:11 +05:30 · 2022-10-28 14:48:41 +05:30 · 2022-10-28 14:48:02 +05:30 · 2022-10-28 14:43:37 +05:30 · 2022-10-28 14:21:22 +05:30
18 changed files with 261 additions and 234 deletions
--- a/components/ButtonGroup.tsx
+++ b/components/ButtonGroup.tsx
@@ -6,14 +6,11 @@ const ButtonGroup = styled('div', {
  marginLeft: '1px',
  [`& ${StyledButton}`]: {
    marginLeft: '-1px',
-    px: '0.65rem',
+    px: '$4',
    zIndex: 2,
    position: 'relative',
    '&:hover, &:focus': {
      zIndex: 200
-    },
-    '@sm': {
-      px: '$4'
    }
  },
  [`& ${StyledButton}:not(:only-of-type):not(:first-child):not(:last-child)`]: {
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -40,10 +40,11 @@ const StyledContent = styled(DialogPrimitive.Content, {
  color: '$mauve12',
  borderRadius: '$md',
  position: 'relative',
-  mb: '0%',
+  mb: '15%',
  boxShadow: '0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)',
  width: '90vw',
  maxWidth: '450px',
+  // maxHeight: "85vh",
  padding: 25,
  '@media (prefers-reduced-motion: no-preference)': {
    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
@@ -52,9 +53,6 @@ const StyledContent = styled(DialogPrimitive.Content, {
  '.dark &': {
    backgroundColor: '$mauve5',
    boxShadow: '0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)'
-  },
-  '@md': {
-    mb: '8%'
  }
 })

--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -78,6 +78,7 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
  return (
    <Flex css={{ flexShrink: 0, gap: '$0' }}>
      <Flex
+        id="kissa"
        ref={scrollRef}
        css={{
          overflowX: 'scroll',
@@ -180,21 +181,7 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
-            <Button
-              outline
-              size="sm"
-              css={{
-                mr: '-1px',
-                borderTopRightRadius: 0,
-                borderBottomRightRadius: 0,
-                '@sm': {
-                  borderTopRightRadius: '$sm',
-                  borderBottomRightRadius: '$sm',
-                  mr: '$3'
-                }
-              }}
-              onClick={() => setPopUp(true)}
-            >
+            <Button outline size="sm" css={{ mr: '$3' }} onClick={() => setPopUp(true)}>
              <GithubLogo size="16px" /> Login
            </Button>
          )}
@@ -215,9 +202,6 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
                alignSelf: 'flex-start',
                boxShadow: 'none'
              },
-              'button:not(:last-child)': {
-                display: 'none'
-              },
              'button:not(:first-child):not(:last-child)': {
                borderRight: 0,
                borderLeft: 0
@@ -233,11 +217,6 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
                '&:hover': {
                  boxShadow: 'inset 0px 0px 0px 1px $colors$mauve12'
                }
-              },
-              '@sm': {
-                'button:not(:last-child)': {
-                  display: 'flex'
-                }
              }
            }}
          >
--- a/components/HooksEditor.tsx
+++ b/components/HooksEditor.tsx
@@ -200,15 +200,15 @@ const HooksEditor = () => {
            defaultValue={file?.content}
            // onChange={val => (state.files[snap.active].content = val)} // Auto save?
            beforeMount={monaco => {
-              if (!snap.editorCtx) {
-                snap.files.forEach(file =>
-                  monaco.editor.createModel(
-                    file.content,
-                    file.language,
-                    monaco.Uri.parse(`file:///work/c/${file.name}`)
-                  )
-                )
-              }
+              // if (!snap.editorCtx) {
+              //   snap.files.forEach(file =>
+              //     monaco.editor.createModel(
+              //       file.content,
+              //       file.language,
+              //       monaco.Uri.parse(`file:///work/c/${file.name}`)
+              //     )
+              //   )
+              // }

              // create the web socket
              if (!subscriptionRef.current) {
@@ -218,6 +218,11 @@ const HooksEditor = () => {
                  aliases: ['C', 'c', 'H', 'h'],
                  mimetypes: ['text/plain']
                })
+                monaco.languages.register({
+                  id: 'text',
+                  extensions: ['.txt'],
+                  mimetypes: ['text/plain'],
+                })
                MonacoServices.install(monaco)
                const webSocket = createWebSocket(
                  process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ''
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -33,7 +33,7 @@ import { styled } from '../stitches.config'
 const ImageWrapper = styled(Flex, {
  position: 'relative',
  mt: '$2',
-  mb: '$6',
+  mb: '$10',
  svg: {
    // fill: "red",
    '.angle': {
@@ -66,23 +66,16 @@ const Navigation = () => {
      <Container
        css={{
          display: 'flex',
-          alignItems: 'center',
-          px: '$3',
-          '@sm': {
-            px: '$4'
-          }
+          alignItems: 'center'
        }}
      >
        <Flex
          css={{
            flex: 1,
            alignItems: 'center',
+            borderRight: '1px solid $colors$mauve6',
            py: '$3',
-            pr: '$0',
-            '@sm': {
-              borderRight: '1px solid $colors$mauve6',
-              pr: '$4'
-            }
+            pr: '$4'
          }}
        >
          <Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref>
@@ -91,11 +84,7 @@ const Navigation = () => {
              css={{
                display: 'flex',
                alignItems: 'center',
-                color: '$textColor',
-                mr: '$2',
-                '@sm': {
-                  mr: '$4'
-                }
+                color: '$textColor'
              }}
            >
              <Logo width="32px" height="32px" />
@@ -103,12 +92,9 @@ const Navigation = () => {
          </Link>
          <Flex
            css={{
+              ml: '$5',
              flexDirection: 'column',
-              gap: '1px',
-              display: 'none',
-              '@md': {
-                display: 'flex'
-              }
+              gap: '1px'
            }}
          >
            {snap.loading ? (
@@ -149,8 +135,8 @@ const Navigation = () => {
                  css={{
                    display: 'flex',
                    maxWidth: '1080px',
-                    width: '90vw',
-                    maxHeight: '90%',
+                    width: '80vw',
+                    maxHeight: '80%',
                    backgroundColor: '$mauve1 !important',
                    overflowY: 'auto',
                    background: 'black',
@@ -279,18 +265,15 @@ const Navigation = () => {
                        gridTemplateColumns: '1fr',
                        gridTemplateRows: 'max-content',
                        flex: 1,
-                        p: '$4',
-                        pb: '$8',
+                        p: '$7',
+                        pb: '$16',
                        gap: '$3',
                        alignItems: 'normal',
                        flexWrap: 'wrap',
                        backgroundColor: '$mauve1',
                        '@md': {
                          gridTemplateColumns: '1fr 1fr',
-                          gridTemplateRows: 'max-content',
-                          p: '$7',
-                          pb: '$10',
-                          paddingRight: '$12'
+                          gridTemplateRows: 'max-content'
                        },
                        '@lg': {
                          gridTemplateColumns: '1fr 1fr 1fr',
@@ -333,30 +316,23 @@ const Navigation = () => {
        <Flex
          css={{
            flexWrap: 'nowrap',
-            marginLeft: '$2',
+            marginLeft: '$4',
            overflowX: 'scroll',
            '&::-webkit-scrollbar': {
              height: 0,
              background: 'transparent'
            },
            scrollbarColor: 'transparent',
-            scrollbarWidth: 'none',
-            '@sm': {
-              marginLeft: '$4'
-            }
+            scrollbarWidth: 'none'
          }}
        >
          <Stack
            css={{
-              ml: '$0',
-              gap: '$2',
+              ml: '$4',
+              gap: '$3',
              flexWrap: 'nowrap',
              alignItems: 'center',
-              marginLeft: 'auto',
-              '@sm': {
-                marginLeft: '$4',
-                gap: '$3'
-              }
+              marginLeft: 'auto'
            }}
          >
            <ButtonGroup>
--- a/components/PanelBox.tsx
+++ b/components/PanelBox.tsx
@@ -7,7 +7,7 @@ const PanelBox = styled('div', {
  flexDirection: 'column',
  border: '1px solid $colors$mauve6',
  backgroundColor: '$mauve2',
-  padding: '$5',
+  padding: '$3',
  borderRadius: '$sm',
  fontWeight: 'lighter',
  height: 'auto',
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -11,7 +11,7 @@ import {
 } from './Dialog'
 import { Plus, X } from 'phosphor-react'
 import { styled } from '../stitches.config'
-import { capitalize } from '../utils/helpers'
+import { capitalize, getFileExtention } from '../utils/helpers'
 import ContextMenu, { ContentMenuOption } from './ContextMenu'

 const ErrorText = styled(Text, {
@@ -97,7 +97,7 @@ export const Tabs = ({
      if (!tabname) {
        return { error: `Please enter ${label.toLocaleLowerCase()} name.` }
      }
-      let ext = (tabname.includes('.') && tabname.split('.').pop()) || ''
+      let ext = getFileExtention(tabname)

      if (!ext && defaultExtension) {
        ext = defaultExtension
@@ -109,7 +109,7 @@ export const Tabs = ({
      if (extensionRequired && !ext) {
        return { error: 'File extension is required!' }
      }
-      if (allowedExtensions && !allowedExtensions.includes(ext)) {
+      if (allowedExtensions && ext && !allowedExtensions.includes(ext)) {
        return { error: 'This file extension is not allowed!' }
      }
      if (headerExtraValidation && !tabname.match(headerExtraValidation.regex)) {
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -19,6 +19,7 @@ import { TxJson } from './json'
 import { TxUI } from './ui'
 import { default as _estimateFee } from '../../utils/estimateFee'
 import toast from 'react-hot-toast'
+import { combineFlags, extractFlags, transactionFlags } from '../../state/constants/flags'

 export interface TransactionProps {
  header: string
@@ -39,14 +40,17 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })

  const prepareOptions = useCallback(
    (state: Partial<TransactionState> = txState) => {
-      const { selectedTransaction, selectedDestAccount, selectedAccount, txFields } = state
+      const { selectedTransaction, selectedDestAccount, selectedAccount, txFields, selectedFlags } =
+        state

      const TransactionType = selectedTransaction?.value || null
      const Destination = selectedDestAccount?.value || txFields?.Destination
      const Account = selectedAccount?.value || null
+      const Flags = combineFlags(selectedFlags?.map(flag => flag.value)) || txFields?.Flags

      return prepareTransaction({
        ...txFields,
+        Flags,
        TransactionType,
        Destination,
        Account
@@ -136,8 +140,13 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
      } else {
        fields.Destination = undefined
      }
-      nwState.txFields = fields

+      if (transactionType?.value && transactionFlags[transactionType?.value] && fields.Flags) {
+        nwState.selectedFlags = extractFlags(transactionType.value, fields.Flags)
+        fields.Flags = undefined
+      }
+
+      nwState.txFields = fields
      const state = modifyTxState(header, nwState, { replaceState: true })
      const editorValue = getJsonString(state)
      return setState({ editorValue })
@@ -179,22 +188,22 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
          estimateFee={estimateFee}
        />
      ) : (
-        <TxUI state={txState} setState={setState} estimateFee={estimateFee} />
+        <TxUI
+          state={txState}
+          resetState={resetState}
+          setState={setState}
+          estimateFee={estimateFee}
+        />
      )}
      <Flex
        row
        css={{
          justifyContent: 'space-between',
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
          width: '100%',
-          mb: '$2',
-          mt: '$1',
-          '@md': {
-            position: 'absolute',
-            left: 0,
-            bottom: 0,
-            mt: '$0',
-            mb: '$2'
-          }
+          mb: '$1'
        }}
      >
        <Button
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -17,16 +17,19 @@ import state from '../../state'
 import { streamState } from '../DebugStream'
 import { Button } from '..'
 import Textarea from '../Textarea'
+import { getFlags } from '../../state/constants/flags'

 interface UIProps {
  setState: (pTx?: Partial<TransactionState> | undefined) => TransactionState | undefined
+  resetState: (tt?: SelectOption) => TransactionState | undefined
  state: TransactionState
  estimateFee?: (...arg: any) => Promise<string | undefined>
 }

-export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) => {
+export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estimateFee }) => {
  const { accounts } = useSnapshot(state)
-  const { selectedAccount, selectedDestAccount, selectedTransaction, txFields } = txState
+  const { selectedAccount, selectedDestAccount, selectedTransaction, txFields, selectedFlags } =
+    txState

  const accountOptions: SelectOption[] = accounts.map(acc => ({
    label: acc.name,
@@ -40,23 +43,15 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
    }))
    .filter(acc => acc.value !== selectedAccount?.value)

+  const flagsOptions: SelectOption[] = Object.entries(
+    getFlags(selectedTransaction?.value) || {}
+  ).map(([label, value]) => ({
+    label,
+    value
+  }))
+
  const [feeLoading, setFeeLoading] = useState(false)

-  const resetFields = useCallback(
-    (tt: string) => {
-      const fields = getTxFields(tt)
-
-      if (fields.Destination !== undefined) {
-        setState({ selectedDestAccount: null })
-        fields.Destination = ''
-      } else {
-        fields.Destination = undefined
-      }
-      return setState({ txFields: fields })
-    },
-    [setState]
-  )
-
  const handleSetAccount = (acc: SelectOption) => {
    setState({ selectedAccount: acc })
    streamState.selectedAccount = acc
@@ -92,11 +87,11 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
    (tt: SelectOption) => {
      setState({ selectedTransaction: tt })

-      const newState = resetFields(tt.value)
+      const newState = resetState(tt)

      handleEstimateFee(newState, true)
    },
-    [handleEstimateFee, resetFields, setState]
+    [handleEstimateFee, resetState, setState]
  )

  const switchToJson = () => setState({ viewType: 'json' })
@@ -115,14 +110,16 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
    [selectedTransaction?.value]
  )

-  const specialFields = ['TransactionType', 'Account']
+  const richFields = ['TransactionType', 'Account']
  if (fields.Destination !== undefined) {
-    specialFields.push('Destination')
+    richFields.push('Destination')
  }

-  const otherFields = Object.keys(txFields).filter(k => !specialFields.includes(k)) as [
-    keyof TxFields
-  ]
+  if (flagsOptions.length) {
+    richFields.push('Flags')
+  }
+
+  const otherFields = Object.keys(txFields).filter(k => !richFields.includes(k)) as [keyof TxFields]

  return (
    <Container
@@ -137,14 +134,11 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
          row
          fluid
          css={{
-            justifyContent: 'space-between',
+            justifyContent: 'flex-end',
            alignItems: 'center',
            mb: '$3',
            mt: '1px',
-            pr: '1px',
-            '@xl': {
-              justifyContent: 'flex-end'
-            }
+            pr: '1px'
          }}
        >
          <Text muted css={{ mr: '$3' }}>
@@ -155,13 +149,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
            placeholder="Select transaction type"
            options={transactionsOptions}
            hideSelectedOptions
-            css={{
-              width: '60%',
-              minWidth: '200px',
-              '@lg': {
-                width: '70%'
-              }
-            }}
+            css={{ width: '70%' }}
            value={selectedTransaction}
            onChange={(tt: any) => handleChangeTxType(tt)}
          />
@@ -170,13 +158,10 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
          row
          fluid
          css={{
-            justifyContent: 'space-between',
+            justifyContent: 'flex-end',
            alignItems: 'center',
            mb: '$3',
-            pr: '1px',
-            '@xl': {
-              justifyContent: 'flex-end'
-            }
+            pr: '1px'
          }}
        >
          <Text muted css={{ mr: '$3' }}>
@@ -185,45 +170,30 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
          <Select
            instanceId="from-account"
            placeholder="Select your account"
-            css={{
-              width: '60%',
-              minWidth: '200px',
-              '@lg': {
-                width: '70%'
-              }
-            }}
+            css={{ width: '70%' }}
            options={accountOptions}
            value={selectedAccount}
            onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
          />
        </Flex>
-        {fields.Destination !== undefined && (
+        {richFields.includes('Destination') && (
          <Flex
            row
            fluid
            css={{
-              justifyContent: 'space-between',
+              justifyContent: 'flex-end',
              alignItems: 'center',
              mb: '$3',
-              pr: '1px',
-              '@xl': {
-                justifyContent: 'flex-end'
-              }
+              pr: '1px'
            }}
          >
-            <Text muted css={{ mr: '$3' }}>
+            <Text muted css={{ mr: '$3', textAlign: 'end' }}>
              Destination account:{' '}
            </Text>
            <Select
              instanceId="to-account"
              placeholder="Select the destination account"
-              css={{
-                width: '60%',
-                minWidth: '200px',
-                '@lg': {
-                  width: '70%'
-                }
-              }}
+              css={{ width: '70%' }}
              options={destAccountOptions}
              value={selectedDestAccount}
              isClearable
@@ -231,6 +201,36 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
            />
          </Flex>
        )}
+        {richFields.includes('Flags') && (
+          <Flex
+            row
+            fluid
+            css={{
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+              mb: '$3',
+              pr: '1px'
+            }}
+          >
+            <Text muted css={{ mr: '$3' }}>
+              Flags:{' '}
+            </Text>
+            <Select
+              isClearable
+              css={{ width: '70%' }}
+              instanceId="flags"
+              placeholder="Select flags to apply"
+              menuPosition="fixed"
+              value={selectedFlags}
+              isMulti
+              options={flagsOptions}
+              onChange={flags => setState({ selectedFlags: flags as any })}
+              closeMenuOnSelect={
+                selectedFlags ? selectedFlags.length >= flagsOptions.length - 1 : false
+              }
+            />
+          </Flex>
+        )}
        {otherFields.map(field => {
          let _value = txFields[field]

@@ -256,12 +256,9 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
                row
                fluid
                css={{
-                  justifyContent: 'space-between',
+                  justifyContent: 'flex-end',
                  alignItems: 'center',
-                  position: 'relative',
-                  '@xl': {
-                    justifyContent: 'flex-end'
-                  }
+                  position: 'relative'
                }}
              >
                <Text muted css={{ mr: '$3' }}>
@@ -274,13 +271,9 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
                    spellCheck={false}
                    onChange={switchToJson}
                    css={{
-                      width: '60%',
-                      minWidth: '200px',
+                      width: '70%',
                      flex: 'inherit',
-                      resize: 'vertical',
-                      '@lg': {
-                        width: '70%'
-                      }
+                      resize: 'vertical'
                    }}
                  />
                ) : (
@@ -305,8 +298,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
                        : undefined
                    }
                    css={{
-                      width: '60%',
-                      minWidth: '200px',
+                      width: '70%',
                      flex: 'inherit',
                      '-moz-appearance': 'textfield',
                      '&::-webkit-outer-spin-button': {
@@ -316,9 +308,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, estimateFee }) =>
                      '&::-webkit-inner-spin-button ': {
                        '-webkit-appearance': 'none',
                        margin: 0
-                      },
-                      '@lg': {
-                        width: '70%'
                      }
                    }}
                  />
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -6,7 +6,7 @@
    "DestinationTag": 13,
    "Fee": "2000000",
    "Sequence": 2470665,
-    "Flags": 2147483648
+    "Flags": "2147483648"
  },
  {
    "TransactionType": "AccountSet",
@@ -48,7 +48,7 @@
    "Account": "rsUiUMpnrgxQp24dJYZDhmV4bE3aBtQyt8",
    "Authorize": "rEhxGqkqPPSxQ3P25J66ft5TwpzV14k2de",
    "Fee": "10",
-    "Flags": 2147483648,
+    "Flags": "2147483648",
    "Sequence": 2
  },
  {
@@ -109,7 +109,9 @@
    "Fee": "10",
    "NFTokenOffers": {
      "$type": "json",
-      "$value": ["4AAAEEA76E3C8148473CB3840CE637676E561FB02BD4CA22CA59729EA815B862"]
+      "$value": [
+        "4AAAEEA76E3C8148473CB3840CE637676E561FB02BD4CA22CA59729EA815B862"
+      ]
    }
  },
  {
@@ -120,7 +122,7 @@
      "$value": "100",
      "$type": "xrp"
    },
-    "Flags": 1,
+    "Flags": "1",
    "Destination": "",
    "Fee": "10"
  },
@@ -128,7 +130,7 @@
    "TransactionType": "OfferCancel",
    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
    "Fee": "12",
-    "Flags": 0,
+    "Flags": "0",
    "LastLedgerSequence": 7108629,
    "OfferSequence": 6,
    "Sequence": 7
@@ -137,7 +139,7 @@
    "TransactionType": "OfferCreate",
    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
    "Fee": "12",
-    "Flags": 0,
+    "Flags": "0",
    "LastLedgerSequence": 7108682,
    "Sequence": 8,
    "TakerGets": "6000000",
@@ -155,7 +157,7 @@
      "$type": "xrp"
    },
    "Fee": "12",
-    "Flags": 2147483648,
+    "Flags": "2147483648",
    "Sequence": 2
  },
  {
@@ -185,14 +187,14 @@
    "Fee": "10"
  },
  {
-    "Flags": 0,
+    "Flags": "0",
    "TransactionType": "SetRegularKey",
    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
    "Fee": "12",
    "RegularKey": "rAR8rR8sUkBoCZFawhkWzY4Y5YoyuznwD"
  },
  {
-    "Flags": 0,
+    "Flags": "0",
    "TransactionType": "SignerListSet",
    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
    "Fee": "12",
@@ -232,7 +234,7 @@
    "TransactionType": "TrustSet",
    "Account": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
    "Fee": "12",
-    "Flags": 262144,
+    "Flags": "262144",
    "LastLedgerSequence": 8007750,
    "LimitAmount": {
      "$type": "json",
@@ -244,4 +246,4 @@
    },
    "Sequence": 12
  }
-]
+]
--- a/pages/develop/[[...slug]].tsx
+++ b/pages/develop/[[...slug]].tsx
@@ -10,10 +10,11 @@ import Box from '../../components/Box'
 import Button from '../../components/Button'
 import Popover from '../../components/Popover'
 import RunScript from '../../components/RunScript'
-import state from '../../state'
+import state, { IFile } from '../../state'
 import { compileCode } from '../../state/actions'
 import { getSplit, saveSplit } from '../../state/actions/persistSplits'
 import { styled } from '../../stitches.config'
+import { getFileExtention } from '../../utils/helpers'

 const HooksEditor = dynamic(() => import('../../components/HooksEditor'), {
  ssr: false
@@ -147,6 +148,8 @@ const CompilerSettings = () => {
 const Home: NextPage = () => {
  const snap = useSnapshot(state)

+  const activeFile = snap.files[snap.active] as IFile | undefined
+  const activeFileExt = getFileExtention(activeFile?.name)
  return (
    <Split
      direction="vertical"
@@ -159,7 +162,7 @@ const Home: NextPage = () => {
    >
      <main style={{ display: 'flex', flex: 1, position: 'relative' }}>
        <HooksEditor />
-        {snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'c' && (
+        {activeFileExt === 'c' && (
          <Hotkeys
            keyName="command+b,ctrl+b"
            onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
@@ -193,7 +196,7 @@ const Home: NextPage = () => {
            </Flex>
          </Hotkeys>
        )}
-        {snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'js' && (
+        {activeFileExt === 'js' && (
          <Hotkeys
            keyName="command+b,ctrl+b"
            onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
@@ -209,7 +212,7 @@ const Home: NextPage = () => {
                gap: '$2'
              }}
            >
-              <RunScript file={snap.files[snap.active]} />
+              <RunScript file={activeFile as IFile} />
            </Flex>
          </Hotkeys>
        )}
@@ -225,7 +228,7 @@ const Home: NextPage = () => {
        >
          <LogBox title="Development Log" clearLog={() => (state.logs = [])} logs={snap.logs} />
        </Flex>
-        {snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'js' && (
+        {activeFileExt === 'js' && (
          <Flex
            css={{
              flex: 1
--- a/pages/test/[[...slug]].tsx
+++ b/pages/test/[[...slug]].tsx
@@ -68,7 +68,6 @@ const Test = () => {
            justifyContent: 'center',
            p: '$3 $2'
          }}
-          className="split-mobile-forceAutoHeight"
        >
          <Split
            direction="horizontal"
@@ -83,7 +82,6 @@ const Test = () => {
              height: '100%'
            }}
            onDragEnd={e => saveSplit('testHorizontal', e)}
-            className="split-mobile-forceVertical"
          >
            <Box css={{ width: '55%', px: '$2' }}>
              <Tabs
@@ -107,18 +105,7 @@ const Test = () => {
                ))}
              </Tabs>
            </Box>
-            <Box
-              css={{
-                width: '45%',
-                mx: '$0',
-                mt: '$1',
-                height: '100%',
-                '@md': {
-                  mx: '$2',
-                  mt: '$0'
-                }
-              }}
-            >
+            <Box css={{ width: '45%', mx: '$2', height: '100%' }}>
              <Accounts card hideDeployBtn showHookStats />
            </Box>
          </Split>
@@ -144,7 +131,6 @@ const Test = () => {
        <Flex>
          <Split
            direction="horizontal"
-            className="split-mobile-forceVertical"
            sizes={[50, 50]}
            minSize={[320, 160]}
            gutterSize={4}
--- a/state/actions/createNewFile.ts
+++ b/state/actions/createNewFile.ts
@@ -1,21 +1,19 @@
+import { getFileExtention } from '../../utils/helpers'
 import state, { IFile } from '../index'

-const languageMapping = {
+const languageMapping: Record<string, string | undefined> = {
  ts: 'typescript',
  js: 'javascript',
  md: 'markdown',
  c: 'c',
  h: 'c',
-  other: ''
-} /* Initializes empty file to global state */
+  txt: 'text'
+}
+
 export const createNewFile = (name: string) => {
-  const tempName = name.split('.')
-  const fileExt = tempName[tempName.length - 1] || 'other'
-  const emptyFile: IFile = {
-    name,
-    language: languageMapping[fileExt as 'ts' | 'js' | 'md' | 'c' | 'h' | 'other'],
-    content: ''
-  }
+  const ext = getFileExtention(name) || ''
+
+  const emptyFile: IFile = { name, language: languageMapping[ext] || 'text', content: '' }
  state.files.push(emptyFile)
  state.active = state.files.length - 1
 }
@@ -24,5 +22,8 @@ export const renameFile = (oldName: string, nwName: string) => {
  const file = state.files.find(file => file.name === oldName)
  if (!file) throw Error(`No file exists with name ${oldName}`)

+  const ext = getFileExtention(nwName) || ''
+  const language = languageMapping[ext] || 'text'
  file.name = nwName
+  file.language = language
 }
--- a/state/constants/flags.ts
+++ b/state/constants/flags.ts
@@ -0,0 +1,79 @@
+import { SelectOption } from '../transactions';
+
+interface Flags {
+    [key: string]: string;
+}
+
+export const transactionFlags: { [key: /* TransactionType */ string]: Flags } = {
+    "*": {
+        tfFullyCanonicalSig: '0x80000000'
+    },
+    Payment: {
+        tfNoDirectRipple: '0x00010000',
+        tfPartialPayment: '0x00020000',
+        tfLimitQuality: '0x00040000',
+    },
+    AccountSet: {
+        tfRequireDestTag: '0x00010000',
+        tfOptionalDestTag: '0x00020000',
+        tfRequireAuth: '0x00040000',
+        tfOptionalAuth: '0x00080000',
+        tfDisallowXRP: '0x00100000',
+        tfAllowXRP: '0x00200000',
+    },
+    NFTokenCreateOffer: {
+        tfSellNFToken: '0x00000001',
+    },
+    NFTokenMint: {
+        tfBurnable: '0x00000001',
+        tfOnlyXRP: '0x00000002',
+        tfTrustLine: '0x00000004',
+        tfTransferable: '0x00000008',
+    },
+    OfferCreate: {
+        tfPassive: '0x00010000',
+        tfImmediateOrCancel: '0x00020000',
+        tfFillOrKill: '0x00040000',
+        tfSell: '0x00080000',
+    },
+    PaymentChannelClaim: {
+        tfRenew: '0x00010000',
+        tfClose: '0x00020000',
+    },
+    TrustSet: {
+        tfSetfAuth: '0x00010000',
+        tfSetNoRipple: '0x00020000',
+        tfClearNoRipple: '0x00040000',
+        tfSetFreeze: '0x00100000',
+        tfClearFreeze: '0x00200000',
+    },
+}
+
+export const getFlags = (tt?: string) => {
+    if (!tt) return
+    const flags = {
+        ...transactionFlags['*'],
+        ...transactionFlags[tt]
+    }
+
+    return flags
+}
+
+
+export function combineFlags(flags?: string[]): string | undefined {
+    if (!flags) return
+
+    const num = flags.reduce((cumm, curr) => cumm | BigInt(curr), BigInt(0))
+    return num.toString()
+}
+
+export function extractFlags(transactionType: string, flags?: string | number,): SelectOption[] {
+    const flagsObj = getFlags(transactionType)
+    if (!flags || !flagsObj) return []
+
+    const extracted = Object.entries(flagsObj).reduce((cumm, [label, value]) => {
+        return (BigInt(flags) & BigInt(value)) ? cumm.concat({ label, value }) : cumm
+    }, [] as SelectOption[])
+
+    return extracted
+}
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -4,6 +4,7 @@ import transactionsData from '../content/transactions.json'
 import state from '.'
 import { showAlert } from '../state/actions/showAlert'
 import { parseJSON } from '../utils/json'
+import { extractFlags, getFlags } from './constants/flags'

 export type SelectOption = {
  value: string
@@ -14,6 +15,7 @@ export interface TransactionState {
  selectedTransaction: SelectOption | null
  selectedAccount: SelectOption | null
  selectedDestAccount: SelectOption | null
+  selectedFlags: SelectOption[] | null
  txIsLoading: boolean
  txIsDisabled: boolean
  txFields: TxFields
@@ -31,6 +33,7 @@ export const defaultTransaction: TransactionState = {
  selectedTransaction: null,
  selectedAccount: null,
  selectedDestAccount: null,
+  selectedFlags: null,
  txIsLoading: false,
  txIsDisabled: false,
  txFields: {},
@@ -128,9 +131,8 @@ export const prepareTransaction = (data: any) => {
        try {
          options[field] = JSON.parse(_value.$value)
        } catch (error) {
-          const message = `Input error for json field '${field}': ${
-            error instanceof Error ? error.message : ''
-          }`
+          const message = `Input error for json field '${field}': ${error instanceof Error ? error.message : ''
+            }`
          console.error(message)
          options[field] = _value.$value
        }
@@ -205,6 +207,13 @@ export const prepareState = (value: string, transactionType?: string) => {
    rest.Destination = Destination
  }

+  if (getFlags(TransactionType) && rest.Flags) {
+    const flags = extractFlags(TransactionType, rest.Flags)
+
+    rest.Flags = undefined
+    tx.selectedFlags = flags
+  }
+
  Object.keys(rest).forEach(field => {
    const value = rest[field]
    const schemaVal = schema[field as keyof TxFields]
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -54,15 +54,3 @@ html.light .gutter-horizontal:hover {
 .monaco-editor .monaco-hover {
  z-index: 9999;
 }
-
-@media screen and (max-width: 48rem) {
-  .split-mobile-forceAutoHeight {
-    height: auto !important;
-  }
-  .split-mobile-forceVertical {
-    flex-direction: column !important;
-  }
-  .split-mobile-forceVertical > div {
-    width: 100% !important;
-  }
-}
--- a/utils/helpers.ts
+++ b/utils/helpers.ts
@@ -13,3 +13,9 @@ export const capitalize = (value?: string) => {

  return value[0].toLocaleUpperCase() + value.slice(1)
 }
+
+export const getFileExtention = (filename?: string): string | undefined => {
+  if (!filename) return
+  const ext = (filename.includes('.') && filename.split('.').pop()) || undefined
+  return ext
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -2725,9 +2725,9 @@ javascript-time-ago@^2.3.11:
    relative-time-format "^1.0.7"

 jose@^4.1.4, jose@^4.3.7:
-  version "4.6.0"
-  resolved "https://registry.npmjs.org/jose/-/jose-4.6.0.tgz"
-  integrity sha512-0hNAkhMBNi4soKSAX4zYOFV+aqJlEz/4j4fregvasJzEVtjDChvWqRjPvHwLqr5hx28Ayr6bsOs1Kuj87V0O8w==
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-4.10.0.tgz#2e0b7bcc80dd0775f8a4588e55beb9460c37d60a"
+  integrity sha512-KEhB/eLGLomWGPTb+/RNbYsTjIyx03JmbqAyIyiXBuNSa7CmNrJd5ysFhblayzs/e/vbOPMUaLnjHUMhGp4yLw==

 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
  version "4.0.0"
Author	SHA1	Message	Date
muzam1l	4f0fc838be	Minor css fix.	2022-11-01 11:20:09 +05:30
muzam1l	fa93912c38	Remove reductant comment.	2022-10-28 14:58:11 +05:30
muzam1l	f5cb76c302	Merge branch 'main' into feat/flags-ui	2022-10-28 14:48:41 +05:30
muzamil	df1d65dcab	Merge pull request #275 from XRPLF/dependabot/npm_and_yarn/jose-4.10.0 Bump jose from 4.6.0 to 4.10.0	2022-10-28 14:48:02 +05:30
muzam1l	1513f78991	Add tx specific flags.	2022-10-28 14:43:37 +05:30
muzam1l	3a064f307b	Add global flags.	2022-10-28 14:21:22 +05:30
muzam1l	6fca05f310	Add flags UI to Payment transaction.	2022-10-28 12:29:57 +05:30
muzamil	31e67d382f	Merge pull request #273 from XRPLF/fix/renaming-ext Update file language on renaming.	2022-10-26 18:10:43 +05:30
dependabot[bot]	27475301e4	Bump jose from 4.6.0 to 4.10.0 Bumps [jose](https://github.com/panva/jose) from 4.6.0 to 4.10.0. - [Release notes](https://github.com/panva/jose/releases) - [Changelog](https://github.com/panva/jose/blob/main/CHANGELOG.md) - [Commits](https://github.com/panva/jose/compare/v4.6.0...v4.10.0) --- updated-dependencies: - dependency-name: jose dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-10-14 08:29:14 +00:00
muzam1l	934283976a	Add plain text language to monaco.	2022-09-09 14:07:13 +05:30
muzam1l	0d9e9e7b45	Merge branch 'main' into fix/renaming-ext	2022-08-19 15:14:52 +05:30
muzam1l	2c2bf59bcd	Update file language on renaming.	2022-08-17 12:46:17 +05:30