Support ahUSDT on mainnet and PINK (#18)

* Support ahUSDT on mainnet and PINK

* Add dev deploy

* Update website metadata

* Improve no-data style

* Add gap between chain options

* Fix fee asset id

Author: JayJay1024

.github/workflows/deploy-dev.yml

@@ -0,0 +1,31 @@
+name: Deploy development
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  deploy-package:
+    name: Deploy package
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/checkout@v2
+        with:
+          repository: darwinia-network/devops
+          path: .github
+
+      - uses: ./.github/actions/smart-vercel
+        name: Deploy app
+        with:
+          vercel_token: ${{ secrets.VERCEL_TOKEN }}
+          vercel_group: itering
+          preview_output: true
+          alias_domain: "crosschain-dev"
+          project_name: "crosschain-ui"
+          script_run: false
+          dist_path: .
+          enable_notify_slack: true
+          slack_channel: darwinia-apps
+          slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}

public/images/asset/pink.jpg

@@ -28,7 +28,7 @@ body {
 
 @layer components {
   .border-radius {
-    @apply rounded-lg;
+    @apply rounded-2xl;
   }
 
   .app-header {

public/images/network/darwinia.png

@@ -10,8 +10,8 @@ import TransferProvider from "@/providers/transfer-provider";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Darwinia Cross-Chain",
-  description: "Darwinia USDT Cross-Chain",
+  title: "Asset Hub Bridge - Darwinia",
+  description: "Assets cross-chain between Darwinia and Asset Hub.",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

public/images/warning.svg

@@ -71,7 +71,7 @@ export default function AddressInput({
       clickable={!!options?.length || !canInput}
       canInput={canInput}
       innerSuffix={<ConnectWallet who={who} height="full" />}
-      wrapClassName={`h-10 bg-transparent flex items-center justify-between p-1 border border-radius transition-colors duration-200 ${
+      wrapClassName={`h-12 bg-transparent flex items-center justify-between p-1 border border-radius transition-colors duration-200 ${
         value?.valid === false ? "border-alert" : "border-transparent"
       }`}
       inputClassName="w-full border-radius h-full bg-transparent px-1"
@@ -100,8 +100,8 @@ export default function AddressInput({
           </button>
         ))
       ) : (
-        <div className="px-middle py-small">
-          <span className="text-sm font-medium">No data</span>
+        <div className="inline-flex justify-center px-middle py-small">
+          <span className="text-sm font-medium text-slate-400">No data</span>
         </div>
       )}
     </InputSelect>

src/app/globals.css

@@ -14,30 +14,31 @@ export default function AssetSelect({ value, options, disabled, onChange = () =>
   return (
     <Select
       label={
-        <div className="flex items-center gap-small truncate">
-          <Image width={16} height={16} alt="Asset icon" src={getAssetIconSrc(value.icon)} />
+        <div className="flex items-center gap-small truncate px-1">
+          <Image width={22} height={22} alt="Asset icon" src={getAssetIconSrc(value.icon)} className="rounded-full" />
           <span>{value.symbol}</span>
         </div>
       }
       disabled={disabled}
       sameWidth
-      labelClassName="flex items-center gap-middle shrink-0 w-28 justify-between bg-component h-full border-radius px-1 hover:opacity-80 transition-[transform,color] active:translate-y-1 disabled:translate-y-0 disabled:opacity-100 disabled:cursor-not-allowed"
-      childClassName="flex flex-col py-small bg-component border-primary border border-radius"
+      labelClassName="flex items-center gap-middle shrink-0 w-28 justify-between bg-component h-full border-radius px-1 hover:opacity-80 transition-[transform,color] disabled:translate-y-0 disabled:opacity-100 disabled:cursor-not-allowed"
+      childClassName="flex flex-col py-small bg-component border-primary border border-radius gap-[1px]"
     >
       {options?.length ? (
         options.map((asset) => (
           <button
             key={asset.symbol}
+            disabled={asset.id === value.id}
             onClick={() => onChange(asset)}
-            className="flex items-center gap-small px-middle py-2 transition-colors hover:bg-white/10"
+            className="flex items-center gap-small px-middle py-2 transition-colors hover:bg-white/10 disabled:bg-white/10"
           >
-            <Image width={16} height={16} alt="Asset icon" src={getAssetIconSrc(asset.icon)} />
+            <Image width={20} height={20} alt="Asset icon" src={getAssetIconSrc(asset.icon)} className="rounded-full" />
             <span className="text-sm font-medium">{asset.symbol}</span>
           </button>
         ))
       ) : (
-        <div className="px-middle py-2">
-          <span className="text-sm font-medium">No data</span>
+        <div className="inline-flex justify-center px-middle py-2">
+          <span className="text-sm font-medium text-slate-400">No data</span>
         </div>
       )}
     </Select>

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Asset } from "@/types";
+import { Asset, Cross } from "@/types";
 import Input from "@/ui/input";
 import { BN, BN_ZERO, bnToBn } from "@polkadot/util";
 import AssetSelect from "./asset-select";
@@ -18,7 +18,7 @@ interface Props {
   disabled?: boolean;
   placeholder?: string;
   balance?: BN;
-  min?: BN;
+  cross?: Cross;
   asset?: Asset;
   assetSupply?: BN;
   assetLimit?: BN;
@@ -32,7 +32,7 @@ export default function BalanceInput({
   disabled,
   placeholder,
   balance,
-  min,
+  cross,
   asset,
   assetSupply,
   assetLimit,
@@ -52,6 +52,13 @@ export default function BalanceInput({
     return placeholder ?? "Enter an amount";
   }, [balance, asset, placeholder]);
 
+  const min = useMemo(() => {
+    if (cross && cross.fee.asset.native) {
+      return cross.fee.amount;
+    }
+    return undefined;
+  }, [cross]);
+
   const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
     (e) => {
       if (e.target.value) {
@@ -77,9 +84,7 @@ export default function BalanceInput({
     const inputWidth = inputRef.current?.clientWidth || 1;
     const spanWidth = spanRef.current?.clientWidth || 0;
     const percent = (spanWidth / inputWidth) * 100;
-    if (percent < 10) {
-      setDynamicStyle("text-[3rem] font-extralight");
-    } else if (percent < 20) {
+    if (percent < 20) {
       setDynamicStyle("text-[2.25rem] font-light");
     } else if (percent < 30) {
       setDynamicStyle("text-[1.875rem] font-light");

src/components/address-input.tsx

@@ -15,30 +15,31 @@ export default function ChainSelect({ value, options, disabled, onChange = () =>
     <Select
       label={
         <div className="flex max-w-[140px] items-center gap-small">
-          <Image width={18} height={18} alt="Chain logo" src={getChainLogoSrc(value.logo)} />
+          <Image width={20} height={20} alt="Chain logo" src={getChainLogoSrc(value.logo)} />
           <span className="truncate text-white/50">{value.name}</span>
         </div>
       }
       disabled={disabled}
       sameWidth
       labelClassName="flex items-center gap-middle py-[4px] px-[6px] bg-transparent hover:bg-white/10 border-radius"
-      childClassName="flex flex-col py-small bg-component border-primary border border-radius"
+      childClassName="flex flex-col py-small bg-component border-primary border border-radius gap-[1px]"
       arrowClassName="opacity-50"
     >
       {options?.length ? (
         options.map((chain) => (
           <button
             key={chain.network}
+            disabled={chain.network === value.network}
             onClick={() => onChange(chain)}
-            className="flex items-center gap-small px-middle py-2 transition-colors hover:bg-white/10"
+            className="flex items-center gap-small px-middle py-2 transition-colors hover:bg-white/10 disabled:bg-white/10"
           >
-            <Image width={16} height={16} alt="Chain logo" src={getChainLogoSrc(chain.logo)} />
+            <Image width={18} height={18} alt="Chain logo" src={getChainLogoSrc(chain.logo)} />
             <span className="truncate text-sm font-medium">{chain.name}</span>
           </button>
         ))
       ) : (
-        <div className="px-middle py-2">
-          <span className="text-sm font-medium">No data</span>
+        <div className="inline-flex justify-center px-middle py-2">
+          <span className="text-sm font-medium text-slate-400">No data</span>
         </div>
       )}
     </Select>