3 files changed, 32 insertions, 13 deletions
diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index c9a59cd..0fbd818 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -47,7 +47,14 @@
     font-size: 0.7em;
   }
 }
-
+.udpType {
+    font-family: var(--font-mono);
+    font-size: 0.6em;
+    margin-right: 3px;
+    @media (--breakpoint-not-small) {
+            font-size: 0.7em;
+        }
+}
 .row {
   display: flex;
   align-items: center;
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 745de34..27fc1f2 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -30,7 +30,7 @@ function getLabelColor({
     return colorMap.na;
   } else if (number < 200) {
     return colorMap.good;
-  } else if (number < 400) {
+  } else if (number < 500) {
     return colorMap.normal;
   } else if (typeof number === 'number') {
     return colorMap.bad;
@@ -42,7 +42,7 @@ function getProxyDotBackgroundColor(
   latency: {
     number?: number;
   },
-  proxyType: string
+    proxyType: string,
 ) {
   if (NonProxyTypes.indexOf(proxyType) > -1) {
     return 'linear-gradient(135deg, white 15%, #999 15% 30%, white 30% 45%, #999 45% 60%, white 60% 75%, #999 75% 90%, white 90% 100%)';
@@ -55,7 +55,8 @@ type ProxyProps = {
   now?: boolean;
   proxy: any;
   latency: any;
-  isSelectable?: boolean;
+    isSelectable?: boolean;
+    udp?: boolean;
   onClick?: (proxyName: string) => unknown;
 };
 
@@ -63,13 +64,15 @@ function ProxySmallImpl({
   now,
   name,
   proxy,
-  latency,
+    latency,
+  udp,
   isSelectable,
   onClick,
 }: ProxyProps) {
   const color = useMemo(() => getProxyDotBackgroundColor(latency, proxy.type), [
     latency,
-    proxy,
+      proxy,
+    
   ]);
   const title = useMemo(() => {
     let ret = name;
@@ -104,7 +107,7 @@ function ProxySmallImpl({
       title={title}
       className={className}
       style={{ background: color }}
-      onClick={doSelect}
+          onClick={doSelect}
       onKeyDown={handleKeyDown}
       role={isSelectable ? 'menuitem' : ''}
     />
@@ -115,6 +118,7 @@ function formatProxyType(t: string) {
   if (t === 'Shadowsocks') return 'SS';
   return t;
 }
+
 const positionProxyNameTooltip = (triggerRect: { left: number; top: number }) => {
   return {
     left: triggerRect.left + window.scrollX - 5,
@@ -140,7 +144,8 @@ function ProxyImpl({
   now,
   name,
   proxy,
-  latency,
+    latency,
+  udp,
   isSelectable,
   onClick,
 }: ProxyProps) {
@@ -148,6 +153,10 @@ function ProxyImpl({
   const doSelect = React.useCallback(() => {
     isSelectable && onClick && onClick(name);
   }, [name, onClick, isSelectable]);
+    function formatUdpType (t: boolean) {
+        if (!t) return '';
+        return 'udp';
+    }
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent) => {
       if (e.keyCode === keyCodes.Enter) {
@@ -180,9 +189,12 @@ function ProxyImpl({
       <div className={s0.row}>
         <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
           {formatProxyType(proxy.type)}
-        </span>
+              </span>
+              <span className={s0.udpType}>
+                  {formatUdpType(udp)}
+              </span>
         {latency && latency.number ? (
-          <ProxyLatency number={latency.number} color={color} />
+                  <ProxyLatency number={latency.number} color={color} />
         ) : null}
       </div>
     </div>
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index 562d4b7..6f3047a 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -76,7 +76,8 @@ function ProxyProviderImpl({
 
   const timeAgo = formatDistance(new Date(updatedAt), new Date());
   const total = subscriptionInfo ? formatBytes(subscriptionInfo.Total):0;
-  const unused = subscriptionInfo ? formatBytes(subscriptionInfo.Total - subscriptionInfo.Download - subscriptionInfo.Upload):0;
+    const unused = subscriptionInfo ? formatBytes(subscriptionInfo.Total - subscriptionInfo.Download - subscriptionInfo.Upload) : 0;
+    const percentage = subscriptionInfo ? (((subscriptionInfo.Total - subscriptionInfo.Download - subscriptionInfo.Upload) / subscriptionInfo.Total) * 100).toFixed(2) : 0;
   const expireStr = () => {
     if (subscriptionInfo.Expire === 0) {
       return 'Null';
@@ -110,7 +111,7 @@ function ProxyProviderImpl({
       </div>
       {
         subscriptionInfo && <div className={s.updatedAt}>
-          <small>{unused} / {total} &nbsp;&nbsp; Expire: {expireStr()} </small>
+                  <small>{unused} / {total} ( { percentage }% ) &nbsp;&nbsp; Expire: {expireStr()} </small>
         </div>
       }
       <div className={s.updatedAt}>
@@ -154,7 +155,6 @@ function formatBytes(bytes, decimals = 2) {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
-
 function Refresh() {
   const module = framerMotionResouce.read();
   const motion = module.motion;