42 integrate axelar bridge to polygon prototype (#60)

* Use of pen ephemeral account, trigger transfer when tokens received * Phase 6b (#44) * Execute Nabla after SEP-24 * Some fixes * Fix `yarn test` not working by importing a preset that enhances transpiling vite code * Fix errors: useQuery result must not be undefined * Update min offramp amount for nTokens * Fix typo --------- Co-authored-by: Marcel Ebert <mail@marcel-ebert.de> * use pen ephemeral address in performSwap * Refactor wagmi config * Add contract abis * Implement swap with squid router * wip * Refactor squidrouter service * Small refactoring * Use swap in Inputkeys * Fix transaction status issues * cleanup old prototype logic * wip. testing integration of squidrouter * Make USDC the default selection * Delete duplicate /contracts/Erc20.ts * format, remove abi duplicate * testing ephemeral funding * Add logic to fund ephemeral account on Pendulum * Change USDC ERC20 address * Add funding account phrase * Fix signing transaction to fund ephemeral acc * trigger funding of eph. account after swap, fix deposit event listener * wip. testing * Fix lint errors * Use USDC instead of USDC.e * Increase funding account * Add quickfix with apiplus * Use public horizon in signing service * Fix errors * Remove unused wallet components * Change slippageBasisPoints from 20 to 30 * crop input box for mobile * cleanup pendulum ephemeral * Fix styling for mobile * Remove media query to avoid conflicts * remove token dust * fix for clean pen ephemeral * use new integrator id and plus squid route * use getROuteApiPlus function * Remove message about minimum EURC amount * Change button for anchor to a element * attempt to transfer all tokens regardless of balance * log ephemeral account on offramp * log ephemeral account after sep is completed --------- Co-authored-by: Gianfranco <g.tasteri@gmail.com> Co-authored-by: Torsten Stüber <15174476+TorstenStueber@users.noreply.github.com> Co-authored-by: gianfra-t <96739519+gianfra-t@users.noreply.github.com> Co-authored-by: bogdanS98 <bogdan.sandu13@gmail.com>
pendulum-chain · Jul 10, 2024 · 82b281b · 82b281b
1 parent 76a9133
commit 82b281b
Show file tree

Hide file tree

Showing 39 changed files with 1,971 additions and 729 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -24,11 +24,14 @@
       "version": "detect"
     }
   },
-  "plugins": ["react", "@typescript-eslint", "jest"],
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "jest"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
     "react/prop-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "prefer-const": "warn",
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {

diff --git a/App.css b/App.css
@@ -93,7 +93,6 @@ body {
 
 #app {
   width: 100%;
-  min-width: 1800px;
   box-sizing: border-box;
 }
 
@@ -127,27 +126,15 @@ body {
 }
 
 .inputBox.active {
-  width: 35%;
   margin-top: 5px;
 }
 
-.eventsContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow-y: scroll;
-  max-height: 70vh;
-}
-
 input {
   margin: 10px;
   padding: 10px;
 }
 
 .eventBox {
-  margin: 20px auto;
-  width: 30%;
-  padding: 20px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px #ccc;
   transition: all 0.5s ease-in-out;
@@ -172,14 +159,11 @@ input {
 }
 
 .eventBox.active {
-  transform: scale(1.3);
+  transform: scale(1.2);
   background-color: #f0f0f0;
 }
 
 .eventBox.error {
-  margin: 20px auto;
-  width: 30%;
-  padding: 20px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px #ccc;
   transition: all 0.5s ease-in-out;
@@ -194,7 +178,6 @@ input {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 50px;
 }
 
 @tailwind base;

diff --git a/config/babel.jest.cjs b/config/babel.jest.cjs
@@ -10,6 +10,7 @@ module.exports = babelJest.createTransformer({
       },
     ],
     '@babel/preset-env',
+    'babel-preset-vite',
   ],
   plugins: [
     [

diff --git a/jest.config.cjs b/jest.config.cjs
@@ -1,8 +1,5 @@
 module.exports = {
   roots: ['<rootDir>/src'],
-  transform: {
-    '\\.(ts|tsx)?$': 'babel-jest',
-  },
   testMatch: ['**/?(*.)+(spec|test).{ts,tsx}'],
   testEnvironment: 'jsdom',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "tailwindcss": "^3.4.3",
     "viem": "2.x",
     "wagmi": "^2.10.3",
+    "web3": "^4.10.0",
     "yup": "^1.4.0"
   },
   "devDependencies": {
@@ -89,6 +90,7 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
+    "babel-preset-vite": "^1.1.3",
     "esbuild-plugin-polyfill-node": "^0.3.0",
     "eslint": "^8.34.0",
     "eslint-plugin-jest": "^27.2.1",

diff --git a/src/GlobalStateProvider.tsx b/src/GlobalStateProvider.tsx
@@ -46,7 +46,7 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => {
       getThemeName,
       dAppName,
     }),
-    [dAppName, getThemeName, tenantName, walletAccount],
+    [dAppName, getThemeName, tenantName],
   );
 
   return <GlobalStateContext.Provider value={providerValue}>{children}</GlobalStateContext.Provider>;

diff --git a/src/assets/coins/USDC.png b/src/assets/coins/USDC.png
diff --git a/src/components/GenericEvent.tsx b/src/components/GenericEvent.tsx
@@ -17,11 +17,12 @@ interface EventBoxProps {
 }
 
 const EventBox = React.forwardRef<HTMLDivElement, EventBoxProps>(({ event, className }, ref) => {
-  const classes = `eventBox ${className} ${event.status}`;
-
   return (
-    <div ref={ref} className={classes}>
-      <p>{event.value}</p>
+    <div
+      ref={ref}
+      className={`mx-10 md:mx-20 my-auto md:p-5 p-1 md:w-2/5 w-4/5 box-border eventBox ${className} ${event.status}`}
+    >
+      {event.value}
     </div>
   );
 });

diff --git a/src/components/InputKeys/AmountSelector.tsx b/src/components/InputKeys/AmountSelector.tsx
@@ -57,18 +57,12 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
       if (maxBalance === undefined) return;
       // If we don't want to show the quote result if the balance is lower that the selected at from,
       // we can do so uncommenting this line.
-      //if (amountBigDecimal.gt(maxBalance.preciseBigDecimal)) return 'Amount exceeds maximum';
+      if (amountBigDecimal.gt(maxBalance.preciseBigDecimal)) return 'Amount exceeds maximum';
 
       if (amountBigDecimal.c[0] !== 0) {
         if (amountBigDecimal.e + 1 + maxBalance.decimals < amountBigDecimal.c.length)
           return `The number you entered must have at most ${maxBalance.decimals} decimal places`;
       }
-
-      // To big numbers will break BigNumber.toString() since they return a string with a scientific notation
-      // this happens beyond 1e+20, so we can check if the number is bigger than that
-      if (amountBigDecimal.c[0] !== 0) {
-        if (amountBigDecimal.e + maxBalance.decimals > 20) return `The number you entered is too large`;
-      }
     };
 
     const errorMessage = determineErrorMessage();

diff --git a/src/components/InputKeys/From.tsx b/src/components/InputKeys/From.tsx
@@ -16,7 +16,7 @@ interface FromProps<FormFieldValues extends FieldValues, TFieldName extends Fiel
   inputHasError: boolean;
   fromFormFieldName: TFieldName;
   form: UseFormReturn<FormFieldValues>;
-  fromTokenBalances: { [key: string]: BalanceInfo };
+  tokenBalance: BalanceInfo;
   offrampStarted: boolean;
 }
 
@@ -27,12 +27,12 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
   inputHasError,
   fromFormFieldName,
   form,
-  fromTokenBalances,
+  tokenBalance,
   offrampStarted,
 }: FromProps<FormFieldValues, TFieldName>) {
   const { setValue } = useFormContext<SwapFormValues>();
-  const fromTokenBalance = tokenId ? fromTokenBalances[tokenId] : undefined;
-
+  // we can get rid of this and just load USDC balance, not pass tokenBalance object.
+  const fromTokenBalance = tokenBalance;
   return (
     <div
       className={`rounded-lg bg-base-300 px-4 py-3 border ${inputHasError ? 'border-red-600' : 'border-transparent'}`}
@@ -54,51 +54,43 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
           type="button"
         >
           <span className="rounded-full bg-[rgba(0,0,0,0.15)] h-full p-px mr-1">
-            {fromToken && (
-              <img
-                src={`/assets/coins/${fromToken.assetCode.toUpperCase()}.png`}
-                alt="Pendulum"
-                className="h-full w-auto"
-              />
-            )}
+            {fromToken && <img src={fromToken.icon} alt="Pendulum" className="h-full w-auto" />}
             {!fromToken && <img src={pendulumIcon} alt="Pendulum" className="h-full w-auto" />}
           </span>
           <strong className="font-bold">{fromToken?.assetCode || 'Select'}</strong>
           <ChevronDownIcon className="w-4 h-4 inline ml-px" />
         </Button>
       </div>
-      <div className="flex justify-between items-center mt-1 dark:text-neutral-400 text-neutral-500">
-        <div className="flex gap-1 text-sm">
-          {fromTokenBalance !== undefined && (
-            <>
-              <span className="mr-1">
-                Your Balance: <TokenBalance query={fromTokenBalance} symbol={fromToken?.assetCode}></TokenBalance>
-              </span>
-              <button
-                className="text-primary hover:underline"
-                onClick={() => {
-                  if (fromTokenBalance.approximateNumber !== undefined) {
-                    setValue('fromAmount', (fromTokenBalance.approximateNumber * 0.5).toString());
-                  }
-                }}
-                type="button"
-              >
-                50%
-              </button>
-              <button
-                className="text-primary hover:underline"
-                onClick={() => {
-                  if (fromTokenBalance.approximateNumber !== undefined) {
-                    setValue('fromAmount', fromTokenBalance.approximateNumber.toString());
-                  }
-                }}
-                type="button"
-              >
-                MAX
-              </button>
-            </>
-          )}
-        </div>
+      <div className="justify-between items-center mt-1 dark:text-neutral-400 text-neutral-500">
+        {fromTokenBalance !== undefined && (
+          <div className="flex text-sm gap-4">
+            <span className="mr-1 grow">
+              Your Balance: <TokenBalance query={fromTokenBalance} symbol={fromToken?.assetCode}></TokenBalance>
+            </span>
+            <button
+              className="text-primary hover:underline"
+              onClick={() => {
+                if (fromTokenBalance.approximateNumber !== undefined) {
+                  setValue('fromAmount', (fromTokenBalance.approximateNumber * 0.5).toString());
+                }
+              }}
+              type="button"
+            >
+              50%
+            </button>
+            <button
+              className="text-primary hover:underline"
+              onClick={() => {
+                if (fromTokenBalance.approximateNumber !== undefined) {
+                  setValue('fromAmount', fromTokenBalance.approximateNumber.toString());
+                }
+              }}
+              type="button"
+            >
+              MAX
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/InputKeys/SelectionModal.tsx b/src/components/InputKeys/SelectionModal.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '../Skeleton';
 import { Avatar, AvatarProps, Modal, Button, Input, ButtonProps } from 'react-daisyui';
 import { ChangeEvent, useMemo, useState } from 'preact/compat';
 import { CheckIcon } from '@heroicons/react/20/solid';
-import { TOKEN_CONFIG, TokenDetails } from '../../constants/tokenConfig';
+import { TOKEN_CONFIG, TokenDetails, TokenType } from '../../constants/tokenConfig';
 
 interface PoolSelectorModalProps extends PoolListProps {
   isLoading?: boolean;
@@ -49,13 +49,19 @@ function PoolList({ onSelect, selected, mode }: PoolListProps) {
 
   const poolList = useMemo(() => {
     const poolList: TokenDetails[] = [];
-    Object.keys(TOKEN_CONFIG).forEach((token) => {
+    (Object.keys(TOKEN_CONFIG) as TokenType[]).forEach((token) => {
       // special case rules
       // do not allow non-offramp tokens in the to field,
       if (mode.type === 'to' && mode.swap && !TOKEN_CONFIG[token].isOfframp) return;
 
-      // only allow USDT asset code
-      if (mode.type === 'from' && mode.swap && TOKEN_CONFIG[token].assetCode !== 'USDT') return;
+      // only allow USDC asset code from otherChain property
+      if (
+        mode.type === 'from' &&
+        mode.swap &&
+        TOKEN_CONFIG[token].assetCode !== 'USDC' &&
+        TOKEN_CONFIG[token].isPolygonChain !== true
+      )
+        return;
 
       // Do not allow non offrampable tokens in the from field if no swap
       if (mode.type === 'from' && !mode.swap && !TOKEN_CONFIG[token].isOfframp) return;
@@ -97,7 +103,7 @@ function PoolList({ onSelect, selected, mode }: PoolListProps) {
                 <Avatar
                   size={'xs' as AvatarProps['size']}
                   letters={TokenDetails.assetCode}
-                  src={`/assets/coins/${TokenDetails.assetCode.toUpperCase()}.png`}
+                  src={TokenDetails.icon}
                   shape="circle"
                   className="text-xs"
                 />
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ module.exports = babelJest.createTransformer({ @@
           },
         ],
         '@babel/preset-env',
+        'babel-preset-vite',
       ],
       plugins: [
         [
@@ Expand Down @@