Merge pull request #440 from TosiDrop/master

Release v3.4.0

.env.example

@@ -28,6 +28,12 @@
 # Log output format for Express/morgan (default: dev)
 #LOG_TYPE=combined
 
+# Fee for native platform token (default: 500000)
+#NATIVE_TOKEN_FEE=500000
+
+# Native platform token (optional)
+#NATIVE_TOKEN_ID=a8a1dccea2e378081f2d500d98d022dd3c0bd77afd9dbc7b55a9d21b.63544f5349
+
 # Premium token fee (default: 500000)
 #TOSIFEE=500000
 
@@ -50,4 +56,4 @@
 #VM_URL="https://vm.adaseal.eu"
 
 # enable ergo side
-#ERGO_ENABLED=false
+#ERGO_ENABLED=false

.github/workflows/ci-docker.yml

@@ -41,7 +41,7 @@ jobs:
           mv /tmp/.buildx-cache-new /tmp/.buildx-cache
 
   build-arm64:
-    runs-on: self-hosted
+    runs-on: ["self-hosted", "ARM64"]
     steps:
       - uses: actions/checkout@v2
       - name: qemu

.github/workflows/publish.yml

@@ -82,7 +82,7 @@ jobs:
           done
 
   build-arm64:
-    runs-on: self-hosted
+    runs-on: ["self-hosted", "ARM64"]
     permissions:
       contents: read
       packages: write

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2022 TosiDrop
+Copyright (c) 2023 Blink Labs Software
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

client/package.json

@@ -8,31 +8,31 @@
   },
   "dependencies": {
     "@cardano-sdk/cip30": "^0.5.0",
-    "@fortawesome/fontawesome-common-types": "^6.4.2",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/fontawesome-common-types": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@reduxjs/toolkit": "^1.9.5",
+    "@reduxjs/toolkit": "^1.9.7",
     "@types/node": "^18.14.1",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "axios": "^0.27.2",
-    "bulma": "^0.9.3",
-    "copy-to-clipboard": "^3.3.2",
+    "bulma": "^0.9.4",
+    "copy-to-clipboard": "^3.3.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-native": "^0.67.4",
     "react-qr-code": "^2.0.12",
-    "react-redux": "^8.1.2",
-    "react-router-dom": "^6.15.0",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.20.1",
     "react-scripts": "^5.0.1",
     "react-simple-tooltip": "^2.6.3",
     "react-spinners": "^0.13.8",
-    "sass": "^1.65.1",
-    "ts-node": "^10.7.0",
+    "sass": "^1.69.5",
+    "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^3.4.0"
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
     "start": "PORT=3001 react-scripts --max-old-space-size=8192 start",
@@ -62,8 +62,8 @@
     ]
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3"
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.5"
   }
 }

client/src/App.tsx

@@ -19,7 +19,7 @@ function App() {
   const location = useLocation().pathname;
   const dispatch = useDispatch();
   const connectedWallet = useSelector(
-    (state: RootState) => state.wallet.walletApi
+    (state: RootState) => state.wallet.walletApi,
   );
 
   const init = async () => {

client/src/components/BlockchainSelector/index.tsx

@@ -30,7 +30,7 @@ export default function BlockchainSelector({
 }) {
   const chain = useSelector((state: RootState) => state.global.chain);
   const ergoEnabled = useSelector(
-    (state: RootState) => state.global.ergoEnabled
+    (state: RootState) => state.global.ergoEnabled,
   );
   const network = NETWORK_INFO[chain];
   const { ref, visible, setVisible } = useComponentVisible(false);

client/src/components/Claim/ClaimableTokenBox/index.tsx

@@ -1,4 +1,5 @@
-import TokenInfoTooltip from "../TokenInfoTooltip";
+// import TokenInfoTooltip from "../TokenInfoTooltip";
+import NativefeeTooltip from "../NativefeeTooltip";
 import TosifeeTooltip from "../TosifeeTooltip";
 import "./index.scss";
 
@@ -14,6 +15,7 @@ interface Props {
   logo: string;
   assetId: string;
   premium: boolean;
+  native: boolean;
 }
 
 const ClaimableTokenBox = ({
@@ -26,6 +28,7 @@ const ClaimableTokenBox = ({
   amount,
   logo,
   premium,
+  native,
 }: Props) => {
   return (
     <div
@@ -38,8 +41,12 @@ const ClaimableTokenBox = ({
       <div className="w-full flex flex-row items-center">
         <div className="text-sm">{amount} available</div>
         <div className="ml-auto flex flex-row align-center gap-2">
-          <TokenInfoTooltip price={price} total={total}></TokenInfoTooltip>
-          {premium ? <TosifeeTooltip></TosifeeTooltip> : null}
+          {/* Disabled <TokenInfoTooltip price={price} total={total}></TokenInfoTooltip> */}
+          {native ? (
+            <NativefeeTooltip></NativefeeTooltip>
+          ) : premium ? (
+            <TosifeeTooltip></TosifeeTooltip>
+          ) : null}
         </div>
       </div>
       <img alt="logo" src={logo} className="h-24"></img>

client/src/components/Claim/DepositInfo/index.tsx

@@ -17,6 +17,7 @@ interface Params {
   setTransactionId: Function;
   setTransactionStatus: Function;
   unlock: boolean;
+  native: boolean;
 }
 
 const DepositInfo = ({
@@ -27,6 +28,7 @@ const DepositInfo = ({
   setTransactionId,
   setTransactionStatus,
   unlock,
+  native,
 }: Params) => {
   return (
     <div className="flex flex-col gap-4">
@@ -64,6 +66,7 @@ const DepositInfo = ({
           numberOfTokens={checkedCount}
           deposit={txDetail.deposit}
           unlock={unlock}
+          native={native}
           isWhitelisted={txDetail.is_whitelisted}
         ></TransactionDetail>
       ) : null}

client/src/components/Claim/NativefeeTooltip.tsx

@@ -0,0 +1,16 @@
+import { faCoins } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export default function NativefeeTooltip() {
+  return (
+    <span className="premium-token tooltip-activator">
+      <FontAwesomeIcon
+        className="text-premium cursor-help premium-pulse"
+        icon={faCoins}
+      />
+      <div className="tooltip w-64 p-3.5 rounded-2xl right-5 bottom-5 absolute">
+        Native Token Fee is applied to our native platform token.
+      </div>
+    </span>
+  );
+}

client/src/components/Claim/RewardsView.tsx

@@ -88,6 +88,7 @@ export default function RewardsView({
                 logo={token.logo}
                 assetId={token.assetId}
                 premium={token.premium}
+                native={token.native}
               />
             );
           })}

client/src/components/Claim/SendAdaInfo/index.tsx

@@ -26,10 +26,10 @@ const SendAdaInfo = ({
   setTransactionStatus,
 }: Params) => {
   const connectedWalletApi = useSelector(
-    (state: RootState) => state.wallet.walletApi
+    (state: RootState) => state.wallet.walletApi,
   );
   const isWrongNetwork = useSelector(
-    (state: RootState) => state.wallet.isWrongNetwork
+    (state: RootState) => state.wallet.isWrongNetwork,
   );
   const { transfer, loading: transferLoading } = useTransfer();
 
@@ -82,7 +82,7 @@ const SendAdaInfo = ({
       (txId) => {
         setTransactionStatus(TransactionStatusDetail.processing);
         setTransactionId(txId);
-      }
+      },
     );
   };
 

client/src/components/Claim/TransactionDetail/index.tsx

@@ -9,10 +9,12 @@ interface Props {
   numberOfTokens: number;
   deposit: number;
   unlock: boolean;
+  native: boolean;
   isWhitelisted: boolean;
 }
 
 interface ISettings {
+  nativeFee: number;
   vmFee: number;
   txFee: number;
   tosiFee: number;
@@ -22,9 +24,11 @@ const TransactionDetail = ({
   numberOfTokens,
   deposit,
   unlock,
+  native,
   isWhitelisted,
 }: Props) => {
   const [settings, setSettings] = useState<ISettings>({
+    nativeFee: 500000,
     vmFee: 0,
     txFee: 440000,
     tosiFee: 500000,
@@ -36,6 +40,7 @@ const TransactionDetail = ({
       const settingsFromFeatures = await getFeatures();
       setSettings({
         ...settings,
+        nativeFee: settingsFromFeatures.native_token_fee,
         tosiFee: settingsFromFeatures.tosi_fee,
         vmFee: settingsFromVM.withdrawal_fee,
       });
@@ -45,14 +50,20 @@ const TransactionDetail = ({
   }, []);
 
   const calcTxFee = () => {
-    let txCalc = ((numberOfTokens * 4000) + settings.txFee).toFixed(6);
+    let txCalc = (numberOfTokens * 4000 + settings.txFee).toFixed(6);
     if (Number(txCalc) >= Number(settings.txFee)) return Number(txCalc);
     return Number(settings.txFee);
   };
 
   const calcReturnedAda = () => {
     let returnedAda = deposit - settings.vmFee - calcTxFee();
-    if (unlock && !isWhitelisted) returnedAda -= settings.tosiFee;
+    if (unlock || native) {
+      // unlock
+      if (unlock && !isWhitelisted) returnedAda -= settings.tosiFee;
+      // only native, charging native fee
+      if (native && !unlock && !isWhitelisted)
+        returnedAda -= settings.nativeFee;
+    }
     return returnedAda;
   };
 
@@ -73,10 +84,10 @@ const TransactionDetail = ({
         <div className="w-28 text-right">{lovelaceToAda(calcTxFee())} ADA</div>
         <div className="text-right">Transaction fee</div>
       </div>
-      {unlock && !isWhitelisted ? (
+      {(unlock || native) && !isWhitelisted ? (
         <div className="p-1 flex items-center flex-row-reverse border-b border-color text-premium">
           <div className="w-28 text-right">
-            {lovelaceToAda(settings.tosiFee)} ADA
+            {lovelaceToAda(unlock ? settings.tosiFee : settings.nativeFee)} ADA
           </div>
           <div className="tooltip-activator cursor-help text-right">
             TosiFee <FontAwesomeIcon icon={faQuestionCircle} />

client/src/components/Header/index.tsx

@@ -19,7 +19,7 @@ function Header() {
   const theme = useSelector((state: RootState) => state.global.theme);
   const chain = useSelector((state: RootState) => state.global.chain);
   const connectedWallet = useSelector(
-    (state: RootState) => state.wallet.walletApi
+    (state: RootState) => state.wallet.walletApi,
   );
 
   const RenderWalletConnector = useCallback(() => {

client/src/components/Menu/cardano.tsx

@@ -158,7 +158,7 @@ export default function MenuCardano() {
                     key={socialMediaItem.url}
                     socialMediaItem={socialMediaItem}
                   />
-                )
+                ),
               )}
             </div>
           </div>

client/src/components/Menu/ergo.tsx

@@ -148,7 +148,7 @@ export default function MenuErgo() {
                     key={socialMediaItem.url}
                     socialMediaItem={socialMediaItem}
                   />
-                )
+                ),
               )}
             </div>
           </div>

client/src/components/MobileMenu/cardano.tsx

@@ -124,7 +124,7 @@ export default function MobileMenuCardano() {
                 key={socialMediaItem.url}
                 socialMediaItem={socialMediaItem}
               />
-            )
+            ),
           )}
         </div>
       </div>

client/src/components/MobileMenu/ergo.tsx

@@ -124,7 +124,7 @@ export default function MobileMenuErgo() {
                 key={socialMediaItem.url}
                 socialMediaItem={socialMediaItem}
               />
-            )
+            ),
           )}
         </div>
       </div>

client/src/components/Modal/InfoModal.tsx

@@ -12,7 +12,7 @@ import { InfoModalTypes } from "src/entities/common.entities";
 export const InfoModal = () => {
   const dispatch = useDispatch();
   const { text, type } = useSelector(
-    (state: RootState) => state.global.infoModalDetails
+    (state: RootState) => state.global.infoModalDetails,
   );
 
   const renderIcon = () => {

client/src/components/Pool/index.tsx

@@ -18,7 +18,7 @@ export default function Pool({ pool }: { pool: PoolInfo }) {
             text: `Staking to ${pool.ticker} is successful!`,
             type: InfoModalTypes.success,
           },
-        })
+        }),
       );
     });
   }

client/src/components/WalletSelector/CardanoWalletSelector.tsx

@@ -13,7 +13,7 @@ function CardanoWalletSelector() {
     dispatch(
       showModal({
         modalType: ModalTypes.wallet,
-      })
+      }),
     );
   };
 

client/src/components/WalletSelector/Disconnect.tsx

@@ -22,7 +22,7 @@ const Disconnect = forwardRef<HTMLDivElement, Props>(
         Disconnect
       </div>
     );
-  }
+  },
 );
 
 export default Disconnect;