Merge branch 'main' into alpha

components/BorrowForm.tsx

@@ -200,76 +200,82 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
           valueKey="maxAmount"
         />
       </EnterBottomExitBottom>
-      <FadeInFadeOut
-        className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
-        show={!showTokenList}
-      >
-        <div>
-          {initHealth && initHealth <= 0 ? (
-            <div className="mb-4">
-              <InlineNotification
-                type="error"
-                desc="You have no available collateral to borrow against."
-              />
-            </div>
-          ) : null}
-          <div className="grid grid-cols-2">
-            <div className="col-span-2 flex justify-between">
-              <Label text={`${t('borrow')} ${t('token')}`} />
-              <MaxAmountButton
-                className="mb-2"
-                label={t('max')}
-                onClick={setMax}
-                value={tokenMax.toFixed()}
-              />
-            </div>
-            <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
-              <button
-                onClick={() => setShowTokenList(true)}
-                className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-              >
-                <div className="mr-2.5 flex min-w-[24px] items-center">
-                  <Image
-                    alt=""
-                    width="24"
-                    height="24"
-                    src={logoUri || `/icons/${selectedToken.toLowerCase()}.svg`}
-                  />
-                </div>
-                <div className="flex w-full items-center justify-between">
-                  <div className="text-xl font-bold">{selectedToken}</div>
-                  <ChevronDownIcon className="h-6 w-6" />
-                </div>
-              </button>
-            </div>
-            <div className="col-span-1">
-              <NumberFormat
-                name="amountIn"
-                id="amountIn"
-                inputMode="decimal"
-                thousandSeparator=","
-                allowNegative={false}
-                isNumericString={true}
-                decimalScale={bank?.mintDecimals || 6}
-                className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
-                placeholder="0.00"
-                value={inputAmount}
-                onValueChange={(e: NumberFormatValues) =>
-                  setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
-                }
-                isAllowed={withValueLimit}
-              />
-            </div>
-            <div className="col-span-2 mt-2">
-              <ButtonGroup
-                activeValue={sizePercentage}
-                className="font-mono"
-                onChange={(p) => handleSizePercentage(p)}
-                values={['10', '25', '50', '75', '100']}
-                unit="%"
-              />
-            </div>
-            {/* <div className="col-span-2 mt-4">
+      <FadeInFadeOut show={!showTokenList}>
+        <div
+          className="flex flex-col justify-between"
+          style={{ height: ACCOUNT_ACTION_MODAL_INNER_HEIGHT }}
+        >
+          <div>
+            {initHealth <= 0 ? (
+              <div className="mb-4">
+                <InlineNotification
+                  type="error"
+                  desc="You have no available collateral to borrow against."
+                />
+              </div>
+            ) : null}
+            {bank ? <TokenVaultWarnings bank={bank} /> : null}
+            <div className="grid grid-cols-2">
+              <div className="col-span-2 flex justify-between">
+                <Label text={`${t('borrow')} ${t('token')}`} />
+                <MaxAmountButton
+                  className="mb-2"
+                  label={t('max')}
+                  onClick={setMax}
+                  value={tokenMax.toFixed()}
+                />
+              </div>
+              <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
+                <button
+                  onClick={() => setShowTokenList(true)}
+                  className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
+                >
+                  <div className="mr-2.5 flex min-w-[24px] items-center">
+                    <Image
+                      alt=""
+                      width="24"
+                      height="24"
+                      src={
+                        logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
+                      }
+                    />
+                  </div>
+                  <div className="flex w-full items-center justify-between">
+                    <div className="text-xl font-bold">{selectedToken}</div>
+                    <ChevronDownIcon className="h-6 w-6" />
+                  </div>
+                </button>
+              </div>
+              <div className="col-span-1">
+                <NumberFormat
+                  name="amountIn"
+                  id="amountIn"
+                  inputMode="decimal"
+                  thousandSeparator=","
+                  allowNegative={false}
+                  isNumericString={true}
+                  decimalScale={bank?.mintDecimals || 6}
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  placeholder="0.00"
+                  value={inputAmount}
+                  onValueChange={(e: NumberFormatValues) =>
+                    setInputAmount(
+                      !Number.isNaN(Number(e.value)) ? e.value : ''
+                    )
+                  }
+                  isAllowed={withValueLimit}
+                />
+              </div>
+              <div className="col-span-2 mt-2">
+                <ButtonGroup
+                  activeValue={sizePercentage}
+                  className="font-mono"
+                  onChange={(p) => handleSizePercentage(p)}
+                  values={['10', '25', '50', '75', '100']}
+                  unit="%"
+                />
+              </div>
+              {/* <div className="col-span-2 mt-4">
               <div className="mb-2 flex items-center justify-between">
                 <p className="text-th-fgd-3">{t('leverage')}</p>
                 <p className="text-th-fgd-3">0.00x</p>
@@ -280,40 +286,39 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
                 onChange={(x) => setInputAmount(x)}
               />
             </div> */}
-          </div>
-          {bank ? (
-            <div className="my-6 space-y-2 border-y border-th-bkg-3 px-2 py-4">
-              <HealthImpactTokenChange
-                mintPk={bank.mint}
-                uiAmount={Number(inputAmount)}
-              />
-              <div className="flex justify-between">
-                <p>{t('borrow-value')}</p>
-                <p className="font-mono text-th-fgd-1">
-                  {formatFixedDecimals(
-                    bank.uiPrice * Number(inputAmount),
-                    true
-                  )}
-                </p>
-              </div>
-              <div className="flex justify-between">
-                <Tooltip content={t('loan-origination-fee-tooltip')}>
-                  <p className="tooltip-underline">
-                    {t('loan-origination-fee')}
-                  </p>
-                </Tooltip>
-                <p className="font-mono text-th-fgd-1">
-                  {formatFixedDecimals(
-                    bank.loanOriginationFeeRate.toNumber() *
-                      Number(inputAmount),
-                    true
-                  )}
-                </p>
-              </div>
             </div>
-          ) : null}
-        </div>
-        <div className="flex justify-center">
+            {bank ? (
+              <div className="my-6 space-y-2 border-y border-th-bkg-3 px-2 py-4">
+                <HealthImpactTokenChange
+                  mintPk={bank.mint}
+                  uiAmount={Number(inputAmount)}
+                />
+                <div className="flex justify-between">
+                  <p>{t('borrow-value')}</p>
+                  <p className="font-mono text-th-fgd-1">
+                    {formatFixedDecimals(
+                      bank.uiPrice * Number(inputAmount),
+                      true
+                    )}
+                  </p>
+                </div>
+                <div className="flex justify-between">
+                  <Tooltip content={t('loan-origination-fee-tooltip')}>
+                    <p className="tooltip-underline">
+                      {t('loan-origination-fee')}
+                    </p>
+                  </Tooltip>
+                  <p className="font-mono text-th-fgd-1">
+                    {formatFixedDecimals(
+                      bank.loanOriginationFeeRate.toNumber() *
+                        Number(inputAmount),
+                      true
+                    )}
+                  </p>
+                </div>
+              </div>
+            ) : null}
+          </div>
           <Button
             onClick={handleWithdraw}
             className="flex w-full items-center justify-center"
@@ -340,11 +345,6 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
             )}
           </Button>
         </div>
-        {bank ? (
-          <div className="pt-4">
-            <TokenVaultWarnings bank={bank} />
-          </div>
-        ) : null}
       </FadeInFadeOut>
     </>
   )

components/DepositForm.tsx

@@ -230,99 +230,104 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
           valueKey="walletBalance"
         />
       </EnterBottomExitBottom>
-      <FadeInFadeOut
-        className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
-        show={!showTokenList}
-      >
-        <div>
-          <InlineNotification
-            type="info"
-            desc={`There is a $${ALPHA_DEPOSIT_LIMIT} account value limit during alpha
+      <FadeInFadeOut show={!showTokenList}>
+        <div
+          className="flex flex-col justify-between"
+          style={{ height: ACCOUNT_ACTION_MODAL_INNER_HEIGHT }}
+        >
+          <div>
+            <InlineNotification
+              type="info"
+              desc={`There is a $${ALPHA_DEPOSIT_LIMIT} account value limit during alpha
             testing.`}
-          />
-          <SolBalanceWarnings
-            amount={inputAmount}
-            setAmount={setInputAmount}
-            selectedToken={selectedToken}
-          />
-          <div className="mt-4 grid grid-cols-2">
-            <div className="col-span-2 flex justify-between">
-              <Label text={`${t('deposit')} ${t('token')}`} />
-              <MaxAmountButton
-                className="mb-2"
-                label={t('wallet-balance')}
-                onClick={setMax}
-                value={floorToDecimal(
-                  tokenMax.maxAmount,
-                  tokenMax.maxDecimals
-                ).toFixed()}
-              />
-            </div>
-            <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
-              <button
-                onClick={() => setShowTokenList(true)}
-                className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-              >
-                <div className="mr-2.5 flex min-w-[24px] items-center">
-                  <Image
-                    alt=""
-                    width="24"
-                    height="24"
-                    src={logoUri || `/icons/${selectedToken.toLowerCase()}.svg`}
-                  />
-                </div>
-                <div className="flex w-full items-center justify-between">
-                  <div className="text-xl font-bold">{selectedToken}</div>
-                  <ChevronDownIcon className="h-6 w-6" />
-                </div>
-              </button>
-            </div>
-            <div className="col-span-1">
-              <NumberFormat
-                name="amountIn"
-                id="amountIn"
-                inputMode="decimal"
-                thousandSeparator=","
-                allowNegative={false}
-                isNumericString={true}
-                decimalScale={bank?.mintDecimals || 6}
-                className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
-                placeholder="0.00"
-                value={inputAmount}
-                onValueChange={(e: NumberFormatValues) => {
-                  setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
-                }}
-                isAllowed={withValueLimit}
-              />
-            </div>
-            <div className="col-span-2 mt-2">
-              <ButtonGroup
-                activeValue={sizePercentage}
-                className="font-mono"
-                onChange={(p) => handleSizePercentage(p)}
-                values={['10', '25', '50', '75', '100']}
-                unit="%"
-              />
-            </div>
-          </div>
-          <div className="my-6 space-y-1.5 border-y border-th-bkg-3 px-2 py-4 text-sm ">
-            <HealthImpactTokenChange
-              mintPk={bank!.mint}
-              uiAmount={Number(inputAmount)}
-              isDeposit
             />
-            <div className="flex justify-between">
-              <p>{t('deposit-value')}</p>
-              <p className="font-mono">
-                {bank?.uiPrice
-                  ? formatFixedDecimals(
-                      bank.uiPrice * Number(inputAmount),
-                      true
+            <SolBalanceWarnings
+              amount={inputAmount}
+              setAmount={setInputAmount}
+              selectedToken={selectedToken}
+            />
+            <div className="mt-4 grid grid-cols-2">
+              <div className="col-span-2 flex justify-between">
+                <Label text={`${t('deposit')} ${t('token')}`} />
+                <MaxAmountButton
+                  className="mb-2"
+                  label={t('wallet-balance')}
+                  onClick={setMax}
+                  value={floorToDecimal(
+                    tokenMax.maxAmount,
+                    tokenMax.maxDecimals
+                  ).toFixed()}
+                />
+              </div>
+              <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
+                <button
+                  onClick={() => setShowTokenList(true)}
+                  className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
+                >
+                  <div className="mr-2.5 flex min-w-[24px] items-center">
+                    <Image
+                      alt=""
+                      width="24"
+                      height="24"
+                      src={
+                        logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
+                      }
+                    />
+                  </div>
+                  <div className="flex w-full items-center justify-between">
+                    <div className="text-xl font-bold">{selectedToken}</div>
+                    <ChevronDownIcon className="h-6 w-6" />
+                  </div>
+                </button>
+              </div>
+              <div className="col-span-1">
+                <NumberFormat
+                  name="amountIn"
+                  id="amountIn"
+                  inputMode="decimal"
+                  thousandSeparator=","
+                  allowNegative={false}
+                  isNumericString={true}
+                  decimalScale={bank?.mintDecimals || 6}
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  placeholder="0.00"
+                  value={inputAmount}
+                  onValueChange={(e: NumberFormatValues) => {
+                    setInputAmount(
+                      !Number.isNaN(Number(e.value)) ? e.value : ''
                     )
-                  : '-'}
-              </p>
+                  }}
+                  isAllowed={withValueLimit}
+                />
+              </div>
+              <div className="col-span-2 mt-2">
+                <ButtonGroup
+                  activeValue={sizePercentage}
+                  className="font-mono"
+                  onChange={(p) => handleSizePercentage(p)}
+                  values={['10', '25', '50', '75', '100']}
+                  unit="%"
+                />
+              </div>
             </div>
-            {/* <div className="flex justify-between">
+            <div className="my-6 space-y-1.5 border-y border-th-bkg-3 px-2 py-4 text-sm ">
+              <HealthImpactTokenChange
+                mintPk={bank!.mint}
+                uiAmount={Number(inputAmount)}
+                isDeposit
+              />
+              <div className="flex justify-between">
+                <p>{t('deposit-value')}</p>
+                <p className="font-mono">
+                  {bank?.uiPrice
+                    ? formatFixedDecimals(
+                        bank.uiPrice * Number(inputAmount),
+                        true
+                      )
+                    : '-'}
+                </p>
+              </div>
+              {/* <div className="flex justify-between">
               <div className="flex items-center">
                 <Tooltip content={t('asset-weight-desc')}>
                   <p className="tooltip-underline">{t('asset-weight')}</p>
@@ -330,18 +335,19 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
               </div>
               <p className="font-mono">{bank!.initAssetWeight.toFixed(2)}x</p>
             </div> */}
-            <div className="flex justify-between">
-              <Tooltip content={t('tooltip-collateral-value')}>
-                <p className="tooltip-underline">{t('collateral-value')}</p>
-              </Tooltip>
-              <p className="font-mono">
-                {formatFixedDecimals(
-                  bank!.uiPrice! *
-                    Number(inputAmount) *
-                    Number(bank!.initAssetWeight),
-                  true
-                )}
-              </p>
+              <div className="flex justify-between">
+                <Tooltip content={t('tooltip-collateral-value')}>
+                  <p className="tooltip-underline">{t('collateral-value')}</p>
+                </Tooltip>
+                <p className="font-mono">
+                  {formatFixedDecimals(
+                    bank!.uiPrice! *
+                      Number(inputAmount) *
+                      Number(bank!.initAssetWeight),
+                    true
+                  )}
+                </p>
+              </div>
             </div>
           </div>
           <Button

components/Layout.tsx

@@ -83,7 +83,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
             <SideNav collapsed={isCollapsed} />
           </div>
         </div>
-
+        {/* note: overflow-x-hidden below prevents position sticky from working in activity feed  */}
         <div
           className={`w-full overflow-x-hidden transition-all duration-${sideBarAnimationDuration} ease-in-out ${
             isCollapsed ? 'md:pl-[64px]' : 'md:pl-44 lg:pl-48 xl:pl-52'

components/RepayForm.tsx

@@ -202,132 +202,138 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
           valueKey="borrowAmount"
         />
       </EnterBottomExitBottom>
-      <FadeInFadeOut
-        className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
-        show={!showTokenList}
-      >
-        <div>
-          <div className="-mt-2 mb-2">
-            <SolBalanceWarnings
-              amount={inputAmount}
-              setAmount={setInputAmount}
-              selectedToken={selectedToken}
-            />
-          </div>
-          <div className="grid grid-cols-2">
-            <div className="col-span-2 flex justify-between">
-              <Label text={`${t('repay')} ${t('token')}`} />
-              <MaxAmountButton
-                className="mb-2"
-                label={t('amount-owed')}
-                onClick={setMax}
-                value={floorToDecimal(
-                  borrowAmount,
-                  walletBalance.maxDecimals
-                ).toFixed()}
-              />
-            </div>
-            <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
-              <button
-                onClick={() => setShowTokenList(true)}
-                className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-              >
-                <div className="mr-2.5 flex min-w-[24px] items-center">
-                  {logoUri ? (
-                    <Image alt="" width="24" height="24" src={logoUri} />
-                  ) : (
-                    <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
-                  )}
-                </div>
-                <div className="flex w-full items-center justify-between">
-                  <div className="text-xl font-bold">{selectedToken}</div>
-                  <ChevronDownIcon className="h-6 w-6" />
-                </div>
-              </button>
-            </div>
-            <div className="col-span-1">
-              <NumberFormat
-                name="amountIn"
-                id="amountIn"
-                inputMode="decimal"
-                thousandSeparator=","
-                allowNegative={false}
-                isNumericString={true}
-                decimalScale={bank?.mintDecimals || 6}
-                className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
-                placeholder="0.00"
-                value={inputAmount}
-                onValueChange={(e: NumberFormatValues) => {
-                  setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
-                }}
-                isAllowed={withValueLimit}
-              />
-            </div>
-            <div className="col-span-2 mt-2">
-              <ButtonGroup
-                activeValue={sizePercentage}
-                className="font-mono"
-                onChange={(p) => handleSizePercentage(p)}
-                values={['10', '25', '50', '75', '100']}
-                unit="%"
-              />
-            </div>
-          </div>
-          <div className="my-6 space-y-1.5 border-y border-th-bkg-3 px-2 py-4 text-sm ">
-            {bank ? (
-              <HealthImpactTokenChange
-                mintPk={bank.mint}
-                uiAmount={Number(inputAmount)}
-                isDeposit
-              />
-            ) : null}
-            <div className="flex justify-between">
-              <p>{t('repayment-value')}</p>
-              <p className="font-mono">
-                {bank?.uiPrice
-                  ? formatFixedDecimals(
-                      bank.uiPrice * Number(inputAmount),
-                      true
-                    )
-                  : '-'}
-              </p>
-            </div>
-            <div className="flex justify-between">
-              <div className="flex items-center">
-                <p>{t('outstanding-balance')}</p>
-              </div>
-              <p className="font-mono">
-                {floorToDecimal(
-                  borrowAmount - Number(inputAmount),
-                  walletBalance.maxDecimals
-                ).toNumber()}{' '}
-                <span className="font-body text-th-fgd-4">{selectedToken}</span>
-              </p>
-            </div>
-          </div>
-        </div>
-        <Button
-          onClick={() => handleDeposit(inputAmount)}
-          className="flex w-full items-center justify-center"
-          disabled={!inputAmount || showInsufficientBalance}
-          size="large"
+      <FadeInFadeOut show={!showTokenList}>
+        <div
+          className="flex flex-col justify-between"
+          style={{ height: ACCOUNT_ACTION_MODAL_INNER_HEIGHT }}
         >
-          {submitting ? (
-            <Loading className="mr-2 h-5 w-5" />
-          ) : showInsufficientBalance ? (
-            <div className="flex items-center">
-              <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
-              {t('swap:insufficient-balance', {
-                symbol: selectedToken,
-              })}
+          <div>
+            <div className="-mt-2 mb-2">
+              <SolBalanceWarnings
+                amount={inputAmount}
+                setAmount={setInputAmount}
+                selectedToken={selectedToken}
+              />
             </div>
-          ) : (
-            <div className="flex items-center">
-              <ArrowDownRightIcon className="mr-2 h-5 w-5" />
-              {t('repay')}
+            <div className="grid grid-cols-2">
+              <div className="col-span-2 flex justify-between">
+                <Label text={`${t('repay')} ${t('token')}`} />
+                <MaxAmountButton
+                  className="mb-2"
+                  label={t('amount-owed')}
+                  onClick={setMax}
+                  value={floorToDecimal(
+                    borrowAmount,
+                    walletBalance.maxDecimals
+                  ).toFixed()}
+                />
+              </div>
+              <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
+                <button
+                  onClick={() => setShowTokenList(true)}
+                  className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
+                >
+                  <div className="mr-2.5 flex min-w-[24px] items-center">
+                    {logoUri ? (
+                      <Image alt="" width="24" height="24" src={logoUri} />
+                    ) : (
+                      <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
+                    )}
+                  </div>
+                  <div className="flex w-full items-center justify-between">
+                    <div className="text-xl font-bold">{selectedToken}</div>
+                    <ChevronDownIcon className="h-6 w-6" />
+                  </div>
+                </button>
+              </div>
+              <div className="col-span-1">
+                <NumberFormat
+                  name="amountIn"
+                  id="amountIn"
+                  inputMode="decimal"
+                  thousandSeparator=","
+                  allowNegative={false}
+                  isNumericString={true}
+                  decimalScale={bank?.mintDecimals || 6}
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  placeholder="0.00"
+                  value={inputAmount}
+                  onValueChange={(e: NumberFormatValues) => {
+                    setInputAmount(
+                      !Number.isNaN(Number(e.value)) ? e.value : ''
+                    )
+                  }}
+                  isAllowed={withValueLimit}
+                />
+              </div>
+              <div className="col-span-2 mt-2">
+                <ButtonGroup
+                  activeValue={sizePercentage}
+                  className="font-mono"
+                  onChange={(p) => handleSizePercentage(p)}
+                  values={['10', '25', '50', '75', '100']}
+                  unit="%"
+                />
+              </div>
             </div>
-          )}
-        </Button>
+            <div className="my-6 space-y-1.5 border-y border-th-bkg-3 px-2 py-4 text-sm ">
+              {bank ? (
+                <HealthImpactTokenChange
+                  mintPk={bank.mint}
+                  uiAmount={Number(inputAmount)}
+                  isDeposit
+                />
+              ) : null}
+              <div className="flex justify-between">
+                <p>{t('repayment-value')}</p>
+                <p className="font-mono">
+                  {bank?.uiPrice
+                    ? formatFixedDecimals(
+                        bank.uiPrice * Number(inputAmount),
+                        true
+                      )
+                    : '-'}
+                </p>
+              </div>
+              <div className="flex justify-between">
+                <div className="flex items-center">
+                  <p>{t('outstanding-balance')}</p>
+                </div>
+                <p className="font-mono">
+                  {floorToDecimal(
+                    borrowAmount - Number(inputAmount),
+                    walletBalance.maxDecimals
+                  ).toNumber()}{' '}
+                  <span className="font-body text-th-fgd-4">
+                    {selectedToken}
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <Button
+            onClick={() => handleDeposit(inputAmount)}
+            className="flex w-full items-center justify-center"
+            disabled={!inputAmount || showInsufficientBalance}
+            size="large"
+          >
+            {submitting ? (
+              <Loading className="mr-2 h-5 w-5" />
+            ) : showInsufficientBalance ? (
+              <div className="flex items-center">
+                <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+                {t('swap:insufficient-balance', {
+                  symbol: selectedToken,
+                })}
+              </div>
+            ) : (
+              <div className="flex items-center">
+                <ArrowDownRightIcon className="mr-2 h-5 w-5" />
+                {t('repay')}
+              </div>
+            )}
+          </Button>
+        </div>
       </FadeInFadeOut>
     </>
   ) : !connected ? (

components/WithdrawForm.tsx

@@ -196,95 +196,100 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
           valueKey="accountBalance"
         />
       </EnterBottomExitBottom>
-      <FadeInFadeOut
-        className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
-        show={!showTokenList}
-      >
-        <div>
-          {initHealth <= 0 ? (
-            <div className="mb-4">
-              <InlineNotification
-                type="error"
-                desc="You have no available collateral to withdraw."
-              />
-            </div>
-          ) : null}
-          <div className="grid grid-cols-2">
-            <div className="col-span-2 flex justify-between">
-              <Label text={`${t('withdraw')} ${t('token')}`} />
-              <MaxAmountButton
-                className="mb-2"
-                label={t('max')}
-                onClick={() => handleSizePercentage('100')}
-                value={tokenMax.toString()}
-              />
-            </div>
-            <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
-              <button
-                onClick={() => setShowTokenList(true)}
-                className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
-              >
-                <div className="mr-2.5 flex min-w-[24px] items-center">
-                  <Image
-                    alt=""
-                    width="24"
-                    height="24"
-                    src={logoUri || `/icons/${selectedToken.toLowerCase()}.svg`}
-                  />
-                </div>
-                <div className="flex w-full items-center justify-between">
-                  <div className="text-xl font-bold">{selectedToken}</div>
-                  <ChevronDownIcon className="h-6 w-6" />
-                </div>
-              </button>
-            </div>
-            <div className="col-span-1">
-              <NumberFormat
-                name="amountIn"
-                id="amountIn"
-                inputMode="decimal"
-                thousandSeparator=","
-                allowNegative={false}
-                isNumericString={true}
-                decimalScale={bank?.mintDecimals || 6}
-                className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
-                placeholder="0.00"
-                value={inputAmount}
-                onValueChange={(e: NumberFormatValues) =>
-                  setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
-                }
-                isAllowed={withValueLimit}
-              />
-            </div>
-            <div className="col-span-2 mt-2">
-              <ButtonGroup
-                activeValue={sizePercentage}
-                className="font-mono"
-                onChange={(p) => handleSizePercentage(p)}
-                values={['10', '25', '50', '75', '100']}
-                unit="%"
-              />
-            </div>
-          </div>
-          <div className="my-6 space-y-2 border-y border-th-bkg-3 px-2 py-4">
-            <HealthImpactTokenChange
-              mintPk={bank!.mint}
-              uiAmount={Number(inputAmount)}
-            />
-            <div className="flex justify-between">
-              <p>{t('withdraw-value')}</p>
-              <p className="font-mono text-th-fgd-1">
-                {bank?.uiPrice
-                  ? formatFixedDecimals(
-                      bank.uiPrice * Number(inputAmount),
-                      true
+      <FadeInFadeOut show={!showTokenList}>
+        <div
+          className="flex flex-col justify-between"
+          style={{ height: ACCOUNT_ACTION_MODAL_INNER_HEIGHT }}
+        >
+          <div>
+            {initHealth <= 0 ? (
+              <div className="mb-4">
+                <InlineNotification
+                  type="error"
+                  desc="You have no available collateral to withdraw."
+                />
+              </div>
+            ) : null}
+            {bank ? <TokenVaultWarnings bank={bank} /> : null}
+            <div className="grid grid-cols-2">
+              <div className="col-span-2 flex justify-between">
+                <Label text={`${t('withdraw')} ${t('token')}`} />
+                <MaxAmountButton
+                  className="mb-2"
+                  label={t('max')}
+                  onClick={() => handleSizePercentage('100')}
+                  value={tokenMax.toString()}
+                />
+              </div>
+              <div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
+                <button
+                  onClick={() => setShowTokenList(true)}
+                  className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
+                >
+                  <div className="mr-2.5 flex min-w-[24px] items-center">
+                    <Image
+                      alt=""
+                      width="24"
+                      height="24"
+                      src={
+                        logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
+                      }
+                    />
+                  </div>
+                  <div className="flex w-full items-center justify-between">
+                    <div className="text-xl font-bold">{selectedToken}</div>
+                    <ChevronDownIcon className="h-6 w-6" />
+                  </div>
+                </button>
+              </div>
+              <div className="col-span-1">
+                <NumberFormat
+                  name="amountIn"
+                  id="amountIn"
+                  inputMode="decimal"
+                  thousandSeparator=","
+                  allowNegative={false}
+                  isNumericString={true}
+                  decimalScale={bank?.mintDecimals || 6}
+                  className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
+                  placeholder="0.00"
+                  value={inputAmount}
+                  onValueChange={(e: NumberFormatValues) =>
+                    setInputAmount(
+                      !Number.isNaN(Number(e.value)) ? e.value : ''
                     )
-                  : '-'}
-              </p>
+                  }
+                  isAllowed={withValueLimit}
+                />
+              </div>
+              <div className="col-span-2 mt-2">
+                <ButtonGroup
+                  activeValue={sizePercentage}
+                  className="font-mono"
+                  onChange={(p) => handleSizePercentage(p)}
+                  values={['10', '25', '50', '75', '100']}
+                  unit="%"
+                />
+              </div>
+            </div>
+            <div className="my-6 space-y-2 border-y border-th-bkg-3 px-2 py-4">
+              <HealthImpactTokenChange
+                mintPk={bank!.mint}
+                uiAmount={Number(inputAmount)}
+              />
+              <div className="flex justify-between">
+                <p>{t('withdraw-value')}</p>
+                <p className="font-mono text-th-fgd-1">
+                  {bank?.uiPrice
+                    ? formatFixedDecimals(
+                        bank.uiPrice * Number(inputAmount),
+                        true
+                      )
+                    : '-'}
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="flex justify-center">
           <Button
             onClick={handleWithdraw}
             className="flex w-full items-center justify-center"

components/account/ActivityFeedTable.tsx

@@ -134,7 +134,7 @@ const ActivityFeedTable = ({
     if (activity_type === 'perp_trade') {
       const { maker_fee, price, quantity, taker_fee } =
         activity.activity_details
-      value = (quantity * price + maker_fee + taker_fee) * -1
+      value = quantity * price + maker_fee + taker_fee
     }
     return value
   }
@@ -144,8 +144,8 @@ const ActivityFeedTable = ({
       <>
         {showTableView ? (
           <Table className="min-w-full">
-            <thead>
-              <TrHead className="sticky top-0 z-10">
+            <thead className="sticky top-0 z-10">
+              <TrHead>
                 <Th className="bg-th-bkg-1 text-left">{t('date')}</Th>
                 <Th className="bg-th-bkg-1 text-right">
                   {t('activity:activity')}
@@ -210,7 +210,7 @@ const ActivityFeedTable = ({
                     </Td>
                     <Td
                       className={`text-right font-mono ${
-                        activityName === 'swap' || activityName === 'perp'
+                        activityName === 'swap' || activityName === 'perp_trade'
                           ? 'text-th-fgd-2'
                           : value >= 0
                           ? 'text-th-up'
@@ -219,7 +219,7 @@ const ActivityFeedTable = ({
                     >
                       {value > 0 &&
                       activityName !== 'swap' &&
-                      activityName !== 'perp'
+                      activityName !== 'perp_trade'
                         ? '+'
                         : ''}
                       {formatFixedDecimals(value, true)}
@@ -272,9 +272,9 @@ const ActivityFeedTable = ({
           </div>
         )}
         {loadActivityFeed ? (
-          <div className="mt-2 space-y-0.5">
+          <div className="mt-4 space-y-1.5">
             {[...Array(4)].map((x, i) => (
-              <SheenLoader className="flex flex-1" key={i}>
+              <SheenLoader className="mx-4 flex flex-1 md:mx-6" key={i}>
                 <div className="h-16 w-full bg-th-bkg-2" />
               </SheenLoader>
             ))}

components/modals/BorrowRepayModal.tsx

@@ -23,7 +23,7 @@ const BorrowRepayModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className={`h-[${ACCOUNT_ACTION_MODAL_HEIGHT}]`}>
+      <div style={{ height: ACCOUNT_ACTION_MODAL_HEIGHT }}>
         <div className="pb-2">
           <TabUnderline
             activeValue={activeTab}

components/modals/DepositWithdrawModal.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import TabUnderline from '@components/shared/TabUnderline'
 import DepositForm from '@components/DepositForm'
 import WithdrawForm from '@components/WithdrawForm'
+import { ACCOUNT_ACTION_MODAL_HEIGHT } from 'utils/constants'
 
 interface DepositWithdrawModalProps {
   action: 'deposit' | 'withdraw'
@@ -22,7 +23,7 @@ const DepositWithdrawModal = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="h-[448px]">
+      <div style={{ height: ACCOUNT_ACTION_MODAL_HEIGHT }}>
         <div className="pb-2">
           <TabUnderline
             activeValue={activeTab}

components/shared/TokenVaultWarnings.tsx

@@ -43,19 +43,21 @@ const TokenVaultWarnings = ({ bank }: { bank: Bank }) => {
 
   return mangoAccount &&
     balance / bank.minVaultToDepositsRatio > vaultBalance ? (
-    <InlineNotification
-      type="warning"
-      desc={
-        <div>
-          The Mango {bank.name} vault balance is low which is impacting the
-          maximum amount you may borrow. View the{' '}
-          <Link href="/stats" className="underline hover:no-underline">
-            Stats page
-          </Link>{' '}
-          to see vault balances.
-        </div>
-      }
-    />
+    <div className="mb-4">
+      <InlineNotification
+        type="warning"
+        desc={
+          <div>
+            The available {bank.name} vault balance is low and impacting the
+            maximum amount you can withdraw/borrow. View the{' '}
+            <Link href="/stats" className="underline hover:no-underline">
+              Stats page
+            </Link>{' '}
+            to see vault balances.
+          </div>
+        }
+      />
+    </div>
   ) : null
 }
 

components/swap/SwapForm.tsx

@@ -432,7 +432,7 @@ const SwapForm = () => {
             }
           />
         ) : (
-          <div className="mt-6 flex-grow">
+          <div className="mt-6 mb-4 flex-grow">
             <div className="flex">
               <Button disabled className="flex-grow">
                 <span>
@@ -444,12 +444,8 @@ const SwapForm = () => {
             </div>
           </div>
         )}
-        {group && inputBank ? (
-          <div className="mt-4">
-            <TokenVaultWarnings bank={inputBank} />
-          </div>
-        ) : null}
-        <div className="mt-4 space-y-2">
+        {group && inputBank ? <TokenVaultWarnings bank={inputBank} /> : null}
+        <div className="space-y-2">
           <div id="swap-step-four">
             <HealthImpact maintProjectedHealth={maintProjectedHealth} />
           </div>
@@ -504,7 +500,7 @@ const SwapFormSubmitButton = ({
   return (
     <Button
       onClick={() => setShowConfirm(true)}
-      className="mt-6 flex w-full items-center justify-center text-base"
+      className="mt-6 mb-4 flex w-full items-center justify-center text-base"
       disabled={disabled}
       size="large"
     >

components/swap/SwapHistoryTable.tsx

@@ -413,9 +413,9 @@ const SwapHistoryTable = ({
         </div>
       )
     ) : (
-      <div className="mt-2 space-y-0.5">
+      <div className="mt-4 space-y-1.5">
         {[...Array(4)].map((x, i) => (
-          <SheenLoader className="mx-4 mt-2 flex flex-1" key={i}>
+          <SheenLoader className="mx-4 flex flex-1 md:mx-6" key={i}>
             <div className="h-16 w-full bg-th-bkg-2" />
           </SheenLoader>
         ))}

pages/token/[token].tsx

@@ -24,7 +24,7 @@ export const getStaticPaths = async () => {
   const response = await fetch(url)
   const data = await response.json()
   const paths = data.map((t: any) => ({
-    params: { token: t.symbol },
+    params: { token: t.symbol.toUpperCase() },
   }))
 
   return { paths, fallback: false }

utils/constants.ts

@@ -57,6 +57,6 @@ export const DEFAULT_MARKET_NAME = 'SOL/USDC'
 
 export const MIN_SOL_BALANCE = 0.04
 
-export const ACCOUNT_ACTION_MODAL_HEIGHT = '448px'
+export const ACCOUNT_ACTION_MODAL_HEIGHT = '478px'
 
-export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '386px'
+export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '416px'