Referrals page

.vscode/settings.json

@@ -47,7 +47,7 @@
       "no-debugger": "off"
     }
   },
-  "workbench.colorTheme": "Night Owl",
+  "workbench.colorTheme": "Community Material Theme Palenight High Contrast",
   "workbench.iconTheme": "material-icon-theme",
   "breadcrumbs.enabled": true,
   "grunt.autoDetect": "off",

src/components/Header/Header.tsx

@@ -116,6 +116,13 @@ export default function Header() {
           <TEXT.Menu>Bridge</TEXT.Menu>
         </Trans>
       </StyledLink>
+
+      <StyledLink to={'/referrals'}>
+        <Trans>
+          <TEXT.Menu>Referrals</TEXT.Menu>
+        </Trans>
+      </StyledLink>
+
       {/* <StyledLink to={'/claimpage'}>
         <Trans>
           <TEXT.Menu>Claim</TEXT.Menu>

src/components/Icon/Icon.tsx

@@ -6,6 +6,7 @@ const IconWrapper = styled.div<{
   color?: string
   transform?: string
   clickable?: boolean
+  disabled?: boolean
   position?: string
   top?: string
   right?: string
@@ -26,6 +27,7 @@ const IconWrapper = styled.div<{
   left: ${({left}) => left ?? left};
   bottom: ${({bottom}) => bottom ?? bottom};
   position: ${({position}) => (position ? position : 'auto')};
+  ${({disabled, theme}) => (disabled ? `color: ${theme.dark.grey2};` : '')};
 `
 
 type IconProps = {
@@ -35,6 +37,7 @@ type IconProps = {
   color?: string
   transform?: string
   clickable?: boolean
+  disabled?: boolean
   onClick?: (event: any) => any
   top?: string
   right?: string
@@ -43,15 +46,16 @@ type IconProps = {
   position?: string
 }
 
-export const Icon = ({size, margin, children, color, transform, clickable, onClick, top, right, left, bottom, position}: IconProps) => {
+export const Icon = ({size, margin, children, color, transform, clickable, onClick, top, right, left, bottom, position, disabled}: IconProps) => {
   return (
     <IconWrapper
       size={size}
       margin={margin}
       color={color}
       transform={transform}
       clickable={clickable}
-      onClick={onClick}
+      disabled={disabled}
+      onClick={disabled ? () => null : onClick}
       top={top}
       right={right}
       left={left}

src/components/Input/Input.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import styled from 'styled-components/macro'
+import {TEXT} from '../../theme/theme'
+
+const StyledInput = styled.input<{
+  error?: boolean
+  fontSize?: string
+  fontWeight?: string
+  align?: string
+  height?: string
+  padding?: string
+}>`
+  color: ${({error, theme}) => (error ? theme.dark.red : theme.dark.white)};
+  width: 100%;
+  position: relative;
+  font-weight: 500;
+  outline: none;
+  border: none;
+  flex: 1 1 auto;
+  background-color: transparent;
+  font-family: 'Inter', sans-serif;
+  font-size: ${({fontSize}) => fontSize ?? '16px'};
+  font-weight: ${({fontWeight}) => fontWeight ?? '400'};
+  text-align: ${({align}) => align && align};
+  height: ${({height}) => (height ? height : 'auto')};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: ${({padding}) => padding ?? '0px 8px'};
+  -webkit-appearance: textfield;
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  [type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  ::placeholder {
+    opacity: 0.8;
+  }
+`
+
+export const Input = React.memo(function InnerInput({
+  value,
+  onUserInput,
+  placeholder,
+  prependSymbol,
+  height,
+  padding,
+  ...rest
+}: {
+  value: string | number | undefined
+  onUserInput: (input: string) => void
+  error?: boolean
+  fontSize?: string
+  fontWeight?: string
+  align?: 'right' | 'left'
+  height?: string
+  padding?: string
+  prependSymbol?: string | undefined
+} & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
+  const enforcer = (nextUserInput: string) => {
+    onUserInput(nextUserInput)
+  }
+
+  return (
+    <StyledInput
+      {...rest}
+      value={value}
+      onChange={event => {
+        enforcer(event.target.value)
+      }}
+      inputMode="decimal"
+      autoComplete="off"
+      autoCorrect="off"
+      // text-specific options
+      type="text"
+      placeholder={placeholder || ''}
+      height={height}
+      padding={padding}
+    />
+  )
+})

src/components/Popup/TransactionPopup.tsx

@@ -97,6 +97,11 @@ export default function TransactionPopup({hash, success, summary, info}: {hash:
           </ErrorMessage>
         )} */}
 
+        {/* Referral Error Messages */}
+        {chainId && info?.message === 'referral code does not exist' && <ErrorMessage>Referral code does not exist.</ErrorMessage>}
+        {chainId && info?.message === 'referral code of user already used' && <ErrorMessage>User already have a referral code.</ErrorMessage>}
+        {chainId && info?.message === 'referral code successfully used' && <TEXT.BoldSmallBody>Referral code successfully used.</TEXT.BoldSmallBody>}
+
         {chainId && hash && success && (
           <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
             <ExternalLinkContentsContainer>

src/components/SlideMenu/SlideMenu.tsx

@@ -94,6 +94,10 @@ const SlideMenu = ({open, setOpen, ...props}: {open: boolean; setOpen: Function;
         <StyledInternalLink tabIndex={tabIndex} to={'/positions'}>
           <StyledMenuLink displayText={'Positions'} linkDestination={'/positions'} currentLocation={location} />
         </StyledInternalLink>
+        <StyledInternalLink tabIndex={tabIndex} to={'/referrals'}>
+          <StyledMenuLink displayText={'Referrals'} linkDestination={'/referrals'} currentLocation={location} />
+        </StyledInternalLink>
+
         <Separator />
 
         <StyledExternalLink href="https://overlay.market">Risks</StyledExternalLink>

src/components/Web3Status/Web3Status.tsx

@@ -152,6 +152,7 @@ export const NETWORK_LABELS: {[chainId in SupportedChainId | number]: string} =
   [SupportedChainId.RINKEBY]: 'Rinkeby Testnet',
   [SupportedChainId.ARBITRUM]: 'Arbitrum One',
   [SupportedChainId.ARBITRUM_GÖRLI]: 'Arbitrum Goerli Testnet',
+  [SupportedChainId.ARBITRUM_SEPOLIA]: 'Arbitrum Sepolia Testnet',
 }
 
 function Web3StatusInner() {
@@ -210,6 +211,10 @@ function Web3StatusInner() {
           {chainId && NETWORK_LABELS[chainId] === NETWORK_LABELS[SupportedChainId.ARBITRUM_GÖRLI] && (
             <Dropdown connectedNetwork={NETWORK_LABELS[chainId]} colorStatus={'yellow'} />
           )}
+
+          {chainId && NETWORK_LABELS[chainId] === NETWORK_LABELS[SupportedChainId.ARBITRUM_SEPOLIA] && (
+            <Dropdown connectedNetwork={NETWORK_LABELS[chainId]} colorStatus={'yellow'} />
+          )}
         </Account>
       </Web3StatusConnected>
     )

src/connectors/connectors.tsx

@@ -11,6 +11,7 @@ const SUPPORTED_CHAIN_IDS: SupportedChainId[] = [
   SupportedChainId.RINKEBY,
   SupportedChainId.ARBITRUM,
   SupportedChainId.ARBITRUM_GÖRLI,
+  SupportedChainId.ARBITRUM_SEPOLIA,
 ]
 
 export const injected = new InjectedConnector({
@@ -35,11 +36,12 @@ export const NETWORK_URLS: {[key in SupportedChainId]: string} = {
   // [SupportedChainId.ARBITRUM]: `https://arbitrum-mainnet.infura.io/v3/${INFURA_KEY}`,
   [SupportedChainId.ARBITRUM]: `https://arb-mainnet.g.alchemy.com/v2/${ALCHEMY_KEY}`,
   [SupportedChainId.ARBITRUM_GÖRLI]: `https://arbitrum-goerli.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.ARBITRUM_SEPOLIA]: `https://arbitrum-sepolia.infura.io/v3/${INFURA_KEY}`,
 }
 
 export const network = new NetworkConnector({
   urls: NETWORK_URLS,
-  defaultChainId: SupportedChainId.ARBITRUM,
+  defaultChainId: SupportedChainId.ARBITRUM_SEPOLIA,
 })
 
 let networkLibrary: Web3Provider | undefined